iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

Android 初新者系列 第 10

Day10 - LinearLayout線性佈局

目前Android Studio預設的佈局是ConstraintLayout
它的效能比起其他布局還要好,但時常動一個元件,另一個元件的位置就跑掉了,較難上手。
所以我們就從較簡單的布局開始講起

開始

今天要介紹的是LinearLayout

LinearLayout

線性布局。顧名思義,所有的原件都依序以直線排列。
這個布局又可以分為2種

  1. LinearLayout(Vertical):元件依照垂直方向,由上至下直線排列。
  2. LinearLayout(Horizontal):元件依照水平方向,由左至右直線排列。
  • 預設
    (先不特別設定方向,隨便拉幾個元件看看)
    首先要先把xml原本預設的布局刪掉,留下最上面那排
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769VsbnuHR4sO.png
    再來新增LinearLayout
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769BanD6DXTSt.png
    將LinearLayout的寬(width)與高(height)設定好
    寬與高可以設成:
    1."match_parent":與手機板面寬度/高度一樣
    2."wrap_content":依照內容物的大小調整寬高
    3."xxdp":固定xxdp寬高
    我們使用match_parent就可以了
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769gu7swP97q1.png
    再來隨便拉2個以上的元件包在LinearLayout裡面
    我拉3個按鈕當範例
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769MkIaD8OoPx.png
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769d5vwJwDgZv.png
    執行結果:
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769IHmugMptKf.png
    這時發現按鈕是以水平方向排列
    所以如果沒有特別設定方向的話
    系統會預設為LinearLayout(Horizontal)水平排列

  • LinearLayout(Vertical)
    來試看看垂直的會長怎樣八
    在LnearLayout裡新增android:orientation="vertical"
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769T81HE5kvqd.png
    我們回到Design頁面會發現,按鈕變成垂直排列
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769rPgeiTol2p.png
    執行結果:
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769Eic7qm6aVl.png

  • LinearLayout(Horizontal)
    最後一個的結果與預設的其實一樣,因為預設為水平方向排列
    但還是必須時做一下
    把android:orientation="vertical"改成android:orientation="horizontal"就好了
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769zvAk2QsAs6.png
    來看看有沒有改變
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769RjldJB7DGf.png
    執行結果:
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769IHmugMptKf.png
    恩~~果然跟預設一樣

常用程式碼

  • android:gravity
    設定所有子元件的位置,假如設為center
    在LinearLayout底下的元件都靠中間了
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769riJOdAP0PE.png
    https://ithelp.ithome.com.tw/upload/images/20210917/20141769eLkYL8GAnz.png

上一篇
Day9 - TextView(三)
下一篇
Day11 - Button(一)
系列文
Android 初新者30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言