EasyClick 原生UI教程

講師：Mr-老鬼，QQ：1156346325
EasyClick 原生UI教程電梯直達： EasyClick 原生UI教程總綱

EasyClick 原生UI連載十八之底部標簽欄UI簡易框架

效果圖

圖一
在這里插入圖片描述
圖二

布局代碼

貼一下目錄檔案
在這里插入圖片描述

main.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!--
  ~ Copyright(c) 2021,
  ~    專案名稱:底部標簽欄
  ~    檔案名稱:main.xml
  ~    創建時間:2021/4/17 下午6:12
  ~    作者:laogui
  -->

<LinearLayout 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:background="#0066ff"
              android:orientation="vertical"
              android:paddingTop="10dp">
    <!-- 頂部標題欄布局-->
    <include android:layout="@layout/titlebar" />
    <!-- 第一界面布局   默認顯示界面  -->
    <include android:layout="@layout/homelayout" />
    <!-- 第二界面布局 -->
    <include android:layout="@layout/configlayout" />
    <!-- 第三界面布局-->
    <include android:layout="@layout/logbooklayout" />
    <!-- 第四界面布局-->
    <include android:layout="@layout/aboutlayout" />
    <!-- 底部標簽布局 -->
    <include android:layout="@layout/bottombar" />

</LinearLayout>

titlebar.xml

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright(c) 2021,
  ~    專案名稱:619
  ~    檔案名稱:titlebar.xml
  ~    創建時間:2021/4/17 下午6:12
  ~    作者:laogui
  -->

<LinearLayout 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="40dp"
              android:layout_width="match_parent"
              android:orientation="horizontal"
              android:paddingLeft="10dp"
              android:paddingRight="10dp"
              android:background="#0066ff">
    <!--我是標題欄的標題-->
    <TextView android:layout_width="wrap_parent"
              android:layout_height="match_parent"
              android:gravity="center"
              android:textColor="#FFFFFF"
              android:background="#0066ff"
              android:textSize="20sp"
              android:text="底部標簽框架" />
    <TextView android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_weight="1"
              android:textColor="#FFFFFF"
              android:background="#0066ff"
              android:text="" />
    <!-- DeBug 啟動遠程除錯按鈕 -->
    <Button android:layout_width="30dp"
            android:layout_height="30dp"
            android:tag="remotedebug"
            android:gravity="center"
            android:textColor="#FFFFFF"
            android:background="#0066ff"
            android:textSize="20sp"
            android:text=""
            android:layout_marginRight="5dp" />
    <!-- settings 啟動EC系統設定按鈕 -->
    <Button android:layout_width="30dp"
            android:layout_height="30dp"
            android:tag="settings"
            android:gravity="center"
            android:textColor="#FFFFFF"
            android:background="#0066ff"
            android:textSize="20sp"
            android:text="" />

</LinearLayout>

bottombar.xml

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright(c) 2021,
  ~    專案名稱:619
  ~    檔案名稱:bottombar.xml
  ~    創建時間:2021/4/17 下午6:12
  ~    作者:laogui
  -->

<LinearLayout 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="40dp"
              android:layout_width="match_parent"
              android:orientation="horizontal"
              android:layout_margin="2dp">
    <Button android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:tag="btn1"
            android:text="首頁"
            android:textColor="#FFFFFF"
            android:background="#0066ff" />
    <View android:layout_height="match_parent"
          android:layout_width="1dp"
          android:background="#FFFFFF" />
    <Button android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:tag="btn2"
            android:text="配置"
            android:textColor="#FFFFFF"
            android:background="#0066ff" />
    <View android:layout_height="match_parent"
          android:layout_width="1dp"
          android:background="#FFFFFF" />
    <Button android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:tag="btn3"
            android:text="日志"
            android:textColor="#FFFFFF"
            android:background="#0066ff" />
    <View android:layout_height="match_parent"
          android:layout_width="1dp"
          android:background="#FFFFFF" />
    <Button android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:tag="btn4"
            android:text="關于"
            android:textColor="#FFFFFF"
            android:background="#0066ff" />
</LinearLayout>

homelayout.xml

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright(c) 2021,
  ~    專案名稱:619
  ~    檔案名稱:homelayout.xml
  ~    創建時間:2021/4/17 下午6:12
  ~    作者:laogui
  -->

<ScrollView xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xsi:noNamespaceSchemaLocation="layout.xsd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="20dp"
            android:tag="sv1"
            android:background="#FFFFFF">
    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="match_parent"
                  android:orientation="vertical">
        <!-- 添加布局控制元件 在這里-->
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="第一個界面" />
        <!-- 腳本啟動運行按鈕  可自行修改樣式 -->
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:tag="startjob"
                  android:gravity="center"
                  android:text="運  行"
                  android:textSize="26sp"
                  android:textColor="#FFFFFF"
                  android:background="#0066ff" />
        <!-- 腳本停止運行按鈕  可自行修改樣式-->
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:tag="stopjob"
                  android:gravity="center"
                  android:text="停  止"
                  android:textSize="26sp"
                  android:textColor="#FFFFFF"
                  android:background="#0066ff"
                  android:visibility="gone" />
    </LinearLayout>
</ScrollView>

configlayout.xml

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright(c) 2021,
  ~    專案名稱:619
  ~    檔案名稱:configlayout.xml
  ~    創建時間:2021/4/17 下午6:12
  ~    作者:laogui
  -->

<ScrollView xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xsi:noNamespaceSchemaLocation="layout.xsd"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="20dp"
            android:background="#FFFFFF"
            android:tag="sv2"
            android:visibility="gone">


    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="match_parent"
                  android:orientation="vertical">
        <!-- 添加布局控制元件 在這里 -->
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="第二個界面" />
    </LinearLayout>
</ScrollView>

logbooklayout.xml

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright(c) 2021,
  ~    專案名稱:619
  ~    檔案名稱:logbooklayout.xml
  ~     創建時間:2021/4/17 下午6:12
  ~    作者:laogui
  -->

<ScrollView xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xsi:noNamespaceSchemaLocation="layout.xsd"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="20dp"
            android:background="#FFFFFF"
            android:tag="sv3"
            android:visibility="gone">
    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="match_parent"
                  android:orientation="vertical">
        <!-- 添加布局控制元件 在這里 -->
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="第三個界面" />
    </LinearLayout>

</ScrollView>

aboutlayout.xml


<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright(c) 2021,
  ~    專案名稱:619
  ~    檔案名稱:aboutlayout.xml
  ~    創建時間:2021/4/18 下午9:04
  ~    作者:laogui
  -->

<ScrollView xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xsi:noNamespaceSchemaLocation="layout.xsd"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="20dp"
            android:background="#FFFFFF"
            android:tag="sv4"
            android:visibility="gone">

    <LinearLayout android:layout_height="wrap_content"
                  android:layout_width="match_parent"
                  android:orientation="vertical">
        <!-- 添加布局控制元件 在這里 -->
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="第四個界面" />
    </LinearLayout>
</ScrollView>

ui.js 代碼

文中圖片資源可以自行制作成你想要的圖片即可，

/*
 * Copyright(c) 2021,
 *    專案名稱:底部標簽欄
 *    檔案名稱:ui.js
 *    創建時間:2021/4/17 下午6:12
 *    作者:laogui
 */

function main() {
    ui.layout("引數設定", "main.xml");
    ui.resetUIVar();
    // 獲取res 目錄下的 png圖 轉為Android 資源
    let bgRemote = ui.resResAsDrawable("ic_remote_debug.png");
    let bgSettings = ui.resResAsDrawable("ic_more.png");
    //  設定背景圖
    ui.remotedebug.setBackgroundDrawable(bgRemote);
    ui.settings.setBackgroundDrawable(bgSettings);
    //----------------------   固定內容 請勿隨意修改  -------------------------------
    /**
     * 說明 ：
     * 原創作者 ：Mr、老鬼 ，QQ：1156346325
     * 本框架基于Android viwe的Visibility 屬性 引數為 View.VISIBLE(顯示控制元件或布局) View.GONE(隱藏控制元件或布局)
     * 使用最簡單的辦法解決標簽不在底部的問題
     * 加入頂部標題欄 可自定義標題
     * 新建專案一定是單標簽專案
     */
    //----------------------------頁面切換按鈕  ------------------
    importPackage(android.view);//匯入 view 包
    importPackage(android.widget); // 匯入 widget 包

    //  第一個功能界面
    ui.setEvent(ui.btn1, "click", function (view) {
        setvis(0)
    });
    //  第二個功能界面
    ui.setEvent(ui.btn2, "click", function (view) {
        setvis(1)
    });
    //  第三個功能界面
    ui.setEvent(ui.btn3, "click", function (view) {
        setvis(2)
    });
    //  第四個功能界面
    ui.setEvent(ui.btn4, "click", function (view) {
        setvis(3)
    })
    //-------------------------------------------------------

    //------------------------ EC 系統設定按鈕------------------
    ui.setEvent(ui.settings, "click", function (view) {
        openECSystemSetting();
    })
    //-------------------------------------------------------

    //------------------------ EC 腳本運行 按鈕  ------------------
    ui.setEvent(ui.startjob, "click", function (view) {

        ui.run(1000, function (view) {
            let stopView = ui.stopjob;
            stopView.setVisibility(View.VISIBLE);
            let statView = ui.startjob;
            statView.setVisibility(View.GONE);
        })
        sleep(1000);
        ui.start();
    })
    //-------------------------------------------------------

    //------------------------ EC 腳本停止 按鈕  ------------------
    ui.setEvent(ui.stopjob, "click", function (view) {
        ui.run(1000, function (view) {
            let stopView = ui.stopjob;
            stopView.setVisibility(View.GONE);
            let statView = ui.startjob;
            statView.setVisibility(View.VISIBLE);
        })
        sleep(1000);
        ui.stopTask();

    })
    //----------------- EC DeBUg 遠程除錯按鈕    ----------------
    ui.setEvent(ui.remotedebug, "click", function (view) {
        //  遠程除錯 界面com.android.ui.RemoteDebugActivity
        ui.toast("dianle ");
        //遠程除錯activity 類名 "com.android.ui.RemoteDebugActivity");

        try {
            let androidId = device.getSdkInt();
            logd(androidId);
            if (androidId < 29) {
                importClass(android.content.Intent);
                importClass(android.net.Uri)
                importClass(android.app.PendingIntent)
                var intent = new Intent();
                intent.setClassName(context, "com.android.ui.RemoteDebugActivity");

                context.startActivity(intent);
            } else {
                ui.logd("當前Android版本不小于10，請手動點擊遠程除錯")
                swipeToPoint(0, device.getScreenHeight() / 3, device.getScreenWidth() / 2, device.getScreenHeight() / 3, 1000);
                toast("當前Android版本不小于10，請手動點擊遠程除錯");
            }
        } catch (e) {
            loge(e)
        }
    });
    //-----------------------------------  固定內容結束 ------------------------------
    // ----------------  這里開始添加 UI 內容  --------------------


}

/**
 * 選擇打開頁面控制函式 默認底部四個標簽 請勿隨意修改 
 * @param svtag 底部標簽標記
 */
function setvis(svtag) {
    let sv = ui.sv1;
    switch (svtag) {
        case 0:
            sv.setVisibility(View.VISIBLE);
            sv = ui.sv2;
            sv.setVisibility(View.GONE);
            sv = ui.sv3;
            sv.setVisibility(View.GONE);
            sv = ui.sv4;
            sv.setVisibility(View.GONE);
            break;
        case 1:
            sv.setVisibility(View.GONE);
            sv = ui.sv2;
            sv.setVisibility(View.VISIBLE);
            sv = ui.sv3;
            sv.setVisibility(View.GONE);
            sv = ui.sv4;
            sv.setVisibility(View.GONE);
            break;
        case 2:
            sv.setVisibility(View.GONE);
            sv = ui.sv2;
            sv.setVisibility(View.GONE);
            sv = ui.sv3;
            sv.setVisibility(View.VISIBLE);
            sv = ui.sv4;
            sv.setVisibility(View.GONE);
            break;
        case 3:
            sv.setVisibility(View.GONE);
            sv = ui.sv2;
            sv.setVisibility(View.GONE);
            sv = ui.sv3;
            sv.setVisibility(View.GONE);
            sv = ui.sv4;
            sv.setVisibility(View.VISIBLE);
            break;

    }

}

main();

main.js 代碼

/*
 * Copyright(c) 2021,
 *    專案名稱:619
 *    檔案名稱:main.js
 *    創建時間:2021/4/17 下午6:12
 *    作者:laogui
 */

function main() {
    //開始再這里撰寫代碼了！！
    toast("Hello World");
    //如果自動化服務正常
    if (!autoServiceStart(3)) {
        logd("自動化服務啟動失敗，無法執行腳本")
        exit();
        return;
    }
    logd("開始執行腳本...")
    home();
    while(true){
        logd("我是回圈執行的任務，需要停止請點停止按鈕！");
        sleep(5*1000);
    }
}

function autoServiceStart(time) {
    for (var i = 0; i < time; i++) {
        if (isServiceOk()) {
            return true;
        }
        var started = startEnv();
        logd("第" + (i + 1) + "次啟動服務結果: " + started);
        if (isServiceOk()) {
            return true;
        }
    }
    return isServiceOk();
}

main();

到此結束，這是個初級版的代碼框架，不完美，效果丑了點，后期會繼續完善，

總結

Android原生view 動態調整布局，xml撰寫布局線性布局做外層，線性布局做頂部標題欄和底部標簽欄，多個scrollview做切換的界面，

新增 include標簽

<include android:layout="@layout/titlebar" />

說明：參考 titlebar.xml布局檔案沒有其他特異功能就是參考另外的xml布局

我是Mr-老鬼、QQ1156346325 ，交流QQ群：620028786,647082990
------------------------------------------------著作權宣告------------------------------------------------------
本文著作權所有~Mr-老鬼 ~轉載請注明原文地址

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/278106.html

標籤：其他

上一篇：Android O添加Settings設定項的方法

下一篇：Android MediaPlayer整體架構原始碼分析 -【MediaCodec編解碼器插件模塊化注冊和創建處理流程】【Part 1】