安卓開發學習筆記01_佈局

特別聲明

該筆記是筆者通過學習 天哥在奔跑安卓教學視頻 時所編寫的

佈局管理器

學習佈局，建議先查閱 (盒子模型) 這樣能更好地理解與掌控該知識點,以下例子均可直接複製到 activity_main.xml 下，可以直觀看到效果

線性佈局(LinearLayout)

• 常用屬性

1. android:id
   給該控件設置一個唯一標識
2. android:layout_width
3. android:layout_height
4. android:background
5. android:layout_margin
   外部元素的邊距
6. android:layout_padding
   內部元素的邊距
7. android:orientation
   設置佈局方向

例子

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
   	<!-- android:orientation 設置了垂直方向上的佈局 -->
    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginBottom="20dp"
        android:background="#000"
        android:padding="20dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF0033" />
		<!-- match_parent 匹配父元素，表示繼承父元素該屬性 -->
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="15dp"
        android:background="#0066FF"
        android:gravity="left"
        android:orientation="horizontal">
        <!--gravity 用於給子元素佈局-->
        <!--android:layout_weight="1" 權重，跟flex = 1 一樣-->
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#000" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF0033" />

    </LinearLayout>

</LinearLayout>

效果圖

相對佈局(RelativeLayout)

可以認爲是 跟 選定組件(id) 的一個方向對齊

• 常用屬性

1. android:layout_toLeftOf
   在誰的左邊
2. android:layout_toRightOf
   在誰的右邊
3. android:layout_alignBottom
   跟誰底部對齊
4. android:layout_alignParentBottom
   跟父組件底部對齊
5. android:layout_below
   在誰的下面

例子

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000">
        <!--        android:layout_alignParentBottom="true"-->
        <!--        android:layout_alignParentRight="true">-->

    </View>

    <View
        android:id="@+id/view_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_toRightOf="@+id/view_1"
        android:background="#FF0033"
        android:layout_below="@id/view_1"
        >
    </View>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/view_2"
        android:orientation="horizontal"
        android:background="#0066FF"
        android:padding="15dp">
            <View
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#FF0033"></View>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#000"
                android:padding="15dp">
                    <View
                        android:id="@+id/view_3"
                        android:layout_width="100dp"
                        android:layout_height="match_parent"
                        android:background="#FF9900"></View>
                <View
                    android:id="@+id/view_4"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:background="#FF9900"
                    android:layout_toRightOf="@id/view_3"
                    android:layout_marginLeft="10dp"
                    ></View>

            </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

效果圖