第3章android圖形用戶界面設(shè)計(jì)

主講人：溫春水1用戶界面設(shè)計(jì)原則2用戶界面設(shè)計(jì)核心概念RelativeLayout…3LinearLayout課程目錄45創(chuàng)建View的2種方式UIStyle指交互設(shè)計(jì)風(fēng)格，是當(dāng)用戶與操作系統(tǒng)、界面進(jìn)行交互的時(shí)候所得到的直觀體驗(yàn)UI

Style的目的UI

Style使用方式StyleGuide影響范圍迎合用戶的心理模型界面設(shè)計(jì)簡單可操作減少用戶的學(xué)習(xí)負(fù)擔(dān)

整個(gè)系統(tǒng)具有自適應(yīng)性Android應(yīng)用中的每個(gè)界面都是一個(gè)ActivtyActivity上展現(xiàn)的都是Android系統(tǒng)中的可視化組件Android中的任何可視化組件都是從

android.view.View繼承View類有很多子類，分為三種布局類（Layout）：繼承于ViewGroup類視圖容器類（View

Container）：繼承于ViewGroup類視圖類：繼承于View類ViewViewGroupTextView視視視視視GridViewListView布布視可以使用XML創(chuàng)建ViewXML文件放置在res/layout下使用XML可以在Activity類中使用代碼創(chuàng)建View使用代碼Android圖形用戶界面上的組件可以使用XML文件創(chuàng)建XML文件中使用屬性指定組件的屬性，如id等。XML文件放置在res/layout下<?xml

version="1.0"

encoding="UTF-8"?><LinearLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"

xmlns:android="

"><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="確定"/></LinearLayout>每一個(gè)視圖組件都是一個(gè)View類型的對(duì)象可以在代碼中，使用視圖類的構(gòu)造方法，創(chuàng)建View對(duì)象可以調(diào)用View對(duì)象的setXXX方法，設(shè)置其屬性public

void

onCreate(Bundle

savedInstanceState){

super.onCreate(savedInstanceState);TextView

tv=new

TextView(this);

tv.setText("您好！Android!");setContentView(tv);}實(shí)際應(yīng)用中，常常需要在代碼中獲得XML中創(chuàng)建的View對(duì)象，進(jìn)一步對(duì)其進(jìn)行操作可以使用Activity類的findViewById獲得XML中的View對(duì)象Button

button=(Button)this.findViewById(R.id.button1);button.setText("我以前是確定按鈕");Android系統(tǒng)中提供了幾種常用的布局方式，每種布局方式都對(duì)應(yīng)API中一個(gè)類LinearLayout：線性布局（較多）FrameLayout：層疊布局RelativeLayout：相對(duì)布局（較多）TableLayout：表格布局AbsoluteLayout：坐標(biāo)布局LinearLayout為線性布局，將組件按照屬性設(shè)置的水平

或垂直方向按順序排列,排列方式，從左到右，從上到下。平均分配<LinearLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width=“fill_parent”android:orientation=“vertical”

xmlns:android=“

”></LinearLayout><LinearLayout

xmlns:android=""android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal"

><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"

/><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"

/></LinearLayout>線性布局可以分為水平和垂直方向的布局，可以通過android:orientation來定義方向：android:orientation=“horizontal”表示水平方向，

android:orientation=“vertical”表示垂直方向。android:layout_width表示控件的寬度，android_layout_height表示控件的高度，其屬性值有wrap_content、fill_parent、match_parent三種。其中，wrap_content表示填滿父控件的空白，fill_parent表示大小剛好足夠顯示當(dāng)前控件里的內(nèi)容，match_parent與fill_parent作用是相同的。android:layout_weight表示控件的權(quán)重，描述了控件所占的比例有多大。所有的視圖都有l(wèi)ayout_weight值，layout_weight值中所占的比率而定。RelativeLayout是相對(duì)布局，相對(duì)布局指的是某個(gè)組件的位置是相對(duì)于它所對(duì)應(yīng)的組件的位置與LinearLayout比較：無權(quán)重，無方向<RelativeLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"xmlns:android="

"><Button

android:id="@+id/button1"android:gravity="center_vertical"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text=“按鈕1”/></RelativeLayout>默認(rèn)top/left對(duì)齊:android:layout_alignParentLeft=“true”android:layout_alignParentRight="true“與父元素的的左邊對(duì)齊TextView父元素是RelativeLayout水平居中垂直居中相對(duì)于父元素完全居中貼緊父元素的下邊緣貼緊父元素的左邊緣貼緊父元素的右邊緣第一類:屬性值為true或falseandroid:layout_centerHorizontalandroid:layout_centerVerticalandroid:layout_centerInparentandroid:layout_alignParentBottomandroid:layout_alignParentLeftandroid:layout_alignParentRightandroid:layout_alignParentTop貼緊父元素的上邊緣android:layout_alignWithParentIfMissing如果對(duì)應(yīng)的兄弟元素找不到的話就以父元素做參照物第二類：屬性值必須為id的引用名“@id/id-name”android:layout_belowandroid:layout_aboveandroid:layout_toLeftOfandroid:layout_toRightOf在某元素的下方

在某元素的的上方在某元素的左邊

在某元素的右邊android:layout_alignTopandroid:layout_alignLeftandroid:layout_alignBottomandroid:layout_alignRight本元素的上邊緣和某元素的的上邊緣對(duì)齊本元素的左邊緣和某元素的的左邊緣對(duì)齊本元素的下邊緣和某元素的的下邊緣對(duì)齊本元素的右邊緣和某元素的的右邊緣對(duì)齊第三類：屬性值為具體的像素值，如30dip，40pxandroid:layout_marginBottomandroid:layout_marginLeftandroid:layout_marginRightandroid:layout_marginTop離某元素底邊緣的距離離某元素左邊緣的距離離某元素右邊緣的距離離某元素上邊緣的距離FrameLayout稱為層布局，將組件顯示在屏幕的左上角，后面的組件覆蓋前面的組件<FrameLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"

xmlns:android="

"><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按鈕1"/><Button

android:id="@+id/button2"android:layout_height="wrap_content"android:layout_width=“wrap_content”android:text=“按鈕2”/>/FrameLayout>TableLayout是表格布局，使用TableRow指定一行，每個(gè)組件表示一列<TableLayout

android:layout_height="fill_parent"android:layout_width="fill_parent"

xmlns:android="

"><TableRow><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按鈕1"/><Button

android:id="@+id/button2"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按鈕2"/></TableRow></TableLayout>AbsoluteLayout是絕對(duì)布局管理器，指的是指定組件的左上角絕對(duì)坐標(biāo)來指定組件的布局<AbsoluteLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"

xmlns:android="

"><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:layout_x="0px"android:layout_y=“0px”android:text=