1.Android UI 元素簡介
Android使用xml檔案進行布局。在布局檔案中展現了一些UI元素。
1.Android.view.View（視圖）
View是最基礎的一個類，幾乎所有的進階UI元件都是繼承View類，如TextView，EditText，Button...。一個視圖（View）在螢幕上占據了一個矩形區域，它負責渲染這塊矩形區域，也可以處理這塊區域發生的事件，并且可以設定這塊區域是否可見，是否可以擷取焦點等。
2.Adroid.view.ViewGroup（視圖容器）
View的容器，負責對這些view布局，并且允許嵌套。這是一個抽象類。他的實作類有：a)LinearLayout進行水準或垂直布局。将元素進行線性的布局。b)RelativeLayout進行相對布局。根據元素的相對位置布局。注意的是，出于性能考慮，位置隻能計算一次，是以，如果控件A依 賴B ，那麼B必須在A的前面。c)FrameLayout 窗體布局，所有元素都防止在螢幕左上方，如果有多個元素，将重疊。
3.LayoutParameter（布局參數）
決定View的顯示屬性，比如長度、寬度、位置。
2.控件的布局
案例：
使用linearLayout布局
Android應用程式UI設計(1)_布局
布局檔案為：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/bt_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/frameLayout"
/>
<Button
android:id="@+id/bt_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/relativeLayout"
/>
<Button
android:id="@+id/bt_3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/linearLayoutANDrelativeLayout"
/>
<Button
android:id="@+id/bt_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/tableLayout"
/>
</LinearLayout>
使用FrameLayout布局
Android應用程式UI設計(1)_布局
布局檔案為：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/photo"
android:src="@drawable/meinv"
android:contentDescription="@string/meinv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</FrameLayout>
linearLayout和RelativeLayout并用（視圖容器的嵌套）
Android應用程式UI設計(1)_布局
布局檔案和Activity類代碼
Left.xml
<?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"
android:background="#000000"
>
<TextView
android:id="@+id/tv_left_1"
android:text="@string/left_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/tv_left_2"
android:text="@string/left_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tv_left_1"
/>
</RelativeLayout>
Right.xml
<?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"
android:background="#ffffff"
>
<TextView
android:id="@+id/tv_right_1"
android:text="@string/right_1"
android:layout_width="fill_parent"
android:layout_height="50dip"
/>
<TextView
android:id="@+id/tv_right_2"
android:text="@string/right_2"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_below="@id/tv_right_1"
/>
</RelativeLayout>
Activity代碼
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//執行個體化一個線性視圖容器對象
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.HORIZONTAL);
setContentView(layout);
//執行個體化一個inflater對象，這個對象可以把xml解析成View
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//使用inflater把xml布局檔案解析稱View
RelativeLayout left = (RelativeLayout)inflater.inflate(R.layout.left, null);
RelativeLayout right = (RelativeLayout)inflater.inflate(R.layout.right, null);
//執行個體化一個布局參數對象
RelativeLayout.LayoutParams layoutParameter = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
//向視圖容器中添加視圖（在此處是視圖容器，屬于嵌套）
//可見，除了在布局檔案中對activity布局之外，也完全可以在activity類中布局
layout.addView(left,100,100);
layout.addView(right,layoutParameter);
}
relativeLayout
Android應用程式UI設計(1)_布局
布局檔案為：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#888888"
android:padding="10dip"
>
<TextView
android:id="@+id/tv_input_name"
android:text="@string/input_name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<EditText
android:id="@+id/et_name"
android:background="@android:drawable/editbox_background"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:hint="@string/input"
android:layout_below="@id/tv_input_name"
/>
<Button
android:id="@+id/bt_input_name_cancel"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/cancel"
android:layout_below="@id/et_name"
android:layout_alignParentRight="true"
android:layout_marginRight="10dip"
/>
<Button
android:id="@+id/bt_input_name_ok"
android:layout_below="@id/et_name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/ok"
android:layout_toLeftOf="@id/bt_input_name_cancel"
android:layout_alignTop="@id/bt_input_name_cancel"
android:layout_marginRight="10dip"
/>
</RelativeLayout>
TableLayout
Android應用程式UI設計(1)_布局
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
>
<TableRow >
<TextView
android:text="@string/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<EditText
android:hint="@string/input"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow >
<TextView
android:text="@string/password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<EditText
android:hint="@string/input"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow >
<Button
android:text="@string/ok"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Button
android:text="@string/cancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>