iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 4

Android Studio菜鳥筆記 - Day4 - LinearLayout線性佈局

  • 分享至 

  • xImage
  •  

LinearLayout不同型態

LinearLayout在Android佈局中是個方便的存在,熟悉這layout我認為再怎難的UI介面都設計得出來(吧?)
線性可分為水平(horizontal)及垂直(vertical)
可以用"android:orientation"這個屬性來選擇LinearLayout要是水平還是垂直

//水平
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
</LinearLayout>
//垂直
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</LinearLayout>

layout_weight

layout_weight為空間分配的比例,可以用來分配LinearLayout某區塊內元件所分配的空間,舉例來說,有一個LinearLayout區塊內有3個button元件,若將三個元件的layout_weight都設定成1,那它們的空間比例就會是1:1:1。

layout_margin

layout_margin可以用來調整元件之間的距離,使介面觀感提提升,也可以只單方向與元件的距離

layout_marginTop 元件與上方的間距
layout_marginBottom 元件與下方間距
layout_marginLeft 元件與左方間距
layout_marginRight 元件與右方間距

實作範例

LinearLayout中也可以再塞一個LinearLayout,其顯示方式則會因為塞在水平或垂直中有所不同,依據這種方式來設計與排版,打造出理想的UI介面,以下為簡單範例:

程式碼:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Button1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="0"
            android:text="Button" />

        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="0"
            android:text="Button" />
    </LinearLayout>

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

上一篇
Android Studio菜鳥筆記 - Day3 - ConstraintLayout
下一篇
Android Studio菜鳥筆記 - Day5 - 手機模擬器
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言