Android Relative Layout 安卓相對布局詳解
阿新 • • 發佈：2018-08-18
沒有 horizon 水平 gravity 邊界線 w3c 水平居中 ntb ole
思維導圖可在幕布找到
1. 基礎
如果在相對布局裏，控件沒有指明相對位置，則默認都是在相對布局的左上角：
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FF00FF" android:padding="20dp" android:text="Item2"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FF0000" android:text="Item1"/>
gravity
gravity屬性用來設置容器內組件的對齊方式
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#FF4081"
android:text="Item1" />效果為
2. 根據兄弟控件定位
2.1 相對兄弟組件的位置
android:layout_above：// 參考的兄弟控件上邊 android:layout_below：// 參考的兄弟控件下邊 android:layout_toLeftOf // 參考的兄弟控件的左邊 android:layout_toRightOf // 參考的兄弟控件右邊
代碼示例
android:layout_below等屬性通過制定控件的id來選擇需要參考的兄弟組件，即@id/firstText：
<TextView android:id="@+id/firstText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FF0000 " android:text="firstText" /> <TextView android:id="@+id/rightText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00FF00" android:layout_toRightOf="@id/firstText" android:text="rightText" /> <TextView android:id="@+id/bottomText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00FF00" android:layout_below="@id/firstText" android:text="bottomText" />
顯示的效果為
2.2 對齊相對組件
對齊兄弟相對組件的有四個屬性，為android:layout_align${方向}
android:layout_alignTop // 對齊參考組件的上邊界
android:layout_alignBottom // 對齊參考組件的下邊界
android:layout_alignLeft // 對齊參考組件的左邊界
android:layout_alignRight // 對齊參考組件的右邊界android:layout_alignTop等屬性同樣是通過制定控件的ID來設置參考的組件的邊界線：
代碼示例1
<TextView
android:id="@+id/item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:padding="20dp"
android:text="Item2"/>
<TextView
android:id="@+id/item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:padding="10dp"
android:layout_below="@id/item1"
android:layout_alignRight="@id/item1"
android:text="Item1"/>效果為
代碼實例2
<TextView
android:id="@+id/item3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:padding="20dp"
android:text="Item3"/>
<TextView
android:id="@+id/item4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:padding="10dp"
android:layout_toRightOf="@+id/item3"
android:layout_alignBottom="@id/item3"
android:text="Item4"/>效果為
3. 根據父控件定位
3.1 與父控件的四個邊緣對齊
與父控件的邊緣對齊的屬性由android:layout_alignParent${方向}組成
android:layout_alignParentTop // 頂部對齊於父控件
android:layout_alignParentBottom // 底部對齊於父控件
android:layout_alignParentLeft // 左對齊於父控件
android:layout_alignParentRight // 右對齊於父控件需要註意的是，這些屬性是通過布爾值來設置是否對齊於父控件的某個方向的：
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:textSize="50dp"
android:background="#FF0000"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>效果為：
除此之外還有layout_alignParentLeft、layout_alignParentTop
3.2 對齊至父控件的中央
對齊至父控件中央的屬性可以用來設置居中的布局位置：
android:layout_centerHorizontal // 水平居中
android:layout_centerVertical // 垂直居中
android:layout_centerInParent // 水平且垂直居中，處於父組件的正中央位置代碼示例
同樣，這些屬性也是通過設置的值也是布爾類型：
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centerHorizontal"
android:textSize="50dp"
android:background="#FF0000"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centerVertical"
android:textSize="50dp"
android:background="#FF0000"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="centerInParent"
android:textSize="15dp"
android:background="#0000FF"
android:layout_centerInParent="true"/>效果為：
4. 其他
對齊至控件的基準線
<TextView
android:id="@+id/firstText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:text="Hello" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/firstText"
android:text="World" />如果沒有使用對齊基準線，那麽當Hello的字體的大於world時，world則無法和hello在同一基準線上：
通過給world的TextView添加layout_alignBaseline屬性來實現對齊firstText控件的基準線：
android:layout_alignBaseline="@+id/firstText"效果為：
5. 實例
用相對布局來完成經典的梅花布局
<!--中央-->
<ImageView
android:id="@+id/img1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:src="@drawable/pic1"/>
<!--右邊-->
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/img1"
android:layout_centerVertical="true"
android:src="@drawable/pic2"/>
<!--左邊-->
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="@+id/img1"
android:layout_centerVertical="true"
android:src="@drawable/pic3"/>
<!--上邊-->
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="@+id/img1"
android:layout_centerHorizontal="true"
android:src="@drawable/pic4"/>
<!--下邊-->
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="@+id/img1"
android:layout_centerHorizontal="true"
android:src="@drawable/pic5"/>效果圖為
參考資料
2.2.2 RelativeLayout(相對布局)
Android Relative Layout 安卓相對布局詳解