EasyClick 原生UI连载八

EasyClick 原生UI教程

讲师：Mr-老鬼，QQ：1156346325
EasyClick 原生UI教程电梯直达：
EasyClick 原生UI教程总纲

EasyClick 原生UI 之登录UI

打包运行后效果

如何搭配使用AndroidStudio写一个漂亮的UI请看上一篇 EasyClick 原生UI连载七

搭配Androidstudio 设计UI

Androidstudio编辑效果

EasyClick项目编辑修改xml

<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();

我是Mr-老鬼、QQ1156346325 。交流QQ群：620028786,647082990
---------------------------------------版权声明------------------------------------------------------
版权所有~Mr-老鬼 ~转载请注明原文地址。
免责声明：本文所有的教程仅限交流学习使用不得用于违法用途，造成的法律后果本人不承担责任。