Android UI 控件之六大布局

??Android里的圖形界面都是由View和ViewGroup以及他們的子類構成的: View:所有可視化控件的父類,提供組件描繪和時間處理方法 ViewGroup: View類的子類,可以擁有子控件,可以看作是容器 Android UI中的控件都是按照這種層次樹的結構堆疊得,而創建UI布局的方式有兩種, 自己在Java里寫代碼或者通過XML定義布局,后者顯得更加方便和容易理解! 也是我們最常用的手段!另外我們一般很少直接用View和ViewGroup來寫布局,更多的 時候使用它們的子類控件或容器來構建布局!

1)fill_parent

設置一個構件的布局為fill_parent將強制性地使構件擴展,以填充布局單元內盡可能多的空間。這跟Windows控件的dockstyle屬性大體一致。設置一個頂部布局或控件為fill_parent將強制性讓它布滿整個屏幕。

2) wrap_content

設置一個視圖的尺寸為wrap_content將強制性地使視圖擴展以顯示全部內容。以TextView和ImageView控件為例,設置為wrap_content將完整顯示其內部的文本和圖像。布局元素將根據內容更改大小。設置一個視圖的尺寸為wrap_content大體等同于設置Windows控件的Autosize屬性為True。

3)match_parent

Android2.2中match_parent和fill_parent是一個意思 .兩個參數意思一樣,match_parent更貼切,于是從2.2開始兩個詞都可以用。那么如果考慮低版本的使用情況你就需要用fill_parent了

一、LinearLayout(線性布局)

LinearLayout

關于weight的詳細用法參考菜鳥教程LinearLayout詳解

  • 默認情況下,LinearLayout的布局為水平布局,使用orientation來改變布局方式,有vertical(豎直布局)和horizontal (水平布局)兩種方式。

divider分割線

  1. android:divider設置作為分割線的圖片
  2. android:showDividers設置分割線的位置,none(無),beginning(開始),end(結束),middle(每兩個組件間)
  3. dividerPadding設置分割線的Padding
   android:orientation="vertical"
    android:divider="@drawable/parting_line"
    android:showDividers="middle"
    android:dividerPadding="10dp"
LinearLayout的簡單例子:
image.png
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="請輸入要保存的美文:"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="right">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="保存"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="清空"/>
    </LinearLayout>

二、RelativeLayout(相對布局)

核心屬性圖

RelativeLayout
  • 其中,關于兄弟組件的小demo梅花布局
    梅花布局

- margin與padding的區別

?&esnp;初學者對于這兩個屬性可能會有一點混淆,這里區分下: 首先margin代表的是偏移,比如marginleft = "5dp"表示組件離容器左邊緣偏移5dp; 而padding代表的則是填充,而填充的對象針對的是組件中的元素,比如TextView中的文字 比如為TextView設置paddingleft = "5dp",則是在組件里的元素的左邊填充5dp的空間! margin針對的是容器中的組件,而padding針對的是組件中的元素,要區分開來!

  • margin可以設置為負數

三、TableLayout(表格布局)

介紹:

相信學過HTML的朋友都知道,我們可以通過< table >< tr >< td >就可以生成一個HTML的表格, 而Android中也允許我們使用表格的方式來排列組件,就是行與列的方式,就說我們這節的TableLayout!

①如果我們直接往TableLayout中添加組件的話,那么這個組件將占滿一行!!!
②如果我們想一行上有多個組件的話,就要添加一個TableRow的容器,把組件都丟到里面!
③tablerow中的組件個數就決定了該行有多少列,而列的寬度由該列中最寬的單元格決定
④tablerow的layout_width屬性,默認是fill_parent的,我們自己設置成其他的值也不會生效!!! 但是layout_height默認是wrapten——content的,我們卻可以自己設置大小!
⑤整個表格布局的寬度取決于父容器的寬度(占滿父容器本身)
⑥有多少行就要自己數啦,一個tablerow一行,一個單獨的組件也一行!多少列則是看tableRow中 的組件個數,組件最多的就是TableLayout的列數

android:collapseColumns:設置需要被隱藏的列的序號
android:shrinkColumns:設置允許被收縮的列的列序號
android:stretchColumns:設置運行被拉伸的列的列序號
以上這三個屬性的列號都是從0開始算的,

四、FrameLayout(幀布局)

  • 前景圖像:永遠處于幀布局最上面,直接面對用戶的圖像,就是不會被覆蓋的圖片。
    • android:foreground:*設置改幀布局容器的前景圖像
    • android:foregroundGravity:設置前景圖像顯示的位置

ps:get兩個有意思的小項目

  • 隨手指移動的萌妹子
  • 跑動的萌妹子

五、GridLayout(網格布局)

網格布局

例子:計算機布局的實現


image.png
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:columnCount="4"
    android:rowCount="6">

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="@color/colorPrimary"
        android:text="0"
        android:textSize="50dp"/>

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />

    <Button android:text="+"/>
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="-"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="*"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button android:text="/"/>
    <Button
        android:layout_width="wrap_content"
        android:text="."/>
    <Button android:text="0"/>
    <Button android:text="="/>

</GridLayout>

六、AbsoluteLayout(絕對布局)

前面已經介紹了,Android中的五大布局,在本節中會講解第六個布局AbsoluteLayout(絕對布局), 之所以把這個放到最后,是因為絕對布局,我們基本上都是不會使用的,當然你也可以直接跳過這一 篇博文,不過作為一個喜歡增長姿勢的程序員,我們還是可以了解這個AbsoluteLayout布局的, 相信大部分學過Java的都知道,我們在Java swing(不是spring哦)都用過這個絕對布局,但是Android 中我們用這個少的原因,就是因為我們開發的應用需要在很多的機型上面進行一個適配,如果你 使用了這個絕對布局的話,可能你在4寸的手機上是顯示正常的,而換成5寸的手機,就可能出現偏移 和變形,所以的話,這個還是不建議使用了,當然,如果你不會寫代碼的話,又想玩玩android,那么寫 布局的時候就可以通過ADT把需要的組件,拖拉到界面上!這個AbsoluteLayout是直接通過X,Y坐標來 控制組件在Activity中的位置的!另外這個但單位是dp!

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容