Android開發-之五大布局

  在html中你們都知道佈局是什麼意思了,簡單來講就是將頁面劃分模塊,好比html中的div、table等。那麼Android中也是這樣的。Android五大布局讓界面更加美化,開發起來也更加方便。固然佈局方式不同應用的地方也不同,固然了有的佈局方式也是能夠相互轉換和嵌套使用的。它們都各有各的優缺點,具體頁面要怎麼佈局仍是得看開發需求,可是用的最多的仍是相對佈局、線性佈局以及相對佈局和線性佈局的嵌套使用。固然,我說的是安卓,並無指定是安卓手機,好比平板、智能家居(電視...)不少都是Android系統。那麼下面咱們就具體來說Android開發中的五大布局,我以一個簡單的撥號器爲例。html

 

1、Android五大布局分類

  一、相對佈局android

  二、絕對佈局框架

  三、線性佈局佈局

  四、表格佈局學習

  五、幀佈局字體

 

2、具體佈局的使用

  一、相對佈局(RelativeLayout)

  在咱們建立Android項目時,默認的activity_main.xml這個文件默認的佈局方式就是RelativeLayout相對佈局。那麼相對佈局就是按照各子元素之間的位置關係完成佈局。在此佈局中的子元素裏與位置相關的屬性將生效。能夠這樣理解:在安卓屏幕中的父元素就是整個屏幕,而子元素就是那些按鈕、文本框之類的東西。spa

  相對佈局是Android佈局中最爲經常使用的佈局之一,也是最強大的佈局:3d

    1)它能夠設置的屬性很是的多調試

    2)能夠作的事情最多code

    3)安卓屏幕的分辨率大小不一,因此想到屏幕的自適應性,開發中建議你們去使用相對佈局。

    4)相對於元素來講,比較容易定位

  可是不足的地方是:每個控件都是相互關聯的,若是維護的時候刪除一個控件的時候,那麼界面就所有亂套了……

 

  a、如下是相對佈局的XML代碼

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.fivelayout.MainActivity" >
    
    

    <!-- 默認RelativeLayout相對佈局 -->
    
       <TextView 
           android:id="@+id/tv_number"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="請輸入電話號碼:"
           />
       
       <EditText 
           android:id="@+id/et_number"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="輸入電話號碼"
           android:layout_below="@id/tv_number"
           />
       
       <Button 
           android:id="@+id/btn_call"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="call"
           android:layout_below="@id/et_number"
           
           />
       
       <Button 
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="call"
           android:layout_below="@id/et_number"
           android:layout_toRightOf="@id/btn_call"
           />
       
   

</RelativeLayout>

  

 

  b、部分標籤屬性說明

  TextView:顯示的文本內容
  EditText:相似輸入框
  android:id:給元素指定一個惟一ID標識
  android:text:顯示的文本內容
  android:layout_below:相對於上邊子元素的下面
  android:layout_toRightOf:相對於左邊子元素的右邊
  android:layout_width:子元素的橫向填充方式
  android:layout_width:子元素的縱向填充方式

 

  c、效果

 

 

 

  

  二、絕對佈局

  在這裏打一個比方:咱們手機鬥地主,三個玩家的位置是固定在三個角落的,那麼用相對佈局就不容易實現。那麼咱們就能夠用絕對佈局(AbsoluteLayout)就比較容易去實現這個功能。

  可是在實際開發中:

  1)一般不採用此佈局格式

  2)它的界面代碼過於剛性

  3)有可能不能很好的適配各類終端

因此絕對佈局的方式已經被Google公司的Android開發團隊捨棄了。在此佈局中的子元素的android:layout_x和android:layout_y屬性將生效,用於描述該子元素的座標位置。屏幕左上角爲座標原點(0,0),第一個0表明橫座標,向右移動此值增大,第二個0表明縱座標,向下移動,此值增大。在此佈局中的子元素能夠相互重疊。

 

  a、一下是絕對佈局的xml實現代碼

 

<?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" >
    
    <!-- 絕對佈局AbsoluteLayout -->

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="22dp"
        android:layout_y="33dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="141dp"
        android:layout_y="103dp"
        android:text="Button" />
    
</AbsoluteLayout>

 

  b、部分標籤屬性說明:

  android:layout_x:絕對於屏幕左上角的角落橫向的距離
  android:layout_y:絕對於屏幕左上角的角落縱向的距離

 

  c、效果

 

 

 

  三、線性佈局(LinearLayout)

  線性佈局就好像咱們串羊肉串同樣,是一條直線鏈接起來的。這裏呢又分爲橫向和縱向。

  線性佈局按照垂直或者水平的順序依次排列子元素,每個子元素都位於前一個元素以後。

    1)垂直排列,那麼將是一個N行單列的結構,每一行只會有一個元素,而不論這個元素的寬度爲多少;

    2)水平排列,那麼將是一個單行N列的結構。

    3)搭建兩行兩列的結構,一般的方式是先垂直排列兩個元素,每個元素裏再包含一個LinearLayout進行水平排列

  也就是說縱向和橫向仍是能夠相互嵌套使用的哦,能夠實現表格佈局的效果。

 

  a、如下是線性佈局的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" >
    
    <!-- 線性佈局LinearLayout -->
    
    <TextView 
        android:id="@+id/tv_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:textSize="18sp"
        android:text="請輸入電話號碼:"        
        />
    
    <EditText 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="請輸入電話號碼"
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="撥打"
        />

</LinearLayout>

 

  b、部分標籤屬性說明

  android:orientation:指定縱向佈局仍是橫向佈局
  android:layout_marginLeft:標籤外部離屏幕的左邊距
  android:layout_marginTop:標籤外部離屏幕的上邊距
  android:textSize:字體顯示的大小  注意:單位是sp

 

  c、效果

 

 

  

  四、表格佈局

  

  相比你們對於表格都有很大的瞭解,好比咱們經常使用到的Excel表格,再好比咱們html中用到的table標籤,其實在Android中的表格佈局也是相似的,因此當須要像表格同樣布 局,那麼推薦使用表格佈局
  表格佈局適用於多行多列的佈局格式。一個TableLayout由許多TableRow組成,一個TableRow就表明TableLayout中的一行。
  1)TableRow是LinearLayout的子類,ablelLayout並不須要明確地聲明包含多少行、多少列,而是經過TableRow,以及其餘組件來控制表格的行數和列數,

  2)TableRow就比如是table中的tr,它是一個容器,所以能夠向TableRow裏面添加其餘組件也就是咱們常說的標籤屬性,每添加一個組件該表格就增長一列。若是想TableLayout裏面添加組件,那麼該組件就直接佔用一行。

  3)在表格佈局中,列的寬度由該列中最寬的單元格決定,整個表格佈局的寬度取決於父容器的寬度,默認是佔滿父容器自己的,這裏的父容器就至關於咱們的整個屏幕。

 

  a、一下是表格佈局的xml實現代碼

 

<?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" >
    
    <!-- 表格佈局tablelayout -->
    <!-- tablerow表明一行,行裏面有多少個標籤內容就表明多少列 -->
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1行1列"
            android:textSize="18sp"
            />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1行2列"
            android:textSize="18sp"
            android:layout_marginLeft="20dp"
            />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1行3列"
            android:textSize="18sp"
            android:layout_marginLeft="20dp"
            />
        
    </TableRow>
        
    <TableRow 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行1列"
            android:textSize="18sp"
            />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2行2列"
            android:textSize="18sp"
            android:layout_marginLeft="20dp"
            />
 
     </TableRow>
    
</TableLayout>

 

  b、部分標籤屬性說明

  TableRow:行

 

  c、效果

 

 

 

  五、幀佈局(框架佈局)

  幀佈局有的地方也稱之爲框架佈局,是最簡單的佈局形式,因此在實際開發中用得比較少。全部添加到這個佈局中的視圖都以層疊的方式顯示。第一個添加的控件被放在最底層,最後一個添加到框架佈局中的視圖顯示在最頂層,上一層的控件會覆蓋下一層的控件。這種顯示方式有些相似於堆棧。

 

  a、如下是幀佈局xml的實現代碼

 

<?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" >
    
    <!-- 幀佈局FrameLayout -->
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="幀佈局..."
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="點擊"
        />

</FrameLayout>

 

  b、部分標籤說明

  發現這裏沒有啥標籤好說明噠~~哈哈哈,那我就當作是已經省略了……

 

  c、效果

 

 

 

PS:以上的效果也許你們看得不是很理解,那麼久須要你們本身去實踐啦,把那些標籤一個一個的去調試看一下~最後纔會發現原來效果相差這麼大,對就是這麼大~~~

 

3、總結

  一、在實際開發中,各各佈局不是獨立存在的,而是能夠相互嵌套使用的,就比如html中div嵌套表格,而後表格再嵌套div同樣

  二、具體使用哪個佈局得看某個頁面要用怎樣的佈局才更方便快捷的實現,也更方便的去維護這方面去思考

  三、雖然說絕對佈局被捨棄了,可是在具體的開發中仍是有可能用到的,你們也只要理解一下就好啦

  四、佈局不只可以方便快捷便於維護,還能帶來更好的頁面美觀效果

  五、部分佈局與佈局之間能夠能夠替換使用,好比相對佈局與線性佈局與表格佈局的相互替換使用等

  六、還有不少佈局的屬性,那麼聰明的你們也許都看出來規律了,跟咱們學的CSS是否是很熟悉呢,你們能夠本身去學習哈……

相關文章
相關標籤/搜索