六大布局之LinearLayout

1. 什麼是Layout?

Layout——界面佈局,爲應用程序提供界面架構。控制Activity中控件的大小、位置、顏色等屬性的方法.php

Layout 與 ViewGroup的關係android

img

  • ViewGroup是一個容器,繼承自View.
  • ViewGroupLayout和一些其它組件的基類.

在Android中提供了幾個經常使用佈局: LinearLayout 線性佈局bash

RelativeLayout相對佈局架構

FrameLayout 幀佈局ide

AbsoluteLayout絕對佈局佈局

TableLayout 表格佈局ui

GridLayout網格佈局this

今天咱們主要講線性佈局,其他的經常使用佈局會在後期文章爲你們詳細講述。spa

2. LinearLayout線性佈局:

指子控件以水平或垂直方式排列,正如其名字同樣,這個佈局中的全部控件在線性方向上依次排列。3d

經常使用屬性:

  1. android:id:爲該組件添加一個資源id,即標識符,能夠經過id來找到該佈局或者控件。
  2. android:layout_width:佈局的寬度,用wrap_content表示組件的實際寬度,match_parent表示填充父容器
  3. android:layout_height:佈局的長度,用wrap_content表示組件的實際長度,match_parent表示填充父容器
  4. android:orientation:佈局中的排列方式,有兩種方式:horizontal水平,vertical豎直,若是不設置則默認水平顯示
  5. android:gravity:控制組件所包含的子元素的對齊方式
  6. android:layout_gravity:控制該組件在父容器裏的對齊方式
  7. android:background:爲該組件添加一個背景圖片或者背景顏色,顏色常以六位的十六進制表示
  8. android:layout_margin :外邊距,佈局或控件距離外部元素的邊距
  9. android:layout_padding :內邊距,佈局或控件距離內部元素的邊距
  10. android:layout_weight:權重,除了被顯示佔據的空間之外的的空間,而後根據權重的大小來分配空間,使用權重一般會把分配該權重方向的寬度設置爲0dp,若是未設置0dp,則該控件會佔據指定的寬度,而後再加上根據權重來分配的空間

下面依次分別舉例說明使用方法

orientation 是一個視圖組,能夠在一個方向垂直或者水平分佈全部子項

android:orientation="vertical" 時, 只有水平方向的設置才起做用,垂直方向的設置不起做用.即:left,right,center_horizontal 是生效的. 當 android:orientation="horizontal" 時, 只有垂直方向的設置才起做用,水平方向的設置不起做用.即:top,bottom,center_vertical 是生效的.

<?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:background="@color/white" android:orientation="vertical">

    <TextView android:id="@+id/tv_here" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="這裏1" android:textColor="@color/black" android:textSize="16sp" />

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="這裏2" android:textColor="@color/black" android:textSize="16sp" />
</LinearLayout>
複製代碼

img

<?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:background="@color/white" android:orientation="horizontal">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="這裏1" android:textColor="@color/black" android:textSize="16sp" />

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="這裏2" android:textColor="@color/black" android:textSize="16sp" />
</LinearLayout>
複製代碼

img

gravity:

android:layout_gravity是本(子)元素相對於父元素的對齊方式設置在子元素上. android:gravity="bottom|right"是本(父)元素全部子元素的對齊方式,設置在父元素上,多個值用 | 隔開.

其屬性值分別爲:center(總體居中)、center_vertical(垂直居中)、center_horizontal(水平居中)、right(居右)、left(居左)、bottom(底部)和top(頂部)

<?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:background="@color/white" android:gravity="center" android:orientation="vertical">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="這裏1" android:textColor="@color/black" android:textSize="16sp" />

    <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="@color/color_F9658E" android:gravity="bottom" android:text="這裏2" android:textColor="@color/black" android:textSize="16sp" />

    <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="@color/color_A9BEFF" android:gravity="center_vertical|right" android:text="這裏3" android:textColor="@color/black" android:textSize="16sp" />
</LinearLayout>
複製代碼

img

background

<?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:background="@mipmap/ic_launcher" android:orientation="vertical">

    <TextView android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center_horizontal" android:background="@color/color_FF6F65" android:gravity="center" android:text="這裏1" android:textColor="@color/black" android:textSize="16sp" />
</LinearLayout>
複製代碼

img

padding && margin: android:padding="10dp" (是本元素全部子元素的與父元素邊緣的距離,設置在父元素上). android:layout_marginLeft="10dp"(子元素與父元素邊緣的距離,設置在子元素上).

<?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:background="@color/white" android:gravity="center" android:orientation="vertical">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/color_FF6F65" android:text="這裏1" android:textColor="@color/black" android:textSize="16sp" />

    <TextView android:layout_width="100dp" android:layout_height="100dp" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:background="@color/color_F9658E" android:gravity="bottom" android:padding="15dp" android:text="這裏2" android:textColor="@color/black" android:textSize="16sp" />

    <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="@color/color_A9BEFF" android:gravity="center_vertical|right" android:paddingRight="15dp" android:text="這裏3" android:textColor="@color/black" android:textSize="16sp" />
</LinearLayout>
複製代碼

img

weight: android:layout_weight ="1"(線性佈局內子元素對未佔用空間【水平或垂直】分配權重值,其值越小,權重越大. 前提是子元素設置了android:layout_width = "match_parent" 屬性 ( 水平方向 )或 android:layout_height = "match_parent"屬性( 垂直方向). 如 果 某 個 子 元 素的android:layout_width = "0dp"android:layout_height="0dp" ,則 android:layout_weight 的設置值 對該方向上空間的分配則恰好相反。

<?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:background="@color/white" android:gravity="center" android:orientation="vertical">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:background="@color/color_FF6F65" android:paddingLeft="10dp" android:paddingTop="20dp" android:paddingRight="40dp" android:paddingBottom="60dp" android:text="這裏1" android:textColor="@color/black" android:textSize="16sp" />

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

        <TextView android:layout_width="match_parent" android:layout_height="50dp" android:layout_weight="1" android:background="@color/color_F9658E" android:paddingLeft="15dp" android:text="這裏2" android:textColor="@color/black" android:textSize="16sp" />

        <TextView android:layout_width="match_parent" android:layout_height="50dp" android:layout_weight="2" android:background="@color/color_A9BEFF" android:paddingRight="15dp" android:text="這裏3" android:textColor="@color/black" android:textSize="16sp" />
    </LinearLayout>

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

        <TextView android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:background="@color/color_29CFFF" android:paddingLeft="15dp" android:text="這裏4" android:textColor="@color/black" android:textSize="16sp" />

        <TextView android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="2" android:background="@color/color_D6E519" android:paddingRight="15dp" android:text="這裏5" android:textColor="@color/black" android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>
複製代碼

img

用代碼方式編寫linearlayout佈局

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //建立LinearLayout佈局對象
        LinearLayout liHello = new LinearLayout(this);
        //對於佈局方面的屬性這樣來設置
        LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //設置佈局LinearLayout的佈局排列方式
        liHello.setOrientation(LinearLayout.VERTICAL);
        //設置佈局背景顏色
        liHello.setBackgroundColor(Color.parseColor("#F9658E"));
        //設置佈局內邊距,注意這裏不能夠設置外邊距
        liHello.setPadding(10, 20, 30, 40);
        //設置組件內所包含的子元素的對齊方式
        liHello.setGravity(Gravity.CENTER);

        TextView tvHello = new TextView(this);
        tvHello.setText("你好");

        liHello.addView(tvHello, param);
        //設置顯示liHello佈局
        setContentView(liHello);
    }
複製代碼

img

結語

咱們的軟件是由好多個界面組成的,而每一個界面又由N多個控件組成,Android中藉助佈局來讓各個空間有條不紊的擺放在界面上。能夠把佈局看做是一個能夠放置不少控件的容器,它能夠按照必定的規律調整控件的位置,從而實現精美的界面。佈局中也能夠放置佈局,經過多層佈局的嵌套,實現比較複雜的界面。相信小夥伴兒們已經學會LinearLayout的使用方法了,那就趕忙操練起來吧。

PS:若是還有未看懂的小夥伴,歡迎加入咱們的QQ技術交流羣:892271582,裏面有各類大神回答小夥伴們遇到的問題哦~

相關文章
相關標籤/搜索