第五講：用戶界面 View（一）

有一個(gè)姑涼 · 發(fā)表于 2013-8-28 16:19

669

本節(jié)內(nèi)容：

什么是View
常用Layout介紹：FrameLayout, LinearLayout

點(diǎn)此下載：

二、常用Layout介紹

ViewGroup是個(gè)特殊的View，它繼承于Android.view.View。它的功能就是裝載和管理下一層的View對(duì)象或ViewGroup對(duì)象，也就說(shuō)他是一個(gè)容納其它元素的的容器。ViewGroup是布局管理器（layout）及view容器的基類。 ViewGroup中，還定義了一個(gè)嵌套類ViewGroup.LayoutParams。這個(gè)類定義了一個(gè)顯示對(duì)象的位置、大小等屬性，view通過LayoutParams中的這些屬性值來(lái)告訴父級(jí)，它們將如何放置。

ViewGroup是一個(gè)抽象類，所以真正充當(dāng)容器的是他的子類們。我們?cè)谶@里將介紹幀布局FrameLayout，線性布局LinearLayout，絕對(duì)布局AbsoluteLayout，相對(duì)布局RelativeLayout，表格布局TableLayout等幾個(gè)常用布局，大約要分3講講完。

1、幀布局 FrameLayout：

是最簡(jiǎn)單的一個(gè)布局對(duì)象。在他里面的的所有顯示對(duì)象愛你過都將固定在屏幕的左上角，不能指定位置，但允許有多個(gè)顯示對(duì)象，只是后一個(gè)會(huì)直接覆蓋在前一個(gè)之上顯示，會(huì)把前面的組件部分或全部擋住。下圖的例子里，F(xiàn)rameLayout中放了3個(gè)ImageView組件，第一個(gè)是藍(lán)色的，第二個(gè)是綠色的，第三個(gè)是樹狀圖（透明的png格式）。ImageView就相當(dāng)于Html中的img標(biāo)簽，接下來(lái)會(huì)講到這個(gè)組件。

下面看一個(gè)FrameLayout的例子：

<?xml version=”1.0″ encoding=”utf-8″?><FrameLayout android:id=”@+id/FrameLayout01″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/res/android”><ImageView android:id=”@+id/ImageView01″ android:src=”@drawable/p1″
android:layout_width=”wrap_content” android:layout_height=”wrap_content”></ImageView><ImageView android:id=”@+id/ImageView02″ android:src=”@drawable/p2″
android:layout_width=”wrap_content” android:layout_height=”wrap_content”></ImageView><ImageView android:id=”@+id/ImageView03″ android:src=”@drawable/p3″
android:layout_width=”wrap_content” android:layout_height=”wrap_content”></ImageView></FrameLayout>

復(fù)制代碼

完整的代碼在PPT附帶的目錄中，需要的朋友可以留言向我索要。

(FrameLayout的顯示效果)

2、線性布局 LinearLayout：

線性布局是所有布局中最常用的類之一，也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls類的父類。LinearLayout可以讓它的子元素垂直或水平的方式排成一行（不設(shè)置方向的時(shí)候默認(rèn)按照垂直方向排列）。

下面看一個(gè)LinearLayout的例子：別被例子的長(zhǎng)度嚇住，仔細(xì)看一下其實(shí)就是一個(gè)LinearLayout中放5個(gè)TextView標(biāo)簽而已，TextView相當(dāng)于Html標(biāo)簽中的Label。

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:gravity=”center_horizontal”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”給小寶寶起個(gè)名字：”
android:textSize=”20px”
android:textColor=”#0ff”
android:background=”#333″/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”遙遙是男孩的小名”
android:textSize=”20px”
android:textColor=”#0f0″
android:background=”#eee”
android:layout_weight=”3″
/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”瑤瑤是女孩的小名”
android:textColor=”#00f”
android:textSize=”20px”
android:background=”#ccc”
android:layout_weight=”1″
/><TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”海因是男孩的大名”
android:textColor=”#f33″
android:textSize=”20px”
android:background=”#888″
android:layout_weight=”1″
/>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”海音是女孩的大名”
android:textColor=”#ff3″
android:textSize=”20px”
android:background=”#333″
android:layout_weight=”1″
/>
</LinearLayout>

復(fù)制代碼

下圖是顯示效果：

好吧下次再講。

› 智能家居 / NAS / 路由 / 開發(fā) / 音響 › TV應(yīng)用開發(fā)交流

第五講：用戶界面 View（一）

第五講：用戶界面 View（一）