iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
0
Mobile Development

iOS Developer Learning Android系列 第 7

iOS Developer Learning Android. Lesson 07 - Layout (就是UI排列的規則)

開始佈局

以前我們每個VC都有一個self.view,而Android也有個類似的東西☘️☘️☘️
所有的layout file一開始都會幫你預設一個ViewGroup,ViewGroup有很多種,而現在主要在推的ConstraintLayout就是其中一種。
不過它功能太多了,有點複雜,如果是簡單的畫面,用傳統的佈局方法也是很好用的。
如下簡介:

  1. Linear Layout
    ☘️☘️☘️跟我們的StackView很像,但比較功能上比較單純(StackView我還是不大會用用不習慣)。
  2. Relative Layout
    ☘️☘️☘️基本上概念也是跟AutoLayout 87%像,都是運用相對的概念,但也是比較陽春版。
  3. Absolute Layout
    ☘️☘️☘️這就跟frame一樣,看XY~
  4. Frame Layout
    ⚠️⚠️⚠️要注意喔,這並不是我們的frame(上面已經說過了,人家名花有主了),Frame Layout可以用在View的重疊上,但這點別的Relative Layout也做得到,所以聽說它主要情境是用在Fragment上(尚未研究)。
  5. Table Layout
    ⚠️⚠️⚠️這東西很有意思,就把它想成是我們一般Word或Web上常看到的二維表格~

實作如下:

  1. 先用Linear Layout寫一個Lesson04Activity
    1. 一開始AS都會預設成Constraint Layout,我會切到Text,直接把androidx.constraintlayout.widget.ConstraintLayout改成LinearLayout,比較快。
    2. 跟StackView一樣有分垂直或水平,這是一個vertical的LinearLayout。
    3. Android元件的長寬都可以不給定數值,直接設定為match_parent或wrap_content,就是跟SuperView一樣(上面四顆按鈕)或根據內容決定(最後一顆按鈕)
    4. 像最後一顆按鈕,如果是寬度是wrap_content,就可以用layout_gravity屬性決定置左/中/右(gravity屬性則是決定textView的垂直對齊,不要搞混了~)。
    5. ViewGroup裡面可以再包ViewGroup,像黃綠紅就是一個horizontal的LinearLayout。
    6. layout_weight屬性可以決定元件間的比重,像黃綠紅三個textView我設比重都是1,這時就會無視layout_width的設定。
    7. 也可以寫java加入元件(用Code寫跟iOS一樣很囉唆=_=)
        LinearLayout linearLayout = findViewById(R.id.linear_layout);
        Button button = new Button(this);
        button.setText("new button by code");
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
        button.setLayoutParams(layoutParams);
        linearLayout.addView(button);
  1. Relative Layout的樣子
    1. 概念跟以前一樣,跟上層View或同層View的上下左右距離。
<Button
        android:id="@+id/relative_layout_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
    
    //按鈕二在按鈕一的右邊
    <Button
        android:id="@+id/relative_layout_button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_toRightOf="@id/relative_layout_button"/>

    //按鈕三在按鈕二的下面,也在按鈕一的右邊
    //對齊父層下方
    <Button
        android:id="@+id/relative_layout_button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_below="@id/relative_layout_button2"
        android:layout_toRightOf="@id/relative_layout_button"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"/>

    //按鈕四在按鈕三的右邊,也在按鈕二的下面
    //對齊父層右方
    <Button
        android:id="@+id/relative_layout_button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_toRightOf="@id/relative_layout_button3"
        android:layout_below="@id/relative_layout_button2"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"/>
  1. Absolute Layout是個失敗作品
    1. 其實是兩個Btn,不知道為什麼設了XY還是不會跑,算了反正官方都說不要用了,就先不研究。
  2. Frame Layout重疊了~
  3. Table Layout的Demo比較複雜
    1. Table Layout裡面必須用TableRow這東西去包,就想成是直的Linear包橫的Linear
    2. Table Layout有以下屬性
      1. android:shrinkColumns那一欄是否會自動換行,不加的話字太多可能會擠到別欄無法出現(如R2C1)
      2. android:collapseColumns可以把整欄都隱藏(如C2整欄不見)
      3. android:stretchColumns決定剛剛隱藏的空間給哪一欄
    3. 另外還有以下特性
      1. 同一欄會等寬
      2. R1C3是因為有設定屬性layout_span=2,代表佔了兩格
      3. 只有第三列是四欄,但這個表格就是3*4了

參考資料

Android 三大布局的通用属性和各自的特有属性
UI實作範例(1):RelativeLayout, LinearLayout

今天的範例程式

可以去 https://github.com/mark33699/IDLA 看一下順便給顆⭐️


如果你喜歡我的影片別忘了按讚分享加訂閱,開啟紅色的小鈴鐺,我們明天見~


上一篇
iOS Developer Learning Android. Lesson 06 - 如何製作畫面 (羨慕SwiftUI的Preview嗎?)
下一篇
iOS Developer Learning Android. Lesson 08 - ConstraintLayout (運用AutoLayout的思維安排Android畫面)
系列文
iOS Developer Learning Android30

尚未有邦友留言

立即登入留言