簡單的Android XML佈局使用
阿新 • • 發佈:2018-12-29
Android XML佈局
前言
今天我們來簡單介紹一下Android的XML佈局以及三種常見的XML佈局
目錄
1.XML佈局的優點
在XML檔案中設計UI可以更好地將應用的外觀與控制應用行為的程式碼隔離,每次修改或調整介面佈局只需要修改XML檔案的程式碼而不是修改原始碼和重新編譯。
2.XML佈局基礎介紹
2.1 呼叫XML佈局
在編譯XML佈局檔案時,都需要通過main函式中的 onCreate 來呼叫,通常使用如下方式來進行呼叫。
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_linear_layout);
}
其中setContentView裡的內容‘R’為就是系統給宣告的靜態變數,所有的子類都是通過‘R’來呼叫。而‘R’的路徑則是 Android 工程路徑下的 app -> src -> main -> res 下。
R.layout指res資料夾下一個名為layout的資料夾,而R.layout.activity_linear_layout之後的部分則是layout資料夾下自己定義的.xml
2.2 XML佈局的常見屬性
屬性 | 描述 |
---|---|
ID | 控制元件名字,是當前控制元件的唯一標識,常用字串表示 |
background | 調整當前介面背景 |
gravity | 調整所有控制元件所在的整體位置 |
layout_width | 當前介面整體寬度,常用wrap_content和match_parent |
layout_height | 當前介面整體高度,常用wrap_content和match_parent |
padding | 調整螢幕邊距,可以整體調整或者單項調整 |
text | 控制元件顯示文字,可呼叫values資料夾中的strings.xml來顯示文字內容 |
textColor | 顯示文字顏色,可呼叫values資料夾中的color.xml來定義 |
textSize | 顯示文字字型大小,單位常用dp和px |
textStyle | 顯示文字字型風格,可選的有斜體和粗體 |
3.常見的三種簡單XML佈局
3.1 LinearLayout
這一種使用單個水平行或垂直行來組織子項的佈局,是風格最簡單的佈局。
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:weightSum="1"
android:id="@+id/linearLayout"
android:layout_alignParentTop="false"
android:layout_alignWithParentIfMissing="false"
android:layout_alignParentRight="false"
android:layout_alignParentBottom="false"
android:background="#000000">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="One,One"
android:id="@+id/textView2"
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_weight="0.19"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="One,Two"
android:id="@+id/textView3"
android:textSize="16dp"
android:layout_weight="0.34"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="One,Three"
android:id="@+id/textView4"
android:layout_weight="0.27"
android:textSize="16dp"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="One,Four"
android:id="@+id/textView5"
android:textSize="16dp"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/linearLayout"
android:weightSum="1"
android:id="@+id/linearLayout2"
android:background="#000000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Two,One"
android:id="@+id/textView6"
android:textSize="16dp"
android:layout_weight="0.13"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Two,Two"
android:id="@+id/textView7"
android:textSize="16dp"
android:layout_weight="0.41"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Two,Three"
android:id="@+id/textView8"
android:textSize="16dp"
android:layout_weight="0.25"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Two,Four"
android:id="@+id/textView9"
android:textSize="16dp"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="1"
android:id="@+id/linearLayout3"
android:background="#000000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Three,One"
android:id="@+id/textView10"
android:textSize="16dp"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Three,Two"
android:id="@+id/textView11"
android:textSize="16dp"
android:layout_weight="0.38"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Three,Three"
android:id="@+id/textView12"
android:textSize="16dp"
android:gravity="center_horizontal"
android:layout_weight="0.26"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Three,Four"
android:id="@+id/textView13"
android:textSize="16dp"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="1"
android:background="#000000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Four,One"
android:id="@+id/textView14"
android:gravity="center_horizontal"
android:textSize="16dp"
android:layout_weight="0.14"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Four,Two"
android:id="@+id/textView15"
android:gravity="center_horizontal"
android:textSize="16dp"
android:layout_weight="0.37"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Four,Three"
android:id="@+id/textView16"
android:gravity="center_horizontal"
android:textSize="16dp"
android:layout_weight="0.20"
android:textColor="#ffffff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Four,Four"
android:id="@+id/textView17"
android:gravity="center_horizontal"
android:textSize="16dp"
android:layout_weight="0.15"
android:textColor="#ffffff" />
</LinearLayout>
程式碼結果截圖
3.2 RelativeLayout
相對佈局讓您能夠指定子物件彼此之間的相對位置(子物件 A 在子物件 B 左側)或子物件與父物件的相對位置(與父物件頂部對齊),自由度是最大的一種佈局。
<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.relativelayout.MainActivity"
android:background="#090505">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Red"
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:padding="3dp"
android:background="#ff0000"
android:textSize="25dp"
android:gravity="center_horizontal"
android:layout_toLeftOf="@+id/textView4"
android:layout_toStartOf="@+id/textView4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Orange"
android:id="@+id/textView2"
android:padding="3dp"
android:background="#ff7700"
android:textSize="25dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Yellow"
android:id="@+id/textView3"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:padding="3dp"
android:background="#ffd500"
android:textSize="25dp"
android:gravity="center_horizontal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Green"
android:id="@+id/textView4"
android:layout_marginTop="50dp"
android:padding="3dp"
android:background="#1eff00"
android:textSize="25dp"
android:gravity="center_horizontal"
android:layout_below="@+id/textView"
android:layout_toLeftOf="@+id/textView2"
android:layout_toStartOf="@+id/textView2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Blue"
android:id="@+id/textView5"
android:layout_alignTop="@+id/textView4"
android:layout_centerHorizontal="true"
android:padding="3dp"
android:background="#001eff"
android:textSize="25dp"
android:gravity="center_horizontal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Indigo"
android:id="@+id/textView6"
android:padding="3dp"
android:background="#9000ff"
android:textSize="25dp"
android:gravity="center_horizontal"
android:layout_alignTop="@+id/textView5"
android:layout_toRightOf="@+id/textView2"
android:layout_toEndOf="@+id/textView2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Violet"
android:id="@+id/textView7"
android:layout_below="@+id/textView5"
android:layout_marginTop="48dp"
android:padding="3dp"
android:background="#ff00b7"
android:textSize="25dp"
android:gravity="center_horizontal"
android:layout_toLeftOf="@+id/textView3"
android:layout_alignLeft="@+id/textView4"
android:layout_alignStart="@+id/textView4" />
</RelativeLayout>
程式碼結果截圖
3.3 TableLayout
顯示滾動的單列列表,在手機的設定裡基本就是使用這種佈局。
<TableLayout 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:stretchColumns="1"
tools:context="com.example.tablelayout.MainActivity"
android:background="#080404">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Open..."
android:layout_column="1"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#fefefe" />
<TextView
android:text="Ctrl-O"
android:layout_column="2"
android:padding="3dp"
android:textSize="20dp"
android:gravity="right"
android:textColor="#ffffff" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Save..."
android:layout_column="1"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
<TextView
android:text="Ctrl-S"
android:layout_column="2"
android:padding="3dp"
android:textSize="20dp"
android:gravity="right"
android:textColor="#ffffff" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Save As..."
android:layout_column="1"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
<TextView
android:text="Ctrl-Shift-S"
android:padding="3dp"
android:textSize="20dp"
android:gravity="right"
android:textColor="#ffffff" />
</TableRow>
<View
android:layout_height="3dp"
android:background="#ffffff" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="X"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
<TextView
android:text="Import..."
android:layout_column="1"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="X"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
<TextView
android:text="Export"
android:layout_column="1"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
<TextView
android:text="Ctrl-E"
android:padding="3dp"
android:textSize="20dp"
android:gravity="right"
android:textColor="#ffffff" />
</TableRow>
<View
android:layout_height="3dp"
android:background="#ffffff" />
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Exit"
android:layout_column="1"
android:padding="3dp"
android:textSize="20dp"
android:textColor="#ffffff" />
</TableRow>
</TableLayout>
程式碼結果截圖
4.總結
XML佈局是一種非常簡單實用的佈局,在一些簡單的應用開發中合理的使用XML佈局可以更快的完成佈局的實現。
作者:黃毅
原文連結:點選這裡