1. 程式人生 > 其它 >LinearLayout(線性佈局)

LinearLayout(線性佈局)

一、多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