Android學習--佈局檔案解析
學習過Android的基本內容之後開始對Android的ui開發進行學習,主要是對佈局的瞭解和對樣式主題的應用。
Android的佈局檔案是XML的格式,而且該檔案在res/layout資料夾中 。而佈局檔案可以用圖形化的視圖表示,在Graphical Layout中可以檢視到。
Android的佈局主要有以下幾個型別:相對佈局、線性佈局、表格佈局、網格佈局、幀佈局、絕對佈局這幾個方式。不同的佈局會有不同的視覺效果。接下來簡單學習下各個佈局的設計程式碼:
相對佈局的設計程式碼:(RelativeLayout)
<RelativeLayout xmlns:android="******/apk/res/android" //標籤
xmlns:tools="******/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity'>
<Button //控制元件1
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" //頂部
android:layout_centerHorizontal="true" //居中
android:layout_marginTop="260dp"
//設定距離
android:text="Button1"/>
<Button //控制元件2
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/button1" //對齊
android:layout_marginBottom="100dp" //距離
android:layout_toRightOf="@+id/button1" //右邊屬性
android:text="Button2"/>
</RelativeLayout>
這樣就定義了一個相對的佈局,程式碼中的margin用於定義元件間的距離。android:margin用於定義控制元件四周的邊距。而與margin類似的padding則是對內邊距的設定,需要注意使用的範圍和情況才可。在你設定控制元件和佈局的時候需要注意使用“match_parent”或者是“wrap_content”的佈局格式,需要注意避免將空間的寬度和高度設計為固定的值。
線性佈局的設計程式碼:(LinearLayout)<?xml version="1.0" encoding="'utf-8"?>
<LinearLayout xmlns:android="******/apk/res/android" //標籤
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button //控制元件1
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button //控制元件2
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button //控制元件3
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
線性佈局的設計主要分為兩種形式:水平線性佈局(horizontal)以及垂直線性佈局(vertical)。在預設選擇的時候是水平顯示佈局(horizontal)。 表格佈局的設計程式碼:(TableLayout) <?xml version="1.0" encoding="'utf-8"?><TableLayout xmlns:android="******/apk/res/android" //標籤
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns=“2”>
<TableRow> //物件
<Button //控制元件1
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0" //第一列
android:text="Button1"/>
<Button //控制元件2
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="Button2"/>
</TableRow>
<TableRow>
<Button //控制元件3
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="Button3"/>
<Button //控制元件4
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="Button4"/>
</TableRow><TableRow>
<Button //控制元件5
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="Button5"/>
</TableRow>
網格佈局的設計程式碼:(GridLayout)
<?xml version="1.0" encoding="'utf-8"?><GridrLayout xmlns:android="******/apk/res/android" //標籤
android:layout_width="wrap_parent"
android:layout_height="wrap_parent"
android:gravity=“center”
android:columnCount="4"
android:orientation="horizontal">
<Button
android:layout_column="3"
android:text="/"/>
<Button android:text="1"/>
<Button android:text="2"/>
<Button android:text="3"/>
<Button android:text="4"/>
<Button android:text="5"/>
<Button android:text="6"/>
<Button android:text="7"/>
<Button android:text="8"/>
<Button android:text="9"/>
<Button android:layout_gravity="fill"
androoid:alyout_rowSpan="3"//佔用3行
android:text="+"/>
<Button
android:layout_columnSpan="2"//佔用2列
android:layout_gravity="fill"
android:text="0" />
<button android:text="00" />
<Button
android:layout_columnSpan="3"//佔用3列
android:layout_gravity="fill"
android:text="=" />
</GridLayout>
這個網格佈局是Android4.0新增的佈局,用一組無限細的直線將繪圖區域分成行列和單元。android:layout_column表示按鈕在第幾列,android:layout_rowSpan表示控制元件佔用幾行,android:layout——columnSpan表示控制元件佔幾列。
幀佈局的設計程式碼:(FrameLayout)
<FrameLayout xmlns:android="******/apk/res/android" //標籤
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button //控制元件1
android:id="@+id/button1"
android:layout_width="294dp"
android:layout_height="294dp"
android:text="Button1"/>
<Button //控制元件2
android:id="@+id/button2"
android:layout_width="218dp"
android:layout_height="214dp"
android:text="Button2"/>
<Button //控制元件3
android:id="@+id/button3"
android:layout_width="156dp"
android:layout_height="143dp"
android:text="Button3"/>
</FrameLayout>幀佈局的設計是為每一個加入其中的控制元件建立一個空白的區域,稱之為幀。如果新增多個控制元件則會按照順序在螢幕的左上角進行顯示,並且會透明顯示之前的看控制元件文字。常見的刮刮卡就是通過幀佈局來實現的!
絕對佈局的設計程式碼:(AbsoluteLayout)
<AbsoluteLayout xmlns:android="******/apk/res/android" //標籤
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="50dp"
android:layout_y="50dp"
android:text="Button1"/>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="200dp"
android:layout_y="150dp"
android:text="Button2"/>
</AbsoluteLayout>絕對佈局的設計形式主要在於通過指定x,y的座標來控制每一個控制元件的具體位置,實際工程中不提倡這個佈局。