EasyClick 原生UI連載八

EasyClick 原生UI連載

1. EasyClick原生UI連載 一
   基礎控制元件
2. EasyClick原生UI連載 二
   基礎控制元件
3. EasyClick原生UI連載 三
   原生UI共有屬性
4. EasyClick原生UI連載 四
   基礎布局
5. EasyClick原生UI連載 五
   綜合使用
6. EasyClick原生UI連載 六
   UI與腳本之間的互動 一
7. EasyClick 原生UI連載七
   搭配Androidstudio 設計UI
8. EasyClick 原生UI連載九
   原生UI之布局科普
9. EasyClick 原生UI連載十
   原生UI控制元件科普

EasyClick 原生UI 之登錄UI

Androidstudio編輯效果

復制到EasyClick 布局編輯修改后

<?xml version="1.0" encoding="UTF-8" ?>
<RelativeLayout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xmlns:android="http://schemas.android.com/apk/res/android"
                xsi:noNamespaceSchemaLocation="layout.xsd"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_margin="30dp">
    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="200dp"
                  android:gravity="center"
                  android:orientation="horizontal">

        <ImageView android:tag="imageview"
                   android:layout_width="30dp"
                   android:layout_height="30dp" />

        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="EC云測"
                  android:textColor="#0072E3"
                  android:textSize="30sp" />
    </LinearLayout>


    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="60dp"
                  android:layout_marginTop="280dp"
                  android:layout_marginBottom="220dp"
                  android:gravity="center"
                  android:orientation="horizontal">

        <TextView android:layout_width="60dp"
                  android:layout_height="wrap_content"
                  android:text="賬號："
                  android:textColor="#FF0000"
                  android:textSize="19sp" />

        <LinearLayout android:layout_width="0dp"
                      android:layout_height="wrap_content"
                      android:layout_weight="1"
                      android:orientation="vertical">

            <EditText android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:hint="請輸入賬號"
                      android:textSize="19sp" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="60dp"
                  android:layout_marginTop="340dp"
                  android:layout_marginBottom="140dp"
                  android:gravity="center"
                  android:orientation="horizontal">

        <TextView android:layout_width="60dp"
                  android:layout_height="wrap_content"
                  android:text="密碼："
                  android:textColor="#FF0000"
                  android:textSize="19sp" />

        <LinearLayout android:layout_width="0dp"
                      android:layout_height="wrap_content"
                      android:layout_weight="1"
                      android:orientation="vertical">

            <EditText android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:hint="請輸入密碼"
                      android:inputType="textPassword"
                      android:textSize="19sp" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="80dp"
                  android:layout_marginTop="410dp"
                  android:gravity="center">

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#0072E3"
                android:text="登錄/注冊"
                android:textColor="#FFFFFF" />
    </LinearLayout>


</RelativeLayout>

ui.js 檔案撰寫UI代碼

function main() {

    ui.layout("引數設定", "main.xml");
    var bg = ui.resResAsDrawable("ec.png");
    logd(bg)
    ui.imageview.setBackgroundDrawable(bg);
    // 下面寫賬號名操作 密碼操作 登錄按鈕操作
   // 略過，，，，，，，
}
main();

打包運行后效果