Android基礎---------Android四大常用基本佈局
Android四大常用基本佈局
理論:Android常用的四大基本佈局分別是:線性佈局 LinearLayout 、相對佈局 RelativeLayout、、絕對佈局 AbsoluteLayout、網格佈局GridLayout。
用得相對較多的是線性佈局和相對佈局
1. 線性佈局—LinearLayout
線性佈局的兩種排列方式:
- 從左到右 android:orientation=”horizontal”
- 從上到下 android:orientation=”vertical”
<?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
android:layout_width="match_parent"
android:layout_height ="250dp"
android:orientation="horizontal">
<TextView
android:layout_width="96dp"
android:layout_height="match_parent"
android:background="#b2dfdb" />
<TextView
android:layout_width="96dp"
android:layout_height ="match_parent"
android:background="#80cbc4" />
<TextView
android:layout_width="96dp"
android:layout_height="match_parent"
android:background="#4db6ac" />
<TextView
android:layout_width="96dp"
android:layout_height="match_parent"
android:background="#26a69a" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="68dp"
android:background="#b2dfdb" />
<TextView
android:layout_width="match_parent"
android:layout_height="68dp"
android:background="#80cbc4" />
<TextView
android:layout_width="match_parent"
android:layout_height="68dp"
android:background="#4db6ac" />
<TextView
android:layout_width="match_parent"
android:layout_height="68dp"
android:background="#26a69a" />
</LinearLayout>
</LinearLayout>
2.相對佈局—RelativeLayout
相對佈局存在大量的屬性
有三種類型的屬性:
屬性值是true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相對於父元素完全居中。
android:layout_alignParentBottom 位於父元素的下邊緣
android:layout_alignParentTop 位於父元素的上邊緣
android:layout_alignParentLeft 位於父元素的左邊緣
android:layout_alignParentRight 位於父元素的右邊緣
屬性值是”@id/*“
android:layout_below 在某元素的下方
android:layout_above 在某元素的上方
andorid:layout_toRightOf 在某元素的右方
android:layout_toLeftOf 在某元素的左方
android:layout_alignBottom 和某元素下方對齊
android:layout_alignTop 和某元素上方對齊
android:layout_alignRight 和某元素右方對齊
android:layout_alignLeft 和某元素左方對齊
屬性值是數值
android:layout_marginLeft 離某元素左邊緣的距離
android:layout_marginRight 離某元素右邊緣的距離
android:layout_marginTop 離某元素上邊緣的距離
android:layout_marginBottom 離某元素下邊緣的距離
注意
如果沒有定義左右,那麼預設在左邊,如果沒有定義上下,預設在上邊。
相同位置,新定義的元素會覆蓋舊的元素。例:1被2覆蓋了。
4只定義了在父元素的下部,左右沒有定義,於是預設就在左邊了。
android:layout_below,在某元素的下部並不意味著就一定是緊隨某元素,只是在下部的預設位置。例如:5是在3的下部,但是是在下部的預設左邊。
6為下邊緣對齊3,7為marginLeft=150dp。
8為多個屬性共同定義的結果。首先是在3的右部,然後是垂直居中,然後marginLeft=100dp得到最後位置
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="@style/btn_relative"
android:text="1" />
<TextView
style="@style/btn_relative"
android:text="2" />
<TextView
android:id="@+id/txt_center"
style="@style/btn_relative"
android:layout_centerInParent="true"
android:text="3" />
<TextView
style="@style/btn_relative"
android:layout_alignParentBottom="true"
android:text="4" />
<TextView
style="@style/btn_relative"
android:layout_below="@id/txt_center"
android:background="#d0d9ff"
android:text="5" />
<TextView
style="@style/btn_relative"
android:layout_alignBottom="@+id/txt_center"
android:text="6" />
<TextView
style="@style/btn_relative"
android:layout_marginLeft="150dp"
android:text="7" />
<TextView
style="@style/btn_relative"
android:layout_centerVertical="true"
android:layout_marginLeft="100dp"
android:layout_toRightOf="@id/txt_center"
android:text="8" />
</RelativeLayout>
3.幀佈局—FrameLayout
幀佈局,這個佈局的特點是從左上角開始,後面的會覆蓋前面的控制元件。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:textColor="#9c27b0"
android:text="第一層"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="80dp"
android:textColor="#e91e63"
android:text="第二層"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="60dp"
android:textColor="#e51c23"
android:text="第三層"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:textColor="#5677fc"
android:text="第四層"/>
</FrameLayout>
四:百分比佈局—PercentRelativeLayout
1.加入依賴包
dependencies {
compile 'com.android.support:percent:25.3.0'
}
2.佈局中使用
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#ff44aacc"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%" />
<View
android:id="@+id/top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="20%"
app:layout_widthPercent="30%" />
<View
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@+id/top_left"
android:background="#ff00ff22"
app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>
<com.juliengenoud.percentsamples.PercentLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff44aacc"
app:layout_heightPercent="10%"
app:layout_widthPercent="60%"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff4400cc"
app:layout_heightPercent="10%"
app:layout_widthPercent="70%"/>
</com.juliengenoud.percentsamples.PercentLinearLayout>