add: some samples of ui widgets

.idea/modules.xml

@@ -2,8 +2,8 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
+      <module fileurl="file://$PROJECT_DIR$/Auto.js.iml" filepath="$PROJECT_DIR$/Auto.js.iml" />
       <module fileurl="file://E:\YiBin\AndroidStudioProjects\NoRootScriptDroid\Auto.js.iml" filepath="E:\YiBin\AndroidStudioProjects\NoRootScriptDroid\Auto.js.iml" />
-      <module fileurl="file://$PROJECT_DIR$/NoRootScriptDroid.iml" filepath="$PROJECT_DIR$/NoRootScriptDroid.iml" />
       <module fileurl="file://C:\Users\Stardust\Documents\AndroidProjects\Auto.js\NoRootScriptDroid.iml" filepath="C:\Users\Stardust\Documents\AndroidProjects\Auto.js\NoRootScriptDroid.iml" />
       <module fileurl="file://$PROJECT_DIR$/app/app.iml" filepath="$PROJECT_DIR$/app/app.iml" />
       <module fileurl="file://$PROJECT_DIR$/autojs/autojs.iml" filepath="$PROJECT_DIR$/autojs/autojs.iml" />

app/build.gradle

@@ -135,7 +135,6 @@ dependencies {
     compile('com.afollestad.material-dialogs:commons:0.9.2.3', {
         exclude group: 'com.android.support'
     })
-    compile 'com.makeramen:roundedimageview:2.3.0'
     compile 'com.rengwuxian.materialedittext:library:2.0.3'
     compile 'org.msgpack:msgpack-core:0.8.11'
     compile project(':automator')

app/src/main/assets/sample/复杂界面/用户调查.js

@@ -51,4 +51,4 @@ ui.layout(
     </vertical>
 )
 
-ui.webview.getWebView().loadUrl("http://www.autojs.org");
+ui.webview.loadUrl("http://www.autojs.org");

app/src/main/assets/sample/界面/图片.js

@@ -1,8 +0,0 @@
-"ui";
-
-ui.layout(
-<frame>
-    <img src="http://www.autojs.org/assets/uploads/profile/3-profileavatar.png"
-        w="80" h="80" align="center"/>
-</frame>
-)

app/src/main/assets/sample/界面控件/下拉菜单.js

@@ -0,0 +1,26 @@
+"ui";
+
+ui.layout(
+    <vertical padding="16">
+        <horizontal>
+            <text textSize="16sp">下拉菜单</text>
+            <spinner id="sp1" entries="选项1|选项2|选项3"/>
+        </horizontal>
+        <horizontal>
+            <text textSize="16sp">对话框菜单</text>
+            <spinner id="sp2" entries="选项4|选项5|选项6" spinnerMode="dialog"/>
+        </horizontal>
+        <button id="ok">确定</button>
+        <button id="select3">选择选项3</button>
+    </vertical>
+);
+
+ui.ok.click(()=>{
+    var i = ui.sp1.getSelectedItemPosition();
+    var j = ui.sp2.getSelectedItemPosition();
+    toast("您的选择是选项" + (i + 1) + "和选项" + (j + 4));
+});
+
+ui.select3.click(()=>{
+    ui.sp1.setSelection(2);
+});

app/src/main/assets/sample/界面控件/图片控件.js

@@ -0,0 +1,32 @@
+"ui";
+
+ui.layout(
+<scroll>
+    <vertical bg="#707070" padding="16">
+        <text text="网络图片" textColor="black" textSize="16sp" marginTop="16"/>
+        <img src="http://www.autojs.org/assets/uploads/profile/3-profileavatar.png"
+            w="100" h="100"/>
+
+        <text text="带边框的图片" textColor="black" textSize="16sp" marginTop="16"/>
+        <img src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
+                w="100" h="100" borderWidth="2dp" borderColor="#202020"/>
+
+        <text text="圆形图片" textColor="black" textSize="16sp" marginTop="16"/>
+        <img src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
+                w="100" h="100" circle="true"/>
+
+        <text text="带边框的圆形图片" textColor="black" textSize="16sp" marginTop="16"/>
+        <img src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
+                w="100" h="100" circle="true" borderWidth="2dp" borderColor="#202020"/>
+
+        <text text="圆角图片" textColor="black" textSize="16sp" marginTop="16"/>
+        <img id="rounded_img" src="http://www.autojs.org/assets/uploads/profile/1-profileavatar.jpeg"
+                w="100" h="100" radius="20dp" scaleType="fitXY"/>
+        <button id="change_img" text="更改图片"/>
+    </vertical>
+</scroll>
+);
+
+ui.change_img.click(()=>{
+    ui.rounded_img.setSource("http://www.autojs.org/assets/uploads/profile/1-profilecover.jpeg");
+});

app/src/main/assets/sample/界面控件/复选框单选框控件.js

@@ -0,0 +1,18 @@
+"ui";
+
+ui.layout(
+    <vertical padding="16">
+        <checkbox text="复选框"/>
+        <checkbox checked="true" text="勾选的复选框"/>
+        <radiogroup>
+            <radio text="单选框1"/>
+            <radio text="单选框2"/>
+            <radio text="单选框3"/>
+        </radiogroup>
+        <radiogroup mariginTop="16">
+            <radio text="单选框1"/>
+            <radio text="单选框2"/>
+            <radio text="勾选的单选框3" checked="true"/>
+        </radiogroup>
+    </vertical>
+);

app/src/main/assets/sample/界面控件/按钮控件.js

@@ -0,0 +1,16 @@
+"ui";
+
+ui.layout(
+    <vertical padding="16">
+        <button text="普通按钮" w="auto"/>
+        <button text="带颜色按钮" style="Widget.AppCompat.Button.Colored" w="auto"/>
+        <button text="无边框按钮" style="Widget.AppCompat.Button.Borderless" w="auto"/>
+        <button text="无边框有颜色按钮" style="Widget.AppCompat.Button.Borderless.Colored" w="auto"/>
+        <button text="长长的按钮" w="*"/>
+        <button id="click_me" text="点我" w="auto"/>
+    </vertical>
+);
+
+ui.click_me.click(()=>{
+    toast("我被点啦");
+});

app/src/main/assets/sample/界面控件/文本控件.js

@@ -8,9 +8,9 @@ ui.layout(
         <text textStyle="italic">斜体</text>
         <text textColor="#00ff00">原谅色</text>
         <text margin="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
-        <text maxLines="1" ellipsize="end" marginTop="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
+        <text maxLines="1" ellipsize="end" margin="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
         <text maxLines="2" ellipsize="end" margin="8">Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发，主要支持手机。2005年8月由Google收购注资。2007年11月，Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。</text>
-        <text w="*" gravity="center">居中</text>
+        <text w="*" gravity="center" textSize="20sp">居中</text>
         <text autoLink="all">自动超链接网址www.baidu.com, 邮箱 123@qq.com等</text>
     </vertical>
 );

app/src/main/assets/sample/界面控件/时间日期选择控件.js

@@ -0,0 +1,20 @@
+"ui";
+
+ui.layout(
+    <scroll>
+        <vertical padding="16">
+            <text text="日历样式日期选择" textColor="black" textSize="16sp" marginTop="16"/>
+            <datepicker />
+
+            <text text="滑动日期选择" textColor="black" textSize="16sp" marginTop="16"/>
+            <datepicker datePickerMode="spinner"/>
+
+            <text text="时钟样式时间选择" textColor="black" textSize="16sp" marginTop="16"/>
+            <timepicker />
+
+            <text text="滑动时间选择" textColor="black" textSize="16sp" marginTop="16"/>
+            <timepicker timePickerMode="spinner"/>
+
+        </vertical>
+    </scroll>
+)

app/src/main/assets/sample/界面控件/输入框控件.js

@@ -0,0 +1,42 @@
+"ui";
+
+ui.layout(
+    <vertical padding="16">
+         <text text="输入框" textColor="black" textSize="16sp" marginTop="16"/>
+         <input />
+
+         <!-- hint属性用来设置输入框的提示-->
+         <text text="带提示的输入框" textColor="black" textSize="16sp" marginTop="16"/>
+         <input hint="请输入一些内容"/>
+
+         <!-- inputType属性用来设置输入类型，包括number, email, phone等-->
+         <text text="数字输入框" textColor="black" textSize="16sp" marginTop="16"/>
+         <input inputType="number" text="123"/>
+
+         <!-- password属性用来设置输入框是否是密码输入框 -->
+         <text text="密码输入框" textColor="black" textSize="16sp" marginTop="16"/>
+         <input password="true"/>
+
+         <!-- lines属性用来设置输入框的行数 -->
+         <text text="多行输入框" textColor="black" textSize="16sp" marginTop="16"/>
+         <input lines="3"/>
+
+         <text text="设置输入框错误信息" textColor="black" textSize="16sp" marginTop="16"/>
+         <input id="qq" inputType="number" hint="请输入您的QQ号码"/>
+         <button id="ok" text="确定" w="auto" style="Widget.AppCompat.Button.Colored"/>
+    </vertical>
+);
+
+ui.ok.click(()=>{
+    var text = ui.qq.text();
+    if(text.length == 0){
+        ui.qq.setError("输入不能为空");
+        return;
+    }
+    var qq = parseInt(text);
+    if(qq < 10000){
+        ui.qq.setError("QQ号码格式错误");
+        return;
+    }
+    ui.qq.setError(null);
+});

app/src/main/assets/sample/界面控件/进度条控件.js

@@ -0,0 +1,56 @@
+"ui";
+
+ui.layout(
+    <vertical padding="16">
+        <text text="处理中..." textColor="black" textSize="16sp"/>
+        <progressbar />
+
+        <text text="直线无限进度条" textColor="black" textSize="16sp" marginTop="24"/>
+        <progressbar indeterminate="true" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
+
+        <text text="直线进度条" textColor="black" textSize="16sp" marginTop="24"/>
+        <progressbar progress="30" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
+
+        <text text="可调节进度条" textColor="black" textSize="16sp" marginTop="24"/>
+        <seekbar progress="20"/>
+
+        <horizontal gravity="center" marginTop="24">
+            <text id="progress_value" textColor="black" textSize="16sp" margin="8" text="0"/>
+            <progressbar id="progress" w="*" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>
+        </horizontal>
+        <button id="download">开始下载</button>
+    </vertical>
+);
+
+var downloadId = null;
+
+ui.download.click(()=>{
+    if(downloadId != null){
+        stopDownload();
+    }else{
+        startDownload();
+    }
+});
+
+function stopDownload(){
+    ui.download.text("开始下载");
+    clearInterval(downloadId);
+    downloadId = null;
+}
+
+function startDownload(){
+    if(ui.progress.getProgress() == 100){
+        ui.progress.setProgress(0);
+    }
+    ui.download.text("停止下载");
+    downloadId = setInterval(()=>{
+        var p = ui.progress.getProgress();
+        p++;
+        if(p > 100){
+            stopDownload();
+            return;
+        }
+        ui.progress.setProgress(p);
+        ui.progress_value.setText(p.toString());
+    }, 200);
+}

autojs/build.gradle

@@ -50,6 +50,7 @@ dependencies {
     compile 'com.android.support:appcompat-v7:25.4.0'
     compile 'com.github.hyb1996:EnhancedFloaty:0.17'
     compile 'com.github.hyb1996:OpenCvLib:2.4.13.4-imgproc'
+    compile 'com.makeramen:roundedimageview:2.3.0'
     // Gson
     compile 'com.google.code.gson:gson:2.8.0'
     // Terminal emulator

autojs/src/main/assets/modules/__ui__.js

@@ -18,7 +18,7 @@ module.exports = function(__runtime__, scope){
     ui.id = function(id){
         if(!ui.view)
             return null;
-        var v = ui.view.getChildAt(0).id(id);
+        var v = ui.findViewByStringId(ui.view.getChildAt(0), id);
         if(v){
             v = decorate(v);
         }

autojs/src/main/java/com/stardust/autojs/core/ui/ConvertLayoutInflater.java

@@ -7,6 +7,8 @@ import android.view.ViewGroup;
 import android.widget.TextView;
 
 import com.stardust.autojs.core.ui.widget.JsFrameLayout;
+import com.stardust.autojs.core.ui.widget.JsImageView;
+import com.stardust.autojs.core.ui.xml.JsImageViewAttrSetter;
 import com.stardust.autojs.core.ui.xml.XmlConverter;
 import com.stardust.util.MapEntries;
 
@@ -23,13 +25,28 @@ import java.util.Map;
 
 public class ConvertLayoutInflater implements JsLayoutInflater {
 
+    private DynamicLayoutInflater mDynamicLayoutInflater;
+
+    public ConvertLayoutInflater() {
+
+    }
+
+    private void ensureInflater(Context context) {
+        if (mDynamicLayoutInflater != null) {
+            return;
+        }
+        mDynamicLayoutInflater = new DynamicLayoutInflater(context);
+        mDynamicLayoutInflater.registerViewAttrSetter(JsImageView.class.getName(),
+                new JsImageViewAttrSetter<>());
+    }
 
     @Override
     public View inflate(Context context, String xml) {
+        ensureInflater(context);
         try {
             String androidLayoutXml = XmlConverter.convertToAndroidLayout(xml);
             JsFrameLayout root = new JsFrameLayout(context);
-            new DynamicLayoutInflater(context).inflate(androidLayoutXml, root);
+            mDynamicLayoutInflater.inflate(androidLayoutXml, root);
             return root;
         } catch (Exception e) {
             throw new RuntimeException(e);

autojs/src/main/java/com/stardust/autojs/core/ui/widget/JsImageView.java

@@ -0,0 +1,54 @@
+package com.stardust.autojs.core.ui.widget;
+
+import android.content.Context;
+import android.graphics.drawable.Drawable;
+import android.net.Uri;
+import android.util.AttributeSet;
+
+import com.makeramen.roundedimageview.RoundedImageView;
+
+import org.autojs.dynamiclayoutinflater.util.Drawables;
+
+/**
+ * Created by Stardust on 2017/11/30.
+ */
+
+public class JsImageView extends RoundedImageView {
+
+    private boolean mCircle;
+
+    public JsImageView(Context context) {
+        super(context);
+    }
+
+    public JsImageView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public JsImageView(Context context, AttributeSet attrs, int defStyle) {
+        super(context, attrs, defStyle);
+    }
+
+    public void setCircle(boolean circle) {
+        mCircle = circle;
+        if (circle && getWidth() != 0) {
+            setCornerRadius(Math.min(getWidth(), getHeight()) / 2);
+        }
+    }
+
+    public boolean isCircle() {
+        return mCircle;
+    }
+
+    public void setSource(String uri) {
+        Drawables.loadInto(this, Uri.parse(uri));
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        if (mCircle) {
+            setCornerRadius(Math.min(getWidth(), getHeight()) / 2);
+        }
+    }
+}

autojs/src/main/java/com/stardust/autojs/core/ui/xml/AttributeHandler.java

@@ -1,5 +1,7 @@
 package com.stardust.autojs.core.ui.xml;
 
+import android.util.Log;
+
 import org.w3c.dom.Node;
 
 import java.util.HashMap;
@@ -44,7 +46,10 @@ public interface AttributeHandler {
 
         @Override
         public boolean handle(String nodeName, Node attr, StringBuilder layoutXml) {
-            layoutXml.append("android:").append(mapAttrName(nodeName, attr.getNodeName()))
+            if (!attr.getNodeName().equals("style")) {
+                layoutXml.append("android:");
+            }
+            layoutXml.append(mapAttrName(nodeName, attr.getLocalName()))
                     .append("=\"").append(mapAttrValue(nodeName, attr.getNodeName(), attr.getNodeValue())).append("\"\n");
             return true;
         }

autojs/src/main/java/com/stardust/autojs/core/ui/xml/JsImageViewAttrSetter.java

@@ -0,0 +1,57 @@
+package com.stardust.autojs.core.ui.xml;
+
+import android.view.ViewGroup;
+import android.widget.ImageView;
+import android.widget.ImageView.ScaleType;
+
+import com.stardust.autojs.core.ui.widget.JsImageView;
+
+import org.autojs.dynamiclayoutinflater.attrsetter.BaseViewAttrSetter;
+import org.autojs.dynamiclayoutinflater.attrsetter.ImageViewAttrSetter;
+import org.autojs.dynamiclayoutinflater.util.Colors;
+import org.autojs.dynamiclayoutinflater.util.Dimensions;
+import org.autojs.dynamiclayoutinflater.util.ValueMapper;
+
+import java.util.Map;
+
+/**
+ * Created by Stardust on 2017/11/30.
+ */
+
+public class JsImageViewAttrSetter<V extends JsImageView> extends ImageViewAttrSetter<V> {
+
+
+    protected static final ValueMapper<ScaleType> SCALE_TYPES = new ValueMapper<ScaleType>("scaleType")
+            .map("center", ScaleType.CENTER)
+            .map("centerCrop", ScaleType.CENTER_CROP)
+            .map("centerInside", ScaleType.CENTER_INSIDE)
+            .map("fitCenter", ScaleType.FIT_CENTER)
+            .map("fitEnd", ScaleType.FIT_END)
+            .map("fitStart", ScaleType.FIT_START)
+            .map("fitXY", ScaleType.FIT_XY)
+            .map("matrix", ScaleType.MATRIX);
+
+    @Override
+    public boolean setAttr(V view, String attr, String value, ViewGroup parent, Map<String, String> attrs) {
+        switch (attr) {
+            case "radius":
+                view.setCornerRadius(Dimensions.parseToPixel(value, view));
+                break;
+            case "borderWidth":
+                view.setBorderWidth(Dimensions.parseToPixel(value, view));
+                break;
+            case "borderColor":
+                view.setBorderColor(Colors.parse(view, value));
+                break;
+            case "circle":
+                view.setCircle(true);
+                break;
+            case "scaleType":
+                view.setScaleType(SCALE_TYPES.get(value));
+                break;
+            default:
+                return super.setAttr(view, attr, value, parent, attrs);
+        }
+        return true;
+    }
+}

autojs/src/main/java/com/stardust/autojs/core/ui/xml/XmlConverter.java

@@ -1,11 +1,13 @@
 package com.stardust.autojs.core.ui.xml;
 
+import android.support.v7.widget.Toolbar;
 import android.webkit.WebView;
 import android.widget.CheckBox;
 import android.widget.DatePicker;
 import android.widget.ProgressBar;
 import android.widget.RadioButton;
 import android.widget.RadioGroup;
+import android.widget.ScrollView;
 import android.widget.SeekBar;
 import android.widget.Spinner;
 import android.widget.TimePicker;
@@ -13,6 +15,7 @@ import android.widget.TimePicker;
 import com.stardust.autojs.core.ui.widget.JsButton;
 import com.stardust.autojs.core.ui.widget.JsEditText;
 import com.stardust.autojs.core.ui.widget.JsFrameLayout;
+import com.stardust.autojs.core.ui.widget.JsImageView;
 import com.stardust.autojs.core.ui.widget.JsLinearLayout;
 import com.stardust.autojs.core.ui.widget.JsRelativeLayout;
 import com.stardust.autojs.core.ui.widget.JsTextView;
@@ -49,7 +52,7 @@ public class XmlConverter {
                     .map("button", JsButton.class.getName())
                     .map("text", JsTextView.class.getName())
                     .map("input", JsEditText.class.getName())
-                    .map("img", "ImageView")
+                    .map("img", JsImageView.class.getName())
                     .map("datepicker", DatePicker.class.getName())
                     .map("timepicker", TimePicker.class.getName())
                     .map("webview", JsWebView.class.getName())
@@ -59,6 +62,8 @@ public class XmlConverter {
                     .map("radio", RadioButton.class.getName())
                     .map("radiogroup", RadioGroup.class.getName())
                     .map("checkbox", CheckBox.class.getName())
+                    .map("scroll", ScrollView.class.getName())
+                    .map("toolbar", Toolbar.class.getName())
             );
 
     private static final AttributeHandler ATTRIBUTE_HANDLER = new AttributeHandler.AttrNameRouter()