在 android 的學習過程中，刻畫面佔有一個非常重要的地位，熟悉著各個元件及其常用的屬性，並且靈活使用它們，可以說是每一個人的基礎。

在筆者這次的暑假作業中，有著許多的畫面要刻。因此，如何快速的判斷怎麼交互使用 layout 達到要求就成為了我的首要課題之一。

在這篇中不會講各大 layout 的屬性及用法，而是來分享我在反覆的測試和使用以後，找出了一個最適合我的方法，在此予以紀錄 。

如果不算 tab layout、drawer layout 那種的話，正常的情形下，我最常使用的佈局只有兩種

• constrain layout
• linear layout

會什麼是這兩個呢？

Layout 的選擇

我認為 constrain layout 比 relative layout 還要更加的直覺好用，用打得很快就可以選擇出想要的位置。
app:layout_constrain自己的上下左右_to鍊到目標的上下左右Of="目標的ID"

• 上：Top
• 下：Bottom
• 左：Start
• 右：End

例如：有一個 button 要在 text view 底下

<Button
    app:layout_constraintTop_toBottomOf="@id/textView"/>

或是app:layout_constrainTop_toTopOf="parent"之類的表示鍊到父 layout

當左右或上下有同時鍊的時候，還可以再用比例調整位置

<Button
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintVertical_bias="0.2"
    app:layout_constraintHorizontal_bias="0.2"/>

而 linear layout 身為最簡單的佈局，單方向堆疊的排列方式使人方便使用。只要找出同樣方向的原件包起來，再配合其 orientation 和 gravity 的屬性，就可以簡單的完成了

範例 1

這是我在輸入數字時做的虛擬鍵盤

我的 layout 是這樣子 (刪除屬性後)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout >
    <LinearLayout>
    	<LinearLayout/>
    	    <Button/><!-- ÷ -->
    	    <Button/><!-- 1 -->
    	    <Button/><!-- 4 -->
    	    <Button/><!-- 7 -->
            <Button/><!-- . -->
    	</LinearLayout>
    	<LinearLayout>
    	    <Button/><!-- × -->
    	    <Button/><!-- 2 -->
    	    <Button/><!-- 5 -->
    	    <Button/><!-- 8 -->
    	    <Button/><!-- 0 -->
    	</LinearLayout>
    	<LinearLayout>
    	    <Button/><!-- - -->
    	    <Button/><!-- 3 -->
    	    <Button/><!-- 6 -->
    	    <Button/><!-- 9 -->
    	    <Button/><!-- backspace -->
    	</LinearLayout>
    	<LinearLayout>
    	    <Button/><!-- + -->
    	    <Button/><!-- AC -->
    	    <Button/><!-- OK -->
    	</LinearLayout>
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

不難看出，當有元件要在同一行或同一列中時，我就會用 linear layout 包起來，除非他只是個小東西。也就是，約束的部份只要控制負責包它們的 linear layout 就可以了，至於它裡面的東西，透過 orientation 屬性就能輕鬆解決，畢竟一開始就是因為他們在直線才會被包在一起。

範例 2

主畫面的預算方塊

我的 layout 是這樣子 (刪除屬性後)

<androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout>
        <ImageView/><!--左方圖示-->
        <TextView/><!--圖示下方百分比-->
    </LinearLayout>
    
    <LinearLayout>
        <TextView/><!--金錢符號-->
        
        <LinearLayout>
            <TextView/><!--5000-->
            <TextView/><!--剩餘預算-->
        </LinearLayout>
        
        <TextView/><!--槓號-->
        
        <LinearLayout>
            <TextView/><!--10000-->
            <TextView/><!--預算總額-->
        </LinearLayout>
        
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

至於這裡為什麼是 5000 跟剩餘預算包一起，而不是跟 $、/、10000包呢？

是因為這樣當預算的數字比中文字短的時候，佈局才不會跑掉。

最後才以現在這個方案定案

所以還是要依據專案的功能來做判斷，最後才不會吃虧

結語

本文的主要目的除了是向大家推薦我嘗試多次以後得出的結果以外，也希望讓讀者在刻畫面時，能夠擁有自己的一套方法，讓做起事來更加有規則。