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>。
  • 自適應排版方式,可透過約束條件設定(如下圖),缺點是無法編寫至模板共用。
使用“ app: ”約束條件,設定"登入"文字於畫面內置中、緊貼父層框架上方
  • 承上,編寫視窗屬性列顯示橘底提示,系統建議將文字內容移置 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. 屬性模組化

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

圖左:styles.xml 樣式管理、圖右:strings.xml 文字內容
  • FB登入按鈕讀取方式如下:
<button> 讀取外部樣式文件
外部樣式文件 styles.xml 再讀取圓角樣式文件 radius.xml

【 APK】

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

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

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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *