Android Studio UI 編寫實作

利用近期任務設計稿做練習，挑選玩運彩討論區的註冊頁，把整個介面樣式排版完成，本篇並無使用程式邏輯，僅大致了解頁面框架佈局、常用編碼設定，紀錄編寫時遭遇的問題與解法，參考 gitbook 內的教學與其他線上教學開始進行…

【開發基礎應用】

Android Studio 工作介面與輔助功能，對開發者可說非常友善，編碼關鍵字、自動安裝/導入、點擊名稱直接開啟相關文件等。

編寫錯誤與編寫建議的提醒功能，可自動帶入/修改編碼，順利執行模擬畫面瀏覽。
新手接觸 APP 編寫，起初對框架應用並不熟悉，可經由 Design 視窗內圖形化預覽進行調整，物件層級、約束關係也能使用滑鼠拖曳變更。
承上，例如直接於 Palette 拖曳 ScrollView 至預覽視窗，必要標籤與編碼則自動產生(如下)，可了解 View 的使用規則。

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"/>
</ScrollView>

【編寫實作】

1. 基礎框架

類似網頁切版，先規劃框架排版方式，建立新頁面所產生的 <constraintlayout> 可視為 body，註冊頁上下區塊分別再使用 <constraintlayout>、<ScrollView> 作父容器，來設置其他標籤 <Layout>、<View>，大致如下。

<!-- body -->
<androidx.constraintlayout.widget.ConstraintLayout>

    <!-- 其他登入區塊 -->
    <androidx.constraintlayout.widget.ConstraintLayout>

        <!-- 文字 -->
        <TextView/>

        <!-- 登入按鈕 -->
        <LinearLayout/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- 輸入欄位區塊 -->
    <ScrollView>
        <LinearLayout>

            <!-- 暱稱 -->
            <LinearLayout/>

            <!-- 帳號 -->
            <LinearLayout/>

            <!--密碼-->
            <LinearLayout/>

            <!-- 確認密碼 -->
            <LinearLayout/>

            <!-- 註冊按鈕 -->
            <Button/>

            <!-- 同意會員條款 -->
            <LinearLayout/>

        </LinearLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

標籤頭尾識別與 HTML 稍有不同，若無包覆子元素，則不需要完整的結尾，無子元素如 <TextView/>；包含子元素則 <TextView>…</TextView>。
參考網路教學，每個 <Layout> 等同於 ViewGroup，依該區塊類型決定適合的 <Layout>，<View> 則無法包覆 <Layout>。
自適應排版方式，可透過約束條件設定(如下圖)，缺點是無法編寫至模板共用。

承上，編寫視窗屬性列顯示橘底提示，系統建議將文字內容移置 strings.xml 文件內，便於執行多語系時管理；同理，字級屬性也會出現提示，則建議單位為” sp “，隨裝置螢幕縮放比例，但需評估頁面需求再決定是否採納。

2. Layout、View 排版

編寫概念類似 HTML＋CSS 樣式屬性，同可給予標籤“ id ”，通常使用元件類型+功能來命名，新增與讀取編寫方式如下。

<!-- 新增 -->
android:id="@+id/scroll_enter"

<!-- 讀取 -->
app:layout_constraintTop_toBottomOf="@id/scroll_enter"

其他登入按鈕區使用一個 <LinearLayout> 包覆兩個 <Button>，<LinearLayout> 可設置寬度滿版、<Button> 元件置中，如此一來，若只出現一個按鈕，也可置中顯示於畫面內。

<!-- 登入按鈕 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    app:layout_constraintTop_toBottomOf="@id/text_signin">

    <Button
        .../>

    <Button
        .../>

</LinearLayout>

按鈕圓角、陰影、底線等樣式，編寫比較麻煩，並非單純給予各別屬性，需另開外部文件 .xml 編寫效果，再針對按鈕來套用樣式，如果一個 APP 的按鈕樣式越多，專案內的 .xml 按鈕樣式文件也越多，所有文件統一於 drawable 資料夾內管理，參考網路教學。

輸入欄位也使用 <LinearLayout> ，包覆<EditText>、<TextView>。

<!-- 暱稱 -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:layout_marginTop="16dp">

    <EditText
        .../>

    <TextView
        .../>

</LinearLayout>

3. 屬性模組化

系統建議將部分內容編寫至特定文件管理，新專案建立後會自動產生，其他屬性樣式也可另開外部文件編寫。

FB登入按鈕讀取方式如下：

【 APK】

使用APK安裝方式，順利在裝置上預覽編寫結果，頁面框架排版分為上下兩區，當鍵盤彈出時，系統僅會移動下方 ScrollView 區的輸入框，上方其他登入按鈕的內容區，需使用程式判斷縮減高度，才能完成目前已上線的註冊頁效果，匯出方式如下。

工作視窗 Gradle 分頁內，選擇 assembleDebug 執行 Run 即可產生 .apk 檔案，路徑為 app/Tasks/other/assembleDebug。
.apk 檔案位於 app/build/outputs/apk/debug/…，可直接開啟專案資料夾取用。
此方式匯出的 .apk 檔為 debug 版本，僅供裝置預覽測試效果，無法上架。

【 開發基礎應用】

【 編寫實作】

【 APK】

One thought to “Android Studio UI 編寫實作”

【開發基礎應用】

【編寫實作】