Activity課件1第二章 Android應(yīng)用界面（2.1-2.3）

Android應(yīng)用界面本章學(xué)習(xí)目標(biāo)

熟悉Android的View及ViewGroup類

掌握常用的布局

掌握Android開發(fā)當(dāng)中常用的UI組件

用戶注冊(cè)實(shí)例2.1View概念A(yù)ndroid應(yīng)用的絕大部分UI組件都放在android.widget包和android.view包中。多個(gè)視圖組件（View）可以存放在一個(gè)視圖容器（ViewGroup）中，該容器可以與其他視圖組件共同存放在另一個(gè)視圖容器當(dāng)中，但是一個(gè)界面文件必須有且僅有一個(gè)容器作為根節(jié)點(diǎn)。Android應(yīng)用的界面都是由View和ViewGroup對(duì)象構(gòu)建的，ViewGroup繼承了View類，也可以當(dāng)成普通的View來使用，但主要還是當(dāng)成容器來使用。2.1View概念圖2-1圖形用戶界面層次圖Android推薦使用XML布局文件來定義用戶界面，因此所有組件都提供了兩種方式來控制組件的行為：在XML布局文件中通過XML屬性進(jìn)行控制。在JAVA程序代碼中通過調(diào)用方法進(jìn)行控制。實(shí)際上不管使用哪種方式，它們控制Android用戶界面行為的本質(zhì)是一樣的。大部分時(shí)候，控制UI組件的XML屬性還有對(duì)應(yīng)的方法。2.1View概念View類常用的XML屬性、相關(guān)方法及簡(jiǎn)要說明如表2-1所示XML屬性方法說明android:alpha setAlpha（float）設(shè)置透明度android:backgroundsetBackgroundResource(int)設(shè)置背景android:idsetId(int)設(shè)置組件標(biāo)識(shí)android:visibilitysetVisibility(int)設(shè)置組件是否可見android:keepScreenOnsetkeepScreenOn(boolean)設(shè)置組件是否會(huì)強(qiáng)制手機(jī)屏幕一直打開Android:longClickablesetLongClickable(boolean)設(shè)置是否響應(yīng)長單擊事件android:scaleX setScaleX(float)設(shè)置水平方向的縮放比android:scaleY setScaleY(float)設(shè)置垂直方向的縮放比android:scrollX

設(shè)置水平方向的滾動(dòng)偏移android:scrollY

設(shè)置垂直方向的滾動(dòng)偏移XML屬性方法說明

android：scrollbars定義該組件滾動(dòng)時(shí)顯示幾個(gè)滾動(dòng)條，該屬性支持如下屬性值：none:滾動(dòng)條不顯示horizontal:顯示水平滾動(dòng)條vertical:顯示垂直滾動(dòng)條android:rotationXsetRotationX(float)設(shè)置繞X軸旋轉(zhuǎn)的角度android:rotationYsetRotationY(float)設(shè)置繞Y軸旋轉(zhuǎn)的角度

android:scrollbarStyle

setScrollBarStyle(int)設(shè)置滾動(dòng)條風(fēng)格和位置，該屬性具有如下屬性值：insideOverlayinsideInsetoutsideOverlayoutsideInsetandroid:tag

為該組件設(shè)置一個(gè)字符串類型的tag,通過View的getTag（）獲取該字符串a(chǎn)ndroid:fadeScrollbarssetScrollbarFadingEnabled(boolean)當(dāng)不使用該組件的滾動(dòng)條時(shí)，是否淡出顯示滾動(dòng)條android:contentDescriptionsetContentDescription(CharSequence)設(shè)置該組件的內(nèi)容描述信息android:focusablesetFocusable(boolean)設(shè)置該組件是否可以得到焦點(diǎn)android:onClick

設(shè)置組件的單擊事件android:paddingsetPadding(int,int,int,int)在組件的四邊設(shè)置填充區(qū)域XML屬性方法說明android:transformPivotXsetPivotX(float)設(shè)置該組件旋轉(zhuǎn)時(shí)旋轉(zhuǎn)中心的X坐標(biāo)android:transformPivotYsetPivotY(float)設(shè)置該組件旋轉(zhuǎn)時(shí)旋轉(zhuǎn)中心的Y坐標(biāo)android:translationXsetTranslationX(float)設(shè)置該組件在X方向上的位移android:translationYsetTranslationY(float)設(shè)置該組件在Y方向上的位移android:translationZsetTranslationZ(float)設(shè)置該組件在Z(垂直屏幕)方向上的位移android:soundEffectsEnabledsetSoundEffectsEnabled(boolean)設(shè)置該組件被單擊時(shí)，是否使用音效android:minHeightsetMinimumHeight(int)該組件的最小高度android:minWidthsetMinimumWidth(int)該組件的最小寬度對(duì)于View類而言，它是所有UI組件的父類，因此它包含的XML屬性和方法是所有組件都可以使用的。2.2布局管理器2.2.1組件的寬高單位幾個(gè)常用的寬高單位：px:代表像素，即在屏幕中可以顯示的最小元素單元。分辨率越高的手機(jī)，屏幕的像素點(diǎn)就越多。因此，如果使用px來設(shè)置控件的大小，在分辨率不同的手機(jī)上控件的顯示出來的大小也不一樣。pt:代表磅數(shù)，一般pt都會(huì)作為字體的單位來顯示。pt和px的情況相似，在不同分辨率的手機(jī)上，用pt作為字體單位顯示的大小也不一樣。dp:代表密度無關(guān)像素，又稱dip，使用dp的好處是在無論屏幕的分辨率如何總能顯示相同的大小，一般使用dp作為控件與布局的寬高單位。sp:代表可伸縮像素，采用與dp相同的設(shè)計(jì)理念，設(shè)置字體大小時(shí)使用。2.2.2

布局管理器在Android開發(fā)當(dāng)中，界面的設(shè)計(jì)是通過布局文件實(shí)現(xiàn)的，布局文件采用XML的格式，每個(gè)應(yīng)用程序默認(rèn)會(huì)創(chuàng)建一個(gè)activity_main.xml布局文件，它是應(yīng)用啟動(dòng)的界面。2.2.3創(chuàng)建和使用布局文件1.

打開項(xiàng)目，找到layout文件夾，右鍵點(diǎn)擊new—XML—LayoutXmlFile,然后就會(huì)創(chuàng)建一個(gè)新的布局文件。2.添加組件，新創(chuàng)建的布局文件可以通過在xml文件中添加組件，也可以通過在圖形用戶界面上進(jìn)行直接的拖拉操作，然后再次通過代碼進(jìn)行調(diào)整，這種方式減少了用戶的代碼編寫量。2.2.4布局的類型一個(gè)優(yōu)秀的布局設(shè)計(jì)對(duì)UI界面起到重要的作用，在Android中常用布局主要有7種，分別是：線性布局（LinearLayout）相對(duì)布局（RelativeLayout）表格布局（TableLayout）網(wǎng)格布局（GridLayout）絕對(duì)布局（AbsoluteLayout）幀布局（FrameLayout）扁平化布局（ConstraintLayout）（1）線性布局（LinearLayout）線性布局是Android中較為常用的布局方式，它使用<LinearLayout>標(biāo)簽，主要分為水平線性布局和垂直線性布局。<LinearLayout

xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"

android:orientation="horizontal"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button1"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button2"/><Button…./></LinearLayout>（2）相對(duì)布局（RelativeLayout）相對(duì)布局分為相對(duì)于容器和控件兩種。為了更好的確定布局中控件的位置，相對(duì)布局提供了很多屬性，具體如表2-2所示。屬性聲明功能描述android:layout_alignParentLeft是否跟父布局左對(duì)齊android:layout_alignParentRight是否跟父布局右對(duì)齊android:layout_alignParentTop是否跟父布局頂部對(duì)齊android:layout_alignParentBottom是否跟父布局底部對(duì)齊android:layout_toRightOf在指定控件右邊android:layout_toLeftOf在指定控件左邊android:layout_above在指定控件上邊android:layout_below在指定控件下邊android:layout_alignBaseline與指定控件水平對(duì)齊android:layout_alignLeft與指定控件左對(duì)齊android:layout_alignRight與指定控件右對(duì)齊android:layout_alignTop與指定控件頂部對(duì)齊android:layout_alignBottom與指定控件底部對(duì)齊<?xmlversion="1.0"encoding="utf-8"?><RelativeLayout

xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".relativelayout.MainActivity"><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_marginTop="100dp"android:layout_marginLeft="50dp"android:text="Button1"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"

android:layout_toRightOf="@+id/button"

android:layout_below="@+id/button"android:layout_marginTop="15dp"android:text="Button2"/></RelativeLayout>（3）表格布局（TableLayout）表格布局的方式不同于前面兩種，表格布局就是讓控件以表格的形式來排列控件，只要將控件放在單元格中，控件就可以整齊地排列。表格布局使用<TableLayout>標(biāo)簽，行數(shù)由TableRow對(duì)象控制，每行可以放多個(gè)控件，列數(shù)由最寬的單元格決定，假設(shè)第一行有兩個(gè)控件，第二行有3個(gè)控件，那么這個(gè)表格布局就有3列。在控件中使用layout_column屬性指定具體的列數(shù)，該屬性的值從0開始，代表第一列。<TableLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"

android:stretchColumns="1"><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"

android:layout_column="0"android:text="Button1"/></TableRow><TableRowandroid:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"

android:layout_column="1"/></TableRow></TableLayout>表格布局設(shè)計(jì)了兩行，每行一個(gè)按鈕的布局，使用android:stretchColumns=“1”，屬性拉伸第二列，android:layout_column=“0”屬性表示顯示在第一列中。需要注意的是，TableRow不需要設(shè)置寬度和高度，其寬度一定是自動(dòng)填充容器，高度根據(jù)內(nèi)容改變。但對(duì)于TableRow的其他控件來說，是可以設(shè)置寬度和高度的。（4）網(wǎng)格布局（GridLayout）網(wǎng)格布局是由Gridlayout所代表，它是Android4.0新增的布局管理器，因此需要在4.0之后的版本才能使用。它的作用類似與table,它把整個(gè)容器劃分為rows×columns個(gè)網(wǎng)格，每個(gè)網(wǎng)格可以放置一個(gè)組件。GridLayout提供了setRowCount(int)和setColumnCount(int)方法來控制該網(wǎng)格的行數(shù)量和列數(shù)量。<?xmlversion="1.0"encoding="utf-8"?>

<GridLayoutxmlns:android="/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:columnCount="4"

android:rowCount="4"

android:orientation="horizontal">

<Buttonandroid:text="/"

android:layout_column="3"/>

<Buttonandroid:text="1"/>

<Buttonandroid:text="2"/>

<Buttonandroid:text="3"/>

<Buttonandroid:text="*"/>

<Buttonandroid:text="4"/>

<Buttonandroid:text="5"/>

<Buttonandroid:text="6"/>

<Buttonandroid:text="-"/>

<Buttonandroid:text="7"/>

<Buttonandroid:text="8"/>

<Buttonandroid:text="9"/>

<Buttonandroid:text="+"

android:layout_gravity="fill"

android:layout_rowSpan="2"/>

<Buttonandroid:text="0"/>

<Buttonandroid:text="="

android:layout_gravity="fill"

android:layout_columnSpan="2"/>

</GridLayout>（5）幀布局（FrameLayout）幀布局是Android布局中最簡(jiǎn)單的一種，幀布局為每個(gè)加入其中的控件創(chuàng)建了一塊空白區(qū)域。采用幀布局的方式設(shè)計(jì)界面時(shí)，只能在屏幕左上角顯示一個(gè)控件，如果添加多個(gè)控件，這些會(huì)依次重疊在屏幕左上角顯示，且會(huì)透明顯示之前的文本。<FrameLayout

xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button10"android:layout_width="314dp"android:layout_height="315dp"android:text="Button1"/><Buttonandroid:id="@+id/button11"android:layout_width="216dp"android:layout_height="140dp"android:text="Button2"/><Buttonandroid:id="@+id/button12"android:layout_width="103dp"android:layout_height="wrap_content"android:text="Button3"/></FrameLayout>（6）絕對(duì)布局（AbsoluteLayout）絕對(duì)布局是通過指定x、y坐標(biāo)來控制每一個(gè)控件的位置，放入該布局的控件需要通過android:layout_x和android:layout_y兩個(gè)屬性指定其在屏幕上確切的位置。把屏幕看作一個(gè)坐標(biāo)軸，左上角為（0，0），往屏幕下方為y正半軸，右方為x正半軸。<AbsoluteLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"

android:layout_x="71dp"

android:layout_y="25dp"android:text="Button"/></AbsoluteLayout>（7）扁平化布局（ConstraintLayout）ConstraintLayout是AndroidStudio2.2中主要的新增功能之一。在傳統(tǒng)的Android開發(fā)當(dāng)中，界面基本都是靠編寫XML代碼完成的，雖然AndroidStudio也支持可視化的方式來編寫界面，但是操作起來并不方便，而ConstraintLayout就是為了解決這一現(xiàn)狀而出現(xiàn)的。它和傳統(tǒng)編寫界面的方式恰恰相反，ConstraintLayout非常適合使用可視化的方式來編寫界面，但并不太適合使用XML的方式來進(jìn)行編寫。當(dāng)然，可視化操作的背后仍然還是使用的XML代碼來實(shí)現(xiàn)的，只不過這些代碼是由AndroidStudio根據(jù)用戶的操作自動(dòng)生成的。<?xmlversion="1.0"encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:id="@+id/lay_root"android:layout_width="match_parent"android:layout_height="mat