LinearLayout(線性佈局)

阿新 • • 發佈：2021-08-31

一、多Activity 相互跳轉

由於佈局會影響整個Activity，不可能講完一個然後都刪了再講一個，另外之後也需要有多個Activity 互相跳轉，所以在開始LinearLayout 之前先看下如何建立多個Activity 並在之間相互跳轉。

1、建立工程，名稱 “LinearLayout”，如果不會建立參考之前文章；

2、在 “com.example.linearlayout” 上單擊滑鼠右鍵，點選 New -> Activity -> Empty Activity

2、名字寫“wrap_content”

4、在activity_main.xml 中新增如下程式碼

    <LinearLayout
        android:id="@+id/remote_user_video"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true">

        <Button
            android:id="@+id/buttonWrapContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="wrap_content"
            tools:layout_editor_absoluteX="111dp"
            android:onClick="clickButtonWrapContent"
            tools:layout_editor_absoluteY="159dp" />

    </LinearLayout>

5、在MainActivity.java 中新增如下程式碼

    public void clickButtonWrapContent(View view) {
        Intent intent = new Intent(this, wrap_content.class); // 其中 wrap_content.class 是要顯示的 Activity 的類
        startActivity(intent);
    }

6、執行app後，點選 “wrap_content” 按鈕即可看到開啟wrap_contentActivity

7、以上程式碼啟動後的主窗體是 “MainActivity”，那怎麼讓預設窗體改成 “wrap_content” 呢？

在AndroidManifest.xml 中做如下修改， “android.intent.action.MAIN” 就是將這個Activity 定位主窗體

        <activity android:name=".wrap_content">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity">
            <!--intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter-->
        </activity>
    </application>

8、執行app可以看到啟動後先開啟 “wrap_content” 視窗。玩一下就好了，還是改回預設啟動MainActivity

二、weight

權重

1、新增兩個按鈕，一個Weight1_2、Weight1_1

        <Button
            android:id="@+id/buttonWeight1_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Weight1_2"
            tools:layout_editor_absoluteX="111dp"
            android:onClick="clickButtonWeight1_2"
            tools:layout_editor_absoluteY="159dp" />

        <Button
            android:id="@+id/buttonWeight1_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Weight1_1"
            tools:layout_editor_absoluteX="111dp"
            android:onClick="clickButtonWeight1_1"
            tools:layout_editor_absoluteY="159dp" />

2、並新增兩個按鈕點選事件

    public void clickButtonWeight1_2(View view) {
        Intent intent = new Intent(this, Weight1_2Activity.class); // 其中 Weight1_2Activity.class 是要顯示的 Activity 的類
        startActivity(intent);
    }

    public void clickButtonWeight1_1(View view) {
        Intent intent = new Intent(this, Weight1_1Activity.class); // 其中 Weight1_2Activity.class 是要顯示的 Activity 的類
        startActivity(intent);
    }

3、在activity_weight1_2.xml 中新增

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:background="#ADFF2F"
            android:layout_weight="1"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:background="#DA70D6"
            android:layout_weight="2"/>

    </LinearLayout>

4、在activity_weight1_1.xml 中新增

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:background="#ADFF2F"
            android:layout_weight="1"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:background="#DA70D6"
            android:layout_weight="1"/>

    </LinearLayout>

5、執行 app，點選 “Weight1_2”、“Weight1_1”分別顯示如下。

兩個有什麼不同呢？

android:background="#ADFF2F" 綠色背景

android:background="#DA70D6" 淺紫背景

左邊圖是android:layout_weight="1" 和android:layout_weight="2" ：也就是綠色的佔1份，淺紫色佔2份

右邊圖是android:layout_weight="1" 和android:layout_weight="1" ：也就是綠色和淺紫色各佔一半

按比例（wrap_content）

1、設定 wrap_content 則是按比例

2、activity_main.xml 中新增

        <Button
            android:id="@+id/buttonWrapContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="wrap_content"
            tools:layout_editor_absoluteX="111dp"
            android:onClick="clickButtonWrapContent"
            tools:layout_editor_absoluteY="159dp" />

3、MainActivity.java中新增

    public void clickButtonWrapContent(View view) {
        Intent intent = new Intent(this, WrapContentActivity.class); // 其中 Weight1_2Activity.class 是要顯示的 Activity 的類
        startActivity(intent);
    }

4、activity_wrap_content.xml中新增

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="one"
            android:background="#98FB98"
            />
        <TextView
            android:layout_weight="2"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="two"
            android:background="#FFFF00"
            />
        <TextView
            android:layout_weight="3"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="three"
            android:background="#FF00FF"
            />

    </LinearLayout>

5、執行結果如下圖

其中：

android:layout_width="wrap_content" ：按比例分配

android:layout_weight="1" ：中的1、2、3就是第一個佔1/6、第二個佔2/6、第三個佔3/6

計算（fill_parent）

1、新增fill_parent 按鈕和fill_parent窗體

2、activity_main.xml 中新增

        <Button
            android:id="@+id/buttonFillParent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fill_parent"
            tools:layout_editor_absoluteX="111dp"
            android:onClick="clickButtonFillParent"
            tools:layout_editor_absoluteY="159dp" />

3、MainActivity.java中新增　　

    public void clickButtonFillParent(View view) {
        Intent intent = new Intent(this, FillParentActivity.class); // 其中 Weight1_2Activity.class 是要顯示的 Activity 的類
        startActivity(intent);
    }

4、activity_fill_parent.xml中新增　　

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:layout_weight="1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="one"
            android:background="#98FB98"
            />
        <TextView
            android:layout_weight="2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="two"
            android:background="#FFFF00"
            />
        <TextView
            android:layout_weight="3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="three"
            android:background="#FF00FF"
            />

    </LinearLayout>

5、執行結果如下圖　　

為什麼會這樣呢？three沒了，one和two的比例也不是1:2卻是2:1

其實沒那麼簡單的，這裡是計算得出的：

都是fill_parent，但是螢幕只有一個，那麼1 - 3 = - 2 fill_parent
依次比例是1/6、2/6、3/6
fill_parent是先到先得原則，先分給，one計算: 1 - 2 (1/6) = 2/3 fill_parent，接著是two,計算: 1 - 2 (2/6) = 1/3 fill_parent，最後到three,計算 1 - 2 (3/6) = 0 fill_parent
所以最後的結果是:one佔了兩份，two佔了一份，three沒有
以上就是為什麼three沒有出現的原因

6、按照上邊的程式碼android:layout_weight都改成1會是什麼樣子

增加增fill_parent_1 按鈕和fill_parent_1窗體，唯一不同就是把android:layout_weight="1"、android:layout_weight="2"、android:layout_weight="3"改成android:layout_weight="1"、android:layout_weight="1"、android:layout_weight="1"

7、activity_fill_parent_1.xml中新增　　

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="one"
        android:background="#98FB98"
        />
    <TextView
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="two"
        android:background="#FFFF00"
        />
    <TextView
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="three"
        android:background="#FF00FF"
        />

</LinearLayout>

8、執行結果如圖

怎麼計算出來的呢？

都是fill_parent，但是螢幕只有一個，那麼1 - 3 = - 2 fill_parent
依次比例是1/3、1/3、1/3
fill_parent是先到先得原則，先分給，one計算: 1 - 2 (1/3) = 1/3 fill_parent，接著是two,計算: 1 - 2 (1/3）= 1/3 fill_parent，最後到three,計算 1 - 2 (1/3) = 1/3 fill_parent
所以最後的結果是:one、two、thre各佔1/3

9、如何寫出one、two、three是5:3:1的呢

增加增fill_parent_2 按鈕和fill_parent_2窗體，android:layout_weight寫成android:layout_weight="2"、android:layout_weight="3"、android:layout_weight="4"

10、activity_fill_parent_2.xml中新增　

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:layout_weight="2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="one"
            android:background="#98FB98"
            />
        <TextView
            android:layout_weight="3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="two"
            android:background="#FFFF00"
            />
        <TextView
            android:layout_weight="4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="three"
            android:background="#FF00FF"
            />

    </LinearLayout>

11、執行結果如下

怎麼計算出來的呢？

都是fill_parent，但是螢幕只有一個，那麼1 - 3 = - 2 fill_parent
依次比例是2/9、3/9、4/9
fill_parent是先到先得原則，先分給，one計算: 1 - 2 (2/9) = 5/9 fill_parent，接著是two,計算: 1 - 2 (3/9）= 3/9 fill_parent，最後到three,計算 1 - 2 (4/9) = 1/9 fill_parent
所以最後的結果是:one、two、thre各佔5:3:1

12、如果有4列呢

增加 fill_parent_3 按鈕和fill_parent_3窗體

13、activity_fill_parent_3.xml中新增　

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:layout_weight="4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="one"
            android:background="#98FB98"
            />
        <TextView
            android:layout_weight="5"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="two"
            android:background="#FFFF00"
            />
        <TextView
            android:layout_weight="6"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="three"
            android:background="#FF00FF"
            />
        <TextView
            android:layout_weight="7"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="four"
            android:background="#FF5544"
            />

    </LinearLayout>

14、執行後如下圖

怎麼計算出來的呢？

都是fill_parent，但是螢幕只有一個，那麼1 - 4 = - 3 fill_parent
依次比例是4/22、5/22、6/22、7/22
fill_parent是先到先得原則，先分給，one計算: 1 - 3 (4/22) = 10/22 fill_parent，接著是two,計算: 1 - 3(5/22）= 7/22 fill_parent，最後到three,計算 1 - 3 (6/22) = 4/22 fill_parent,計算 1 - 3 (7/22) = 1/22 fill_parent
所以最後的結果是:one、two、thre、four各佔10:7:4:1

三、設定分割線

使用view畫線

1、view畫線如下圖

2、增加line 按鈕和 line 窗體

3、activity_line.xml中新增

    <LinearLayout
        android:id="@+id/remote_user_video"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            tools:layout_editor_absoluteX="111dp"
            tools:layout_editor_absoluteY="159dp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="#000000" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button2"
            tools:layout_editor_absoluteX="111dp"
            tools:layout_editor_absoluteY="159dp" />

    </LinearLayout>

其中下邊的view就是那條線，可以設定android:layout_height 修改線的寬度

      <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="#000000" />

使用LinearLayout的一個divider屬性為LinearLayout設定分割線

1、增加divider 按鈕和divider 窗體

2、在 activity_divider.xml 中新增如下程式碼

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@drawable/line"
        android:orientation="vertical"
        android:showDividers="middle"
        android:dividerPadding="10dp"
        tools:context="com.jay.example.linearlayoutdemo.MainActivity" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕3" />

    </LinearLayout>

3、製作一個圖片，名字是 line.png，並複製到 drawable 中如下圖

4、執行app點選 “divider” 按鈕如下圖

5、其中關鍵程式碼如下圖

android:divider="@drawable/line" ：設定作為分割線的圖片，@drawable/line是圖片的地址
android:orientation="vertical" ：指定佈局內控制元件排列方式，horizontal（水平排列）、vertical（垂直排列）
android:showDividers="middle" ：設定分割線的位置，none(無)、begining(開始)、end(結束)、middle(每兩個元件間)
android:dividerPadding="10dp" ：設定分割線的Padding

五、LinearLayout

1、如果想做如下介面該怎麼寫呢？

2、增加LinearLayout 按鈕和LinearLayout 窗體

3、activity_linear_layout.xml中新增如下程式碼

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        tools:context=".MainActivity" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="請輸入要儲存的電話號碼"/>
        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="right">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="儲存"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="清空"/>
        </LinearLayout>
    </LinearLayout>

4、關鍵程式碼

六、layout_gravity

1、先上程式碼，增加layout_gravity 按鈕和layout_gravity 窗體

2、在activity_layout_gravity 中新增如下程式碼

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="right"
            android:layout_weight="1">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="button2"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="right"
            android:layout_weight="1">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:text="button2"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="right"
            android:layout_weight="1">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="button2"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="right"
            android:layout_weight="1">
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="button2"/>
        </LinearLayout>
    </LinearLayout>

3、執行app，如下圖，為什麼會是這樣呢？

4、當 android:orientation="vertical" （垂直對齊）時，只有水平方向的設定才起作用，垂直方向的設定不起作用。即：left，right，center_horizontal 是生效的

5、當 android:orientation="horizontal" （水平對齊）時，只有垂直方向的設定才起作用，水平方向的設定不起作用。即：top，bottom，center_vertical 是生效的。

七、原始碼

https://files-cdn.cnblogs.com/files/rslai/LinearLayout2.zip

LinearLayout(線性佈局)

一、多Activity 相互跳轉

二、weight

權重

計算（fill_parent）

三、設定分割線

使用view畫線

使用LinearLayout的一個divider屬性為LinearLayout設定分割線

五、LinearLayout

六、layout_gravity

七、原始碼

android studio中LinearLayout線性佈局

LinearLayout(線性佈局)

Android入門教程 | UI佈局之LinearLayout 線性佈局

Android UI控制元件系列：LinearLayout(線性佈局)

Android 線性佈局 LinearLayout

5 線性佈局 & 自由位置佈局

Android線性佈局和常用屬性

線性佈局

Android 線性佈局和相對佈局

佈局(LinearLayout,RelativeLayout,FrameLayout,TableLayout,GridLayout,ConstraintLayout)

十、LinearLayout 佈局

iOS彙編教程（五）Objc Block 的記憶體佈局和彙編表示

iOS 記憶體佈局&記憶體管理方案

HDFS單點故障和線性擴充套件問題

Flutter開發實戰初級（2）頁面佈局詳解

資料結構與演演算法3 -- 線性表練習題

理解下 Swift 名稱空間和 DSL 設計，例子是檢視佈局

UICollectionViewLayout佈局詳解

JVM 記憶體佈局與GC演演算法

Java物件記憶體佈局之謎

LinearLayout(線性佈局)

一、多Activity 相互跳轉

二、weight

權重

計算（fill_parent）

三、設定分割線

使用view畫線

使用LinearLayout的一個divider屬性為LinearLayout設定分割線

五、LinearLayout

六、layout_gravity

七、原始碼

相關推薦