Android Relative Layout 安卓相對布局詳解

來源:互聯網
上載者:User

標籤:導圖   lol   img   效果   ati   https   tps   水平   ack   

思維導圖可在幕布找到

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_alignParentLeftlayout_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 安卓相對布局詳解

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.