add: some samples of ui widgets

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);
+}