View與ViewGroup(Layout)：線性佈局介紹
講授:洪國龍老師
回首頁   UI總覽   LinearLayout線性佈局介紹   LinearLayout練習: 星座APP畫面設計  

  1. UI總覽

    • Android的UI元件


    • TextView元件

      • 文字標示，用來顯示不能編輯的文字。
      • 重要屬性：
        1. id：在Java使用的識別ID
        2. text：顯示的文字
        3. lines：顯示文字的行數，預設為1行

      • 範例:
        • TextView tvMessage = findViewById(R.id.message);
        tvMessage.setText("Hello world...");

    • 輸入控制項

      • 輸入控制項是應用程式使用者介面中的互動元件。Android 提供了多種控制項讓您在 UI 中使用，例如按鈕、文字欄位、搜尋列、核取方塊、縮放按鈕、切換按鈕等。

    • Button元件

      • 具有文字標示，且可供使用者按下或點擊來執行某項動作的元件。
      • 重要屬性：
        1. id：在Java使用的識別ID
        2. enabled：表示是否啟用，如否，則文字為灰色
        3. onClick：宣告在activity中的事件處理函式
        4. text：顯示的文字

    • EditText元件

      • 可輸入文字的元件，此元件繼承TextView，因此也具TextView的相關屬性。
      • 重要屬性：
        1. id：在Java使用的識別ID
        2. hint：提示文字
        3. textColorHint：提示文字的顏色，預設為淺灰色
        4. inputType：例如：text(任何字元), textMultiLine, textEmailAddress, textPassword…

      • 範例1：讀取字串
        • EditText etName = findViewById(R.id.name);
        String name = etName.getText().toString();

      • 範例2：讀取數值
        • EditText etWeight = findViewById(R.id.weight);
        int weight = Integer.parseInt(etWeight.getText().toString());    整數
        float weight = Float.parseFloat(etWeight.getText().toString());  浮點數

    • EditText練習:攝氏轉華氏



    • Android的版面配置

      • 應用程式每個元件的版面配置是使用 View(可視元件)與 ViewGroup(可視元件群組) 的階層來定義，如下圖所示。
      • 所有的UI元件（包含ViewGroup）都是一種 View，每個ViewGroup都是不可見容器，用以組織子可視元件（subview），而subview可能是輸入控制項或其他的UI元件（View 或 ViewGroup）。

    • UI元件大小及位置設定

      • 在一個圖形使用介面(GUI)的開發程式語言或工具，如何提供一個程式設計者來設定UI元件大小及位置？

      1. 絕對位置定位(C, C++, others)
        • 由設計者來設定每個元件的大小及座標。
        • 例如：指定Button的大小及座標為：70*30 和 (x=50，y=50)。
      2. 佈局管理者(Java, ios, Android)
        • 根據某種規則來決定每個元件的位置（大小）。
        • 例如：將4個Button放在一個2*2的格子內或將一些文字方塊依序水平或垂直地擺在視窗的下方（此時元件的位置或大小，會由佈局管理者來掌控）。
        • 此種方式比較具有彈性，可以適應不同大小及解析度的裝置。

    • Android的佈局管理者（Layout）

      • Android的佈局管理者（Layout）是一種ViewGroup，所以也可擺其他的UI元件（View、ViewGroup及Layout）
      • Android的佈局管理者種類：
        1. LinearLayout(線性佈局)
        2. TableLayout(表格佈局)
        3. GridLayout(格子佈局)
        4. FrameLayout(框架佈局)
        5. RelativeLayout(相對佈局)
        6. ConstraintLayout(約束佈局)：Android studio的預設佈局

    [ 回頂端 ]

  2. LinearLayout線性佈局介紹

    • 使用 LinearLayout 建立畫面佈局

      • LinearLayout：依序排列元件

    • 巢狀Layout

      • layout內部可以放置其它的layout，稱之為巢狀layout
      • 巢狀layout可以讓畫面佈局的設計有更複雜的外觀。

    • 常見的巢狀LinearLayout

      • 一種最常見的巢狀LinearLayout是在垂直的LinearLayout內，放置許多的水平的LinearLayout。

    • LinearLayout的重要屬性

      1. android:orientation (線性方式)
        2.
        • horizontal 水平
        • vertical 垂直
      2. android:layout_width (寬度)，android:layout_heigh (高度)
        3.
        • 每個元件都須具備。
        • fill_parent, match_parent(建議使用) ： 佔滿父元件的（剩餘的）寬度或高度。
        • wrap_content： 元件內容原本的大小。
        • 自己指定元件的大小： 例如 100dp。
        • 0dp： 在約束佈局的match_constraint即為0dp，表示元件大小由佈局管理者決定。
      3. android:layout_weight (權重)
        4.
        • 在LinearLayout中的元件，可以使用layout_weight(權重)，來讓佈局管理者依元件權重的比值決定元件的大小， 此時，這些元件的寬度或高度一般都會設定成0dp。
      4. android:gravity (元件內容的對齊方式)，android:layout_gravity (元件在父佈局的對齊方式)
        5.
        • left, right, top, bottom, center, center_vertical, center_horizontal

    • 尺寸單位

      1. px(Pixels)
        2.
        • 以畫面真實像素為單位
      2. dp/dip(Density-independent Pixels)
        3.
        • 相對於160dpi螢幕(mdpi)中的1個px
        • 在不同的像素密度下，呈現近似的視覺效果。
      3. sp(Scale-independent Pixels)
        4.
        • 不受螢幕大小及解析度改變而影響的尺寸單位，通常用在字體的大小上，它也會使不同裝置的元件(字體)呈現類似的視覺效果。
      • 建議設定佈局時使用dp做為單位，設定字型大小時使用sp作為單位。

      表：px與dp在不同解析度下的換算。

      圖：一個手機的解析度、尺寸及相關資訊範例。

      圖：使用dp，可以在不同的像素密度下，呈現近似的視覺效果。

    • 元件的邊界：margins 與 paddings

    • padding（內邊界；填塞）

      • android:padding
        • 設定此佈局四個邊框與內部元件的距離
      • android:paddingBottom
        • 設定此佈局底部邊框與內部元件的距離 
      • android:paddingLeft
        • 設定此佈局左邊框與內部元件的距離 
      • android:paddingRight
        • 設定此佈局右邊框與內部元件的距離
      • android:paddingTopt
        • 設定此佈局頂部邊框與內部元件的距離

    • margin（外邊界；間距）

      • android:layout_marginBottom
        • 佈局底部與邊界/別的元件的距離
      • android:layout_marginLeft
        • 佈局左邊與邊界/別的元件的距離 
      • android:layout_marginRight
        • 佈局右邊與邊界/別的元件的距離 
      • android:layout_marginTop
        • 佈局頂部與邊界/別的元件的距離

    • Gravity屬性

      • 決定元件的對齊方式
        • left, right, top, bottom, center, center_vertical, center_horizontal
        • 使用 | 來合成不同的對齊方式。
        • 在layout中，使用gravity來統一對齊layout內的各個元件，而在佈局內的每個元件中則可以使用layout_gravity來進行個別的對齊。

    • layout_weight屬性

      • 為元件分配不同的權重值，預設值為1 。
      • 佈局管理者可依元件權重的比值決定元件的大小，此時，這些元件的寬度或高度一般都會設定成0dp。
      • 如果佈局內元件的寬度或高度不為0dp，且都有設權重，則LinearLayout會將剩餘空間依元件權重的比值，再分配給這些元件。
      [ 回頂端 ]
      • LinearLayout練習: 星座APP畫面設計




    [ 回頂端 ]