天天看點

Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識

一、Android UI基礎知識

(一)常用布局

1. 線性布局—LInearLayout

  • LinearLayout

    是一個視圖容器,用于使所有子視圖在單個方向(垂直或水準)保持對齊。您可使用

    android:orientation

    屬性指定布局方向。
  • android:orientation="horizontal"

    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
  • android:orientation="vertical"

    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
  • 布局權重 android:layout_weight

    :通過給子視圖設定權重值,來配置設定子視圖所占空間的權重(比例),如圖三個子視圖權重分别設定為1,均分頁面空間。
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
<?xml version="1.0" encoding="utf-8">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">
	android:layout_wi
</LinearLayout>
           

2. 相對布局—RelativeLayout

  • 相對布局 :子視圖可通過相應的布局屬性,設定相對于另一個兄弟視圖或父視圖容器的相對位置
  • 屬性說明:

    ①、相對于兄弟元素

    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
<?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:id="@+id/one"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="#E78E55"
        android:text="1"
        android:textColor="#ffffff"
        android:textSize="40sp" />

    <TextView
        android:layout_toRightOf="@id/one"
        android:id="@+id/two"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="#78C257"
        android:text="2"
        android:textColor="#ffffff"
        android:textSize="40sp" />
    <!--android:layout_toRightOf="@id/one" 将第二個文本設定在第一個文本的右邊-->


    <TextView
        android:layout_below="@id/two"
        android:id="@+id/three"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="#DD001B"
        android:text="3"
        android:textColor="#ffffff"
        android:textSize="40sp" />
    <!--android:layout_below="@id/two" 将第三個文本設定在第二個文本的下邊-->
</RelativeLayout>
           
  • ②、相對于父元素
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
<?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_alignParentRight="true"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:background="#DD001B"
        android:gravity="center"
        android:text="1"
        android:textColor="#ffffff"
        android:textSize="40sp"/>
    <!--android:layout_alignParentRight="true" 指的是文本在父元素内的右邊-->
</RelativeLayout>
           
  • ③、對齊方式
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
<?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_centerHorizontal="true"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:background="#DD001B"
        android:gravity="center"
        android:text="1"
        android:textColor="#ffffff"
        android:textSize="40sp"/>
    <!--android:layout_centerHorizontal="true" 指的是文本局中對齊-->
</RelativeLayout>
           
  • ④、間隔
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
  • 父容器定位屬性示意圖
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識
  • 根據兄弟元件定位
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識

3. 幀布局-FrameLayout

  • 最簡單的一種布局,沒有任何定位方式,當我們往裡面添加控件的時候,會預設把他們放到這塊區域的左上角,幀布局的大小由控件中最大的子控件決定,如果控件的大小一樣大的話,那麼同一時刻就隻能看到最上面的那個元件,後續添加的控件會覆寫前一個
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識

4. 網格布局-GridLayout

  • 屬性說明:
    Android UI基礎知識之四種常用布局(二)一、Android UI基礎知識