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