Android中五中佈局文件的使用和介紹

Android的佈局風格   佈局應該從外往裏寫

1.LinearLayout(線性佈局)

<?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中的組件默認是左對齊的

    LinearLayout默認的排列方式是垂直排列

     線性佈局中組件不會重疊。vertical（垂直的排列），

     如果是水平的，當組件過多，不會自動換行，太多組件會顯示不出來全部的組件。

    LinearLayout中的組件默認對齊方式都是左對齊方式。

    LinearLayout在垂直佈局下 左對齊，右對齊，水平居中生效

    LinearLayout在水平佈局下  頂部對齊，底部對齊 垂直居中生效

    

    android:layout_gravity設置組件本身的對齊方式

    android:gravity設置組件中的內容的對齊方式

android:layout_weight 用來平局劃分屏幕的剩餘寬度，

每個組件佔用自己在layout_weight中設定的份數

    -->

    <TextView 

        android:layout_weight="1"

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:text="第一個"

        android:layout_gravity="center"

        android:textSize="18sp"

    />

      <TextView 

        android:layout_weight="1"

        android:layout_width="50dp"

        android:layout_height="wrap_content"

        android:text="第二個"

        android:textSize="18sp"

    />

        <TextView 

        android:layout_weight="1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="第三個"

        android:textSize="18sp"

    />

</LinearLayout>

權重的劃分分析

 

 案例

 

<?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="0dp"

        android:layout_weight="1"

        android:orientation="horizontal">

        <TextView

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#ff0000"

            android:text="text1"

        />

         <TextView

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#ffffff"

            android:text="text2"

        />

          <TextView

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#000000"

            android:text="text3"

        />

           <TextView

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="@android:color/holo_blue_bright"

            android:text="text4"

        />

        </LinearLayout>

       <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:orientation="vertical"

        >

           <TextView

               android:layout_width="match_parent"

               android:layout_height="0dp"

               android:layout_weight="1"

              android:background="@android:color/holo_orange_dark"

               android:text="text1" />

         <TextView

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:background="#000000"

            android:text="text2"

        />

          <TextView

          android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:background="#ffffff"

            android:text="text3"

        />

           <TextView

            

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:background="#ff0000"

            android:text="text4"

        />

        </LinearLayout>

 

</LinearLayout>

 

2.FrameLayout(幀佈局)

幀佈局中沒有相對佈局的特有屬性，幀佈局中組件對齊方式和線性佈局是一樣的。

在幀佈局中，組件是可以重疊的。

在幀佈局中，所有組件默認的都是左對齊和頂部對齊。可以設定上下左右對齊。

在幀佈局中，可以通過

android:layout_gravity

來設定組件的位置，可以同時設置多個方向的佈局，多個佈局方向之間用 | 隔開

 

幀佈局中任何一個組件都是獨立的，不能相對於其他組件對齊

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

    <TextView 

     android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="第一個組件"

    android:textSize="18sp"

    android:layout_gravity="right|bottom"

        />

    <TextView 

     android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="第二個組件"

    android:textSize="18sp"

    android:layout_gravity="center"

        />

    <TextView 

     android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/tv3"

    android:text="第三個組件"

    android:textSize="18sp"

        />

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

    

    <TextView 

        android:layout_width="240dp"

        android:layout_height="240dp"

        android:background="#FF0000"

        android:layout_gravity="center"

        />

    <TextView 

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:background="#00FF00"

        android:layout_gravity="center"

        />

    <TextView 

        android:layout_width="160dp"

        android:layout_height="160dp"

        android:background="#0000ff"

        android:layout_gravity="center"

        />

    <TextView 

        android:layout_width="120dp"

        android:layout_height="120dp"

        android:background="#ffff00"

        android:layout_gravity="center"

        />

    <TextView 

        android:layout_width="80dp"

        android:layout_height="80dp"

        android:background="#00ff00"

        android:layout_gravity="center"

        />

    <TextView 

        android:layout_width="40dp"

        android:layout_height="40dp"

        android:background="#ffffff"

        android:layout_gravity="center"

        />

</FrameLayout> 

 

3.RelativeLayout(相對佈局)

在相對佈局中，組件是可以重疊的。

在相對佈局中，所有組件默認的都是左對齊和頂部對齊。

組件可以相對於父元素對齊，也可以相對於其他組件對齊（相對於組件的id的引用）

組件沒有定義的位置屬性，默認爲父元素的該屬性默認值。、

 

組件可以相對於父元素上下左右對齊，相對於父元素水平居中，垂直居中、水平垂直同時居中。

組件可以相對於其他組件上下左右對齊。可以佈局於其他組件的上方、下方、左方、右方。

 

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

    <TextView 

        android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="第一個組件"

       android:textSize="18sp"

       android:layout_alignParentLeft="true"

        />

    <TextView 

        android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="第二個組件"

       android:textSize="18sp"

       android:layout_alignParentRight="true"

        />

    <TextView 

        android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:id="@+id/tv3"

       android:text="第三個組件"

       android:textSize="18sp"

       android:layout_alignParentBottom="true"

        />

    <TextView  

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

       android:layout_toRightOf="@id/tv3"

        android:text="第四個組件"

        android:textSize="18sp" />

</RelativeLayout>

 

佈局時一定要考慮組件的可擴展性(代碼優雅健壯)。

<?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:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/center"

    android:text="中間"

    android:layout_centerInParent="true"

    

   />

  <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/above"

    android:text="上邊"

    android:layout_above="@id/center"

    android:layout_alignRight="@id/center"

    android:layout_alignLeft="@id/center"

   

   />

  <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/below"

    android:text="下邊"

    android:layout_below="@id/center"

    android:layout_alignRight="@id/center"

    android:layout_alignLeft="@id/center"

   />

    <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/left"

    android:text="左邊"

    android:layout_toLeftOf="@id/center"

    android:layout_alignTop="@id/center"

    android:layout_alignBottom="@id/center"

    

   />

   <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/right"

    android:text="右邊"

    android:layout_toRightOf="@id/center"

    android:layout_alignTop="@id/center"

    android:layout_alignBottom="@id/center"

   />

     <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/above_left"

    android:text="左上邊"

    android:layout_toLeftOf="@id/center"

    android:layout_above="@id/center"

    

    

   />

     <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/above_right"

    android:text="右下方"

    android:layout_toRightOf="@id/center"

    android:layout_above="@id/center"

   

   />

       <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/below_left"

    android:text="右下邊"

    android:layout_toLeftOf="@id/center"

    android:layout_below="@id/center"

    

   />

     <Button 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/below_right"

    android:text="右下方"

    android:layout_toRightOf="@id/center"

    android:layout_below="@id/center"

    

   />

</RelativeLayout>

也可以根據其他的組件來確定一個組件的位置

 

4.TableLayout(表格佈局)

在表格佈局中TableLayout的一級子節點的寬都是匹配父元素

TableRow中的組件寬和高都是包裹內容

在表格佈局中，每一個表格都是由行和列組成的。

a) 沒有用TableRow，每一個組件佔用一行

b) 用了TableRow，每一個TableRow佔用一行，其中的組件佔用一列，多出來的不會顯示

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

    <!-- 表格中，沒用 <TableRow >默認每一個組件佔用一行 -->

    <!-- 一個 <TableRow >佔用一行，一個 <TableRow >中可以放置多個組件 ,每個組件佔用一列-->

    <TableRow 

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        >     

         <TextView 

                  android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                  android:text="第一個組件"

                  android:textSize="18sp"

        />

      <TextView 

                android:layout_width="wrap_content"

               android:layout_height="wrap_content"

                android:text="第二個組件"

               android:textSize="18sp"

        />

      <TextView 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

                android:text="第三個組件"

               android:textSize="18sp"

        />   

    </TableRow>

    <TableRow 

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        >  

       <TextView 

                android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:text="第一個組件"

                android:textSize="18sp"

        />

       <TextView 

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="第二個組件"

                android:textSize="18sp"

        />

      <TextView 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:text="第三個組件"

              android:textSize="18sp"

        />        

    </TableRow>

</TableLayout>

使用表格佈局時，需要分析清楚需要使用的行數和列數

TableRowt可以不定義寬高，定義了也是無效的。

其寬度固定爲匹配父元素，高度爲包裹內容。

TableRow裏面的內容的寬和高都固定爲包裹內容

表格佈局中通過

android:stretchColumns=”列數”

來定義列的寬度。表示把該列佔滿行列屏幕剩餘空間，可以同時定義多個列，這些列會平均分配該行的屏幕剩餘空間。

在Android中分割線一般用<TextView/>來做：設置寬高，給個背景顏色。即使是在表格中，分割線也不需要單獨做成一個行。（<TableRow >）

 

案例;

 

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

    android:stretchColumns="1">

    

    <TableRow >

        <TextView 

            android:text="  "/>

        <TextView 

            android:text=" open "/>

        <TextView 

            android:text=" Crtl -O"

            android:gravity="right"

            />

    </TableRow>

     <TableRow >

        <TextView 

            android:text="  "/>

        <TextView 

            android:text=" save "/>

        <TextView 

            android:text=" Crtl -S"

            android:gravity="right"

            />

    </TableRow>

     <TableRow >

        <TextView 

            android:text="  "/>

        <TextView 

            android:text=" save -s "/>

        <TextView 

            android:text=" Crtl -Shift -s"/>

    </TableRow>

    <TextView 

        android:layout_height="1dp"

        android:background="#000000"

        />

     <TableRow >

        <TextView 

            android:text=" X "/>

        <TextView 

            android:text=" Import "/>

        <TextView 

            android:text=" "/>

    </TableRow>

     <TableRow >

        <TextView 

            android:text=" X "/>

        <TextView 

            android:text=" Export "/>

        <TextView 

            android:text=" Crtl -E"

            android:gravity="right"

            />

    </TableRow>

     <TextView 

        android:layout_height="1dp"

        android:background="#000000"

        />

     <TableRow >

        <TextView 

            android:text="  "/>

        <TextView 

            android:text=" Quit "/>

        <TextView 

            android:text=" Crtl -Q"

            android:gravity="right"

            />

    </TableRow>

 

</TableLayout>

android:layout_column="列"可以用來改變當前列的列數

 android:layout_span="列數"設置讓當前列佔幾列的寬度

上面佈局優化後的代碼：

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

    android:stretchColumns="1">

    

    <TableRow >

        <TextView 

          android:layout_column="1"

            android:text=" open "/>

        <TextView 

            android:text=" Crtl -O"

            android:gravity="right"

            />

    </TableRow>

     <TableRow >

        <TextView 

           android:layout_column="1"

            android:text=" save "/>

        <TextView 

            android:text=" Crtl -S"

            android:gravity="right"

            />

    </TableRow>

     <TableRow >

        <TextView 

           android:layout_column="1"

            android:text=" save -s "/>

        <TextView 

            android:text=" Crtl -Shift -s"/>

    </TableRow>

    <TextView 

        android:layout_height="1dp"

        android:background="#000000"

        />

     <TableRow >

        

        <TextView 

            android:text=" X "/>

        <TextView 

          android:layout_span="2"

            android:text=" Import "/>

        

    </TableRow>

     <TableRow >

        <TextView 

            android:text=" X "/>

        <TextView 

            android:text=" Export "/>

        <TextView 

            android:text=" Crtl -E"

            android:gravity="right"

            />

    </TableRow>

     <TextView 

        android:layout_height="1dp"

        android:background="#000000"

        />

     <TableRow >

        <TextView

           android:layout_column="1" 

            android:text=" Quit "/>

        <TextView 

            android:text=" Crtl -Q"

            android:gravity="right"

            />

    </TableRow>

 

</TableLayout>

 

5.AbsoluteLayout(絕對佈局) 在手機軟件開發中基本上不使用，因爲沒法做適配。基本上都是在電視開發中使用。

絕對佈局中，所有組件的座標，都是通過座標軸的方式指定的

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

 

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="224dp"

        android:layout_y="166dp"

        android:text="Button" />

 

    <TextView

        android:id="@+id/textView1"

        android:layout_width="236dp"

        android:layout_height="67dp"

        android:layout_x="34dp"

        android:layout_y="26dp"

        android:text="TextView" />

 

</AbsoluteLayout>