Android組件---四大布局的屬性詳解

本文轉載自查看原文 2015-03-27 16:34 7431 Android開發

【聲明】

歡迎轉載，但請保留文章原始出處→_→

文章來源：http://www.cnblogs.com/smyhvae/p/4372222.html

Android常見布局有下面幾種：

LinearLayout：線性布局。所有的控件都是串在一條線上的。
RelativeLayout：相對布局。所有的控件的位置，都是相對於父控件的。
FrameLayout：幀布局。FrameLayout布局中的控件都是一層一層的。幀布局每次添加的控件都顯示在最上面，最后顯示在界面上的是最后添加的一個控件。
TableLayout：表格布局。表格布局可以實現的.一般可以使用線性布局實現。
AbsoluteLayout：絕對布局。已經是廢棄的狀態，很少用了。

線性布局 LinearLayout 屬性詳解

orientation：屬性是指定線性布局的排列方向。

horizontal 水平。線性布局默認的朝向是水平的。
vertical 垂直

例如：

android:orientation="vertical"

gravity：指定當前控件里面的內容容顯示位置。（四大layout中均可使用）

left 左邊
right 右邊
top 上邊
bottom 底邊

例如：

android:gravity="center"

gravity中的屬性可以組合使用。例如：

android:gravity="bottom|right"

layout_gravity：指定當前控件在父元素的位置。（只在 LinearLayout 和 FrameLayout 中有效）

left 左邊
right 右邊
top 上邊
bottom 底邊
center
center_horizontal
center_vertical

例如：

android:layout_gravity="center"

另外，需要提示的是，對於 LinearLayout :

當 android:orientation="vertical" 時，只有水平方向的設置才起作用，垂直方向的設置不起作用。即：left，right，center_horizontal 是生效的。（top，bottom，center_vertical 無效）
當 android:orientation="horizontal" 時，只有垂直方向的設置才起作用，水平方向的設置不起作用。即：top，bottom，center_vertical 是生效的。（left，right，center_horizontal 無效）

layout_weightSum：把線性布局中剩余空間分成N份。

layout_weight：用於分配剩余空間的比例。【重要】

例如，在線性布局中，當空間處於horizontal水平放置時，如果設置兩個控件的width屬性和layout_weight屬性時，就可以平分寬度：

android:layout_width="0dp"
android:layout_weight="1"

visibility：是控制布局是否顯示。

visible 顯示
invisible 不顯示但占空間
gone 隱藏

例如：

android:visibility="gone"

RelativeLayout 相對布局屬性詳解

一、常用屬性：

1、第一類：屬性值為true或false

android:layout_centerHrizontal 　　相對於父元素水平居中

android:layout_centerVertical   　　相對於父元素垂直居中

android:layout_centerInparent 相對於父元素完全居中

android:layout_alignParentBottom 　　貼緊父元素的下邊緣（align：對齊）

android:layout_alignParentLeft   　　　　貼緊父元素的左邊緣

android:layout_alignParentRight 　　   貼緊父元素的右邊緣（默認值為false）

android:layout_alignParentTop 　　    貼緊父元素的上邊緣

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

2、第二類：屬性值必須為id的引用名"@id/id-name"

android:layout_below 在某元素的下方

android:layout_above 在某元素的的上方

android:layout_toLeftOf   　　在某元素的左邊

android:layout_toRightOf 　　在某元素的右邊

android:layout_alignTop    　　本元素的上邊緣和某元素的的上邊緣對齊

android:layout_alignLeft   　　本元素的左邊緣和某元素的的左邊緣對齊

android:layout_alignBottom 　本元素的下邊緣和某元素的的下邊緣對齊

android:layout_alignRight 　　本元素的右邊緣和某元素的的右邊緣對齊

3、第三類：屬性值為具體的像素值，如30dp（外邊距和內邊距）

android:layout_margin 　　 外邊距（margin：邊緣）

android:layout_marginTop 上外邊距

android:layout_marginBottom 下外邊距

android:layout_marginLeft 左外邊距

android:layout_marginRight 右外邊距

android:padding 　　　　　　　　 內邊距（padding：填充）

android:paddingTop 　　　　　　上內邊距

android:paddingBottom 　　　　下內邊距

android:paddingLeft 　　　　　　左內邊距

android:paddingRight 　　右內邊距

4、第四類：android4.2新增屬性

android:layout_alignStart 　　兩個控件開始對齊

android:layout_alignEnd 兩個控件結束對齊

android:layout_alignParentStart 子控件和父控件開始對齊

android:layout_alignParentEnd 　　子控件和父控件結束對齊

注：所有控件，默認處在左上角。

二、外邊距和內邊距的解釋：

來看下面這張圖：

例如：當在布局文件中，

將第一個TextView加入如下代碼：（注：margin的意思是“邊緣”）

android:layout_margin="30dp"

將第二個TextView加入如下代碼：（注：padding的意思是“填充”）

android:padding="20dp"

最終效果如下：

三、對齊至控件的基准線：

android:layout_alignBaseline 與某元素的基准線對齊

什么是基准線？

基准線：為了保證印刷字母的整齊而划定的線。

上圖中的第三條線就是基准線。

完整版代碼舉例：

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"  >
 5     <TextView
 6         android:id="@+id/tv1"
 7         android:layout_width="wrap_content"
 8         android:layout_height="wrap_content"
 9         android:background="#FFE4E1"
10         android:textSize="30dp"
11         android:text="shengmingyihao" />
12     
13      <TextView
14         android:id="@+id/tv2"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:background="#D3D3D3"
18         android:layout_toRightOf="@id/firstView"
19  android:layout_alignBaseline="@id/tv1"
20         android:text="smyhvae" />   
21 </RelativeLayout>

上方代碼的第19行就是將tv2對齊至tv1的基准線。

顯示效果如下：

上圖中綠色的虛線即為基准線。

三、其他屬性：

1、EditText控件：

android:hint　　設置EditText為空時輸入框內的提示信息。

2、android:gravity

android:gravity　　該屬性是對該view里面的內容的限定。比如一個button里面的text，你可以設置該text在view的靠左、靠右等位置。

以button為例：

　　android:gravity="right" 　　可以讓button里面的文字靠右

　　android:gravity="top" 　　可以讓編輯框EditText的光標置於左上方

3、android:gravity和android:layout_gravity區別：

gravity 控制當前控件里面的內容顯示區域
線性布局中的layout_gravity 當前控件在父元素的位置

比如弄個最外布局，然后里面包了幾個布局，如果要使這幾個布局都靠底，就可以在最外布局的屬性里設置androi:gravity="botton" 因為gravity是對里面的內容起作用。

TableLayout 表格布局屬性詳解

TableLayout 表格布局：

android:shrinkColumns　　收縮列

android:stretchColumns 拉伸列

android:collapseColumns 隱藏列

android:layout_column　　指定列(作用在列的身上)

android:layout_span 合並列(作用在列的身上)

注：TableRow為一行，這個單元行里的單元格的寬度小於默認的寬度時就不起作用,其默認是fill_parent，高度可以自定義大小。

其實，表格布局可以實現的，線性布局也可以實現。

代碼舉例：

1、線性布局的代碼舉例：（小米計算器界面）

要實現的效果如下：

對應的xml文件的代碼如下：

<?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" >

    <EditText
        android:gravity="right"
        android:hint="0"
        android:textColorHint="#000000"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="C"
            android:textColor="#F07D22" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="DEL" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="÷" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="×" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="7" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="8" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="9" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="－" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4"
            android:textColor="#F07D22" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="5" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="6" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="＋" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="3" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
                <Button
                    android:text="1"
                    android:layout_height="wrap_content"
                    android:layout_width="0dip"
                    android:layout_weight="1"/>
                <Button
                    android:text="2"
                    android:layout_height="wrap_content"
                    android:layout_width="0dip"
                    android:layout_weight="1"/>
                <Button
                    android:text="3"
                    android:layout_height="wrap_content"
                    android:layout_width="0dip"
                    android:layout_weight="1"/>

            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
                <Button
                    android:text="0"
                    android:layout_height="wrap_content"
                    android:layout_width="0dip"
                    android:layout_weight="2"/>
                <Button
                    android:text="."
                    android:layout_height="wrap_content"
                    android:layout_width="0dip"
                    android:layout_weight="1"/>

            </LinearLayout>
        </LinearLayout>

        <Button
            android:gravity="right|bottom"
            android:textColor="#ffffff"
            android:text="="
            android:paddingRight="15dp"
            android:paddingBottom="15dp"
            android:background="#F07D22"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1" >
        </Button>
    </LinearLayout>

</LinearLayout>

再看一遍效果圖：

2、相對布局的代碼舉例：

要實現的效果如下：

完整版代碼實現：

<?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" >
    <Button 
        android:id="@+id/center"
        android:layout_centerInParent="true"
        android:text="中間"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignLeft="@id/center"
        android:layout_above="@id/center"
        android:text="↑"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignLeft="@id/center"
        android:layout_below="@id/center"
        android:text="↓"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignBottom="@id/center"
        android:layout_toLeftOf="@id/center"
        android:text="←"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignBottom="@id/center"
        android:layout_toRightOf="@id/center"
        android:text="右"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:text="左上角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignParentRight="true"
        android:text="右上角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignParentBottom="true"
        android:text="左下角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button 
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="左下角"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</RelativeLayout>

3、TableLayout 表格布局的代碼舉例：（表格布局可以實現的，線性布局也可以實現）

要實現的效果如下：

完整的代碼實現：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent" >

    <ImageView
        android:src="@mipmap/ic_launcher"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:text="QQ號碼"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>
        <EditText
            android:layout_width="0dip"
            android:layout_weight="3"
            android:layout_height="wrap_content"/>
    </TableRow>
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            android:text="QQ號碼"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>
        <EditText
            android:layout_width="0dip"
            android:layout_weight="3"
            android:layout_height="wrap_content"/>
    </TableRow>
</TableLayout>

免責聲明！

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

猜您在找 Android四大組件之Activity詳解 Android——四大組件、六大布局、五大存儲 Android 基礎四五六之：四大組件、五大存儲、六大布局詳解！ Android四大組件之Activity(活動)及其布局的創建與加載布局 Android四大組件--ContentProvider詳解(轉) Android之四大組件、六大布局、五大存儲總結 Android 四大組件之 " Activity " Android四大組件 Android 四大組件之" Service " Android的四大組件