Android相對布局(RelativeLayout)


Android相對布局(RelativeLayout)

 

備注:這里的視圖和元素是等同的概念。

 

RelativeLayout是一個允許子視圖相對於其他兄弟視圖或是父視圖顯示的視圖組(通過ID指定)。每個視圖的位置能夠指定它相對於兄弟(比如在其他視圖的左邊或是下邊)或是父視圖(這里是指相對布局容器,比如底部對齊、中間偏左)的位置。


圖1

RelativeLayou是一個用於設計用戶界面的強大工具,因為它能消除嵌套視圖組和保持我們布局為扁平結構,這可以提高運行時性能。如果我們采用了多個嵌套的LinearLayout組,我們應該采用一個單獨的RelativeLayout來替代。

 

1.      配置視圖(positioning views)

我們能夠通過右邊界對其兩個元素,或是使一個元素位於兩一個下面,居中在顯示屏上、左居中、等等。默認情況下,所有的子視圖在布局的左上角顯示,所以我們必須使用RelavieLayout.LayoutParams中多種多樣的布局屬性來定義每個視圖的位置。

 

每個布局屬性值既可以是一個確定相對於父容器RelativeLayout布局位置的boolean類型,也可以是某個子視圖的ID,即此視圖相對於其他視圖的位置。

 

在我們的XML布局文件中,可以以任何順序來聲明布局中相對於其他視圖的關系。比如,我們可以聲明view1在view2的下面,盡管view2在布局層次的最后申明。

 

2.      相對布局常用的屬性

分為幾類:

(1)    布局容器中通用的,不管是相對布局、線性布局等布局容器。

Android:gravity設置該布局容器內個子組件的對齊方式,比如button組件中內容在button中的對齊方式,比如:

<Button

       android:id="@+id/button1"

       android:layout_width="120dp"

       android:layout_height="wrap_content"

       android:text="確認"

/>

 

如果沒有社會自gravity屬性值,button的內容默認是在button組件居中顯示的,而且可以看到button是位於左上角的,如下圖:


圖2

我們增加android:gravity="left",讓“確認”在button的左邊顯示,如下圖:


圖3

Android:ignoreGravity設置哪個組件不受gravity屬性的影響。

 

(2)    屬性值為具體像素值的屬性,如30dip,40px

android:layout_marginBottom 離某元素底邊緣的距離

android:layout_marginLeft 離某元素左邊緣的距離

android:layout_marginRight 離某元素右邊緣的距離

android:layout_marginTop 離某元素上邊緣的距離

 

下面兩種屬性是由RelavieLayout.LayoutParams定義。

(3)    屬性值為true或是false的屬性

android:layout_alignParentBottom控制該組件是否和布局管理器底端對齊。

android:layout_alignParentEnd控制該組件是否和布局管理器末端對齊。

android:layout_alignParentLeft 控制該組件是否和布局管理器左邊對齊

android:layout_alignParentRight控制該組件是否和布局管理器右邊對齊

android:layout_alignParentStart控制該組件是否和布局管理器開始對齊

android:layout_alignParentTop控制該組件是否和布局管理器頂部對齊

android:layout_alignWithParentIfMissing 如果對應的兄弟元素找不到的話就以父元素做參照物

先來看下面內容

<Button

       android:id="@+id/button2"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:text="按鍵2"

        />

的布局界面:


圖4

我們增加android:layout_alignParentTop="true",還是和圖4一樣,是因為這里只是讓按鍵2和其父容器頂部對齊,如果要讓按鍵2水平居中且和頂部對齊,需要增加android:layout_centerHorizontal="true",效果圖如下:


圖5

當然了,如果沒有android:layout_alignParentTop="true",也可以達到圖5的效果,因為默認就是頂部對齊的,這里只是說明它們的作用而已。

 

    <Button

       android:id="@+id/button2"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:text="按鍵2"

       android:layout_alignParentTop="true"

       android:layout_centerHorizontal="true"

        />

這里尤其要注意android:layout_alignParentBottom和android:layout_alignParentEnd的差別,前者是指底部對齊,后者指末端對齊,如下圖:


圖6

圖6是指按鍵2的底部和父容器底部對齊。


圖7

圖7表示按鍵2和父容器末端對齊,相關的XML控制代碼如下:

<Button

       android:id="@+id/button2"

       android:layout_width="80dp"

       android:layout_height="60dp"

       android:text="按鍵2"

       android:layout_alignParentEnd="true"

        />

 

android:layout_centerHorizontal 水平居中

android:layout_centerVertical 垂直居中

android:layout_centerInparent 相對於父容器完全居中

 

(4)    屬性值為其他組件ID的屬性

android:layout_above本組件在某組件的上方

android:layout_alignBaseline本組件和某組件的基線對齊。

android:layout_alignBottom 本組件的下邊緣和某組件的的下邊緣對齊

android:layout_alignEnd本組件的末端和某組件末端對齊

android:layout_alignRight 本組件的右邊緣和某組件的的右邊緣對齊

android:layout_alignLeft本組件左邊緣和某組件左邊緣對齊

android:layout_alignStart本組件的開始端和某組件開始端對齊

android:layout_alignTop 本組件的頂部和某組件的的頂部對齊

android:layout_below 本組件在某組件的下方

 

android:layout_toEndOf本組件在某組件末端

android:layout_toLeftOf本組件在某組件的左邊

android:layout_toRightOf本組件在某組件的右邊

android:layout_alignLeft 本組件在某組件開始端

 

這里基線概念很重要,參考http://blog.csdn.net/kehrwang/article/details/9041847

基線解釋:書寫英語單詞時為了規范書寫會設有四條線,從上至下第三條就是基線。基線對齊主要是為了兩個控件中顯示的英文單詞的基線對齊。


四、第四組:中心對齊。值為true/false        


3.      綜合的例子

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">
    <EditText
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder"/>
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times"
/>
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true"
/>
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"

        android:text="@string/done"/>
</RelativeLayout>

效果圖如下:


圖8

 

 

參考鏈接:

 

Android開發者Relative Layout

http://developer.android.com/guide/topics/ui/layout/relative.html

 

 

RelativeLayout相對布局

http://blog.sina.com.cn/s/blog_40797b1001010vwt.html

 

A06_RelativeLayout的屬性設置

http://blog.csdn.net/kehrwang/article/details/9041847

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM