AndroidStudio項(xiàng)目開(kāi)發(fā)教程-從基礎(chǔ)入門到樂(lè)享開(kāi)發(fā) 課件 第二章 Android界面設(shè)計(jì)

第2章 Android界面設(shè)計(jì)安卓·入門與開(kāi)發(fā)目錄2.1UI設(shè)計(jì)的相關(guān)概念2.2 控制UI界面2.3 布局管理器2.4 購(gòu)物商城的布局設(shè)計(jì)2.1UI設(shè)計(jì)的相關(guān)概念2.1.1View2.1.2ViewGroup2.1UI設(shè)計(jì)的相關(guān)概念2.1.1 ViewView在Android中可以理解為視圖。它是占據(jù)在屏幕上的一個(gè)矩形區(qū)域。負(fù)責(zé)提供組件繪制和事件處理的方法。如果把Android界面比喻成窗戶，那么每塊玻璃都相當(dāng)于一個(gè)View。View類是所有的UI組件的基類。XML屬性方法描述android:backgroundsetBackGroundResource(int)設(shè)置背景，其屬性值為Drawable資源或者顏色值。android:clickablesetClickable(boolean)設(shè)置是否響應(yīng)單擊事件，其屬性值為boolean型的true或者false。android:elevationsetElevation（float）AndroidAPI21新添加的，用于設(shè)置Z軸深度，其屬性值為帶單位的有效浮點(diǎn)數(shù)。2.1UI設(shè)計(jì)的相關(guān)概念2.1.1 View目錄2.1UI設(shè)計(jì)的相關(guān)概念2.1.1View2.1.2ViewGroup2.1UI設(shè)計(jì)的相關(guān)概念2.1.2 ViewGroupViewGroup在Android中代表容器。如果還用窗戶來(lái)比喻的話，ViewGroup就相當(dāng)于窗戶框，用于控制玻璃的安放。ViewGroup類繼承View類，它是View類的拓展，是用來(lái)容納其它組件的容器，但是由于ViewGroup是一個(gè)抽象類，所以在實(shí)際應(yīng)用中通常是給使用ViewGroup的子類來(lái)作為容器，例如，在2.3節(jié)中將要介紹的布局管理器。?ViewGroup.LayoutParams類ViewGroup.LayoutParams類封裝了布局的位置、高度和寬度等信息。它支持android：layout-height和android：layout-width兩個(gè)XML屬性，它們的屬性值，可以使用精確的數(shù)值，也可以使用FILL-PARENT(表示與父容器相同)、Match-parent（表示與父容器相同，需要API8或以上版本才支持）或者Warp-content（表示包裹其自身的內(nèi)容）指定。?ViewGroup.MarginLayoutParams類ViewGroup.MarginLayoutParams類用于控制其子組件的外邊距。XML屬性描述android:layout_marginBotton設(shè)置底外邊距。android:layout_marginEnd設(shè)置結(jié)束邊距。android_marginLeft設(shè)置左外邊距。android:layout_marginRight設(shè)置右外邊距。android:layout_marginStart設(shè)置開(kāi)始邊距。android:layout_marginTop設(shè)置頂外邊距。2.1.2 ViewGroup2.1UI設(shè)計(jì)的相關(guān)概念

在Android中，所有的UI界面都是由View和ViewGroup類及其子類組合而成的。在ViewGroup類中，除了可以包含普通的View類外，還可以再次包含ViewGroup類。實(shí)際上，這使用了Composite(組合)設(shè)計(jì)模式。2.1UI設(shè)計(jì)的相關(guān)概念2.1.2 ViewGroup目錄2.1UI設(shè)計(jì)的相關(guān)概念2.2 控制UI界面2.3 布局管理器2.4 購(gòu)物商城的布局設(shè)計(jì)2.2 控制UI界面2.2.1使用XML布局文件控制UI界面2.2.2開(kāi)發(fā)自定義的View類使用XML布局文件控制UI界面可以分為以下兩個(gè)關(guān)鍵步驟。（1）

在Android應(yīng)用的res\layout目錄下創(chuàng)建XML布局文件，該布局文件的名稱可以采用任何符合Java命名規(guī)則的文件名。（2）

在Activity中使用以下Java代碼顯示XML文件中布局的內(nèi)容。SetContentview（R.layout.activity_main）；在上面的代碼中，activity_main是XML布局文件的文件名。2.2.1 使用XML布局文件控制UI界面2.2控制UI界面一般情況下，開(kāi)發(fā)Android應(yīng)用程序的UI界面，都不直接使用View類和ViewGroup類，而是使用這兩個(gè)類的子類。例如，要顯示一個(gè)圖片，就可以使用View類的子類ImageView。雖然Android提供了很多繼承自View類的UI組件但是在實(shí)際開(kāi)發(fā)時(shí)，還會(huì)出現(xiàn)不滿足需要的情況。這時(shí)，就可以通過(guò)繼承View類來(lái)開(kāi)發(fā)自己的組件。開(kāi)發(fā)自定義的View組件大致分為以下3個(gè)步驟。（1）創(chuàng)建一個(gè)繼承android.view.View類的Java類，并且重寫構(gòu)造方法。(注意：在自定義的View類中，至少需要寫一個(gè)構(gòu)造方法。)（2）根據(jù)需要重寫其他的方法。被重寫法可以通過(guò)下面的方法找到。（3）在項(xiàng)目的活動(dòng)中，創(chuàng)建并實(shí)例化自定義View類，然后將其添加到布局管理器中。在代碼中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇Generate菜單項(xiàng)，將打開(kāi)如圖2.5的快捷菜單，在該菜單中選擇OverrideMethods菜單項(xiàng)，將打開(kāi)如圖2.6所示的選擇進(jìn)行覆蓋或?qū)崿F(xiàn)的方法對(duì)話框，在該對(duì)話框的列表中顯示出可以被重寫的方法。只需要選中相應(yīng)的方法，并單擊ok按鈕，AndroidStudio將自動(dòng)重寫指定的方法。通常情況下，不需要重寫全部的方法。2.2.2 開(kāi)發(fā)自定義的View類2.2控制UI界面2.52.6目錄2.1UI設(shè)計(jì)的相關(guān)概念2.2 控制UI界面2.3 布局管理器2.4 購(gòu)物商城的布局設(shè)計(jì)?

相對(duì)布局管理器（RelativeLayout）：通過(guò)相對(duì)定位的方式來(lái)控制組件的擺放位置。?線性布局管理器（LinearLayout）：是指在垂直或水平方向上依次擺放組件。?

幀布局管理器(FrameLayout)：沒(méi)有任何定位方式，默認(rèn)情況下，所有的組件都會(huì)擺放在容器的左上角，逐個(gè)覆蓋。?表格布局管理器（TableLayout）：使用表格的方式按行，列來(lái)擺放組件。?絕對(duì)布局管理器(AbsoluteLayout)：通過(guò)絕對(duì)(x、y坐標(biāo))的方式控制組件的擺放位置。在Android中，每個(gè)組件在窗體中都有具體的位置和大小，在窗體中擺放各種組件時(shí)，很難進(jìn)行判斷。不過(guò)，使用Android布局管理器可以很方便地控制各組件的位置和大小。Android提供了以下5種布局管理器：2.3布局管理器目錄2.1UI設(shè)計(jì)的相關(guān)概念2.2 控制UI界面2.3 布局管理器2.4 購(gòu)物商城的布局設(shè)計(jì)2.3 布局管理器2.3.1相對(duì)布局管理器2.3.2線性布局管理器2.3.3幀布局管理器2.3.4 表格布局管理器2.3.5 網(wǎng)格布局管理器2.3.6 布局管理器的嵌套2.1UI設(shè)計(jì)的相關(guān)概念2.3.1 相對(duì)布局管理器相對(duì)布局管理器是通過(guò)相對(duì)定位的方式讓組件出現(xiàn)在布局的任何位置。例如，圖2.8所示的界面就是采用相對(duì)布局管理器來(lái)進(jìn)行布局的，在界面中先放置組件A，然后放置組件B,讓其位于組件A的下方，再放置組件C，讓其位于組件A的下方且位于組件B的右側(cè)。在Android中，可以在XML布局文件中定義相對(duì)布局管理器，也可以使用Java代碼來(lái)創(chuàng)建。推薦在XML布局文件中定義相對(duì)布局管理器。在XML布局文件中，定義相對(duì)布局管理器可以使用<RelativeLayout>標(biāo)記，其基本的語(yǔ)法格式如下：在上面的語(yǔ)法中，<RelativeLayout>為起始標(biāo)記．</RelativeLayout>為結(jié)束標(biāo)記。在起始標(biāo)記中的xmlns:android為設(shè)置XML命名空間的屬性，其屬性值為固定寫法。RelativeLayout常用XML屬性如表所示。XML屬性描述android:gravity用于設(shè)置布局管理器中各子組件的對(duì)齊方式。android:ignoreGravity用于指定哪個(gè)組件不受gravity屬性的影響2.3.1 相對(duì)布局管理器2.3布局管理器第一類:屬性值為true或falseandroid:layout_alignPraentBottom

設(shè)置在父控件的底部android:layout_alignPraentEnd

將控件的結(jié)束位置與父控件的結(jié)束位置緊貼android:layout_alignPraentStart

將控件的起始位置從父控件的起始位置開(kāi)始android:layout_alignPraentLeft

設(shè)置在父控件的左部android:layout_alignPraentRight

設(shè)置在父控件的右邊android:layout_alignPraentTop

將控件的上邊與父控件緊貼android:layout_centerInParent

放在父控件的中心（水平居中+垂直居中）android:layout_centerVertical

設(shè)置垂直居中android:layout_centerHorizontal

設(shè)置水平居中2.3.1 相對(duì)布局管理器2.3布局管理器android:layout_alignBaseLine

將給定id的控件的位置作基線，然后讓兩個(gè)空間在同一條線上android:layout_alignBottom

將當(dāng)前控件的底部匹配給定控件的底部android:layout_alignLeft

將當(dāng)前控件的左邊匹配給定控件的左邊android:layout_alignEnd

將當(dāng)前控件的底部匹配給定控件的底部android:layout_alignRight

將當(dāng)前控件的右邊與給定控件的右邊匹配android:layout_alignStart

將當(dāng)前控件的起始部分與給定控件的起始部分對(duì)齊android:layout_alignTop

將當(dāng)前控件的上邊與給定控件的上邊對(duì)齊android:layout_above

將當(dāng)前控件放在指定控件的上方android:layout_below

將當(dāng)前控件放在指定控件的下方android:layout_toLeftOf

將當(dāng)前控件放在指定控件的左邊android:layout_toRightOf

將當(dāng)前控件放在指定控件的右方android:layout_toStartOf

將當(dāng)前控件放在指定控件的前邊2.3.1 相對(duì)布局管理器2.3布局管理器第二類：屬性值必須為id的引用名“@id/id-name”android:layout_margin

指定當(dāng)前控件的邊距

android:layout_marginBottom

指定當(dāng)前控件底部與外部控件之間的距離android:layout_marginLeft

指定當(dāng)前控件左邊緣與外部控件之間的距離android:layout_marginRight

指定當(dāng)前控件右邊緣與外部控件之間的距離android:layout_marginTop

指定當(dāng)前控件頂部與外部控件之間的距離2.3.1 相對(duì)布局管理器2.3布局管理器第三類：屬性值為具體的像素值，如30dip，40px目錄2.3 布局管理器2.3.1相對(duì)布局管理器2.3.2線性布局管理器2.3.3幀布局管理器2.3.4 表格布局管理器2.3.5 網(wǎng)格布局管理器2.3.6 布局管理器的嵌套線性布局管理器是將放入其中的組件按照垂直或水平方向來(lái)布局，也就是控制放入其中的組件橫向排列或縱向排列。其中，縱向排列的稱為垂直線性布局管理器，如圖2.9所示；橫向排列的稱為水平線性布局管理器，如圖2.10所示。在垂直線性布局管理器中，每一行只能放一個(gè)組件，而在水平線性布局管理器中每一列中只能放一個(gè)組件。另外，Android的線性布局管理器中的組件不會(huì)換行，當(dāng)組件一個(gè)挨著一個(gè)排列到窗體的邊緣后，剩下的組件將不會(huì)被顯示出來(lái)。圖2.9垂直線性布局管理器圖2.10水平線性布局管理器2.3.2 線性布局管理器2.3布局管理器在XML布局文件中定義線性布局管理器，需要使用<LinearLayout>標(biāo)記，其基本的語(yǔ)法格式如下：LinearLayout常用XML屬性如表所示。XML屬性描述android:orientation設(shè)置線性布局的方向，將值設(shè)置為horizontal表示水平排列，設(shè)置為vertical表示垂直排列，默認(rèn)為horizontal。android:layout_weight指定當(dāng)前控件在LinearLayout中所占的權(quán)重。2.3.2 線性布局管理器2.3布局管理器目錄2.3 布局管理器2.3.1相對(duì)布局管理器2.3.2線性布局管理器2.3.3幀布局管理器2.3.4 表格布局管理器2.3.5 網(wǎng)格布局管理器2.3.6 布局管理器的嵌套在幀布局管理器中，每加入一個(gè)組件都將創(chuàng)建一個(gè)空白的區(qū)域，通常稱為一幀，默認(rèn)情況下，這些幀都會(huì)被放在屏幕的左上角，即幀布局是從屏幕的左上角（0,0）坐標(biāo)點(diǎn)開(kāi)始布局。多個(gè)組件層疊排序，后面的組件覆蓋前面的組件，如圖2.11所示。2.3.5 網(wǎng)格布局管理器2.3布局管理器圖2.11幀布局管理器在XML布局文件中定義幀布局管理器，需要使用<FrameLayout>標(biāo)記，其基本的語(yǔ)法格式如下：FrameLayout常用XML屬性如下表所示。XML屬性描述android:layout_gravity設(shè)置在父控件中顯示的位置。android:foreground設(shè)置前景圖像。android:foregroundGravity設(shè)置前景圖像顯示的位置。2.3.3 幀布局管理器2.3布局管理器目錄2.3 布局管理器2.3.1相對(duì)布局管理器2.3.2線性布局管理器2.3.3幀布局管理器2.3.4 表格布局管理器2.3.5 網(wǎng)格布局管理器2.3.6 布局管理器的嵌套2.3.4 表格布局管理器表格布局管理器與常見(jiàn)的表類似，它以行、列的形式來(lái)管理放入其中的UI組件，如圖2.12所示。表格布局管理器使用<TableLayout>標(biāo)記定義，在表格布局管理器中，可以添加多個(gè)<TableRow>標(biāo)記，每個(gè)<TableRow>標(biāo)記占用一行。由于<TableRow>標(biāo)記也是容器，所以在該標(biāo)記中還可添加其他組件，在<TableRow>標(biāo)記中，每添加一個(gè)組件，表格就會(huì)增加一列。在表格布局管理器中，列可以被隱藏；也可以被設(shè)置為伸展的，從而填充可利用的屏幕空間；還可以設(shè)置為強(qiáng)制收縮，直到表格匹配屏幕大小。2.3布局管理器圖2.12表格布局管理器在XML布局文件中定義表格布局管理器的基本語(yǔ)法格式如下：TableLayout繼承了LinearLayout，因此它完全支持LinearLayout所支持的全部XML屬性，此外，TableLayout還支持如表所示的XML屬性。XML屬性描述android:collapseColumns設(shè)置要隱藏的列的列序號(hào)（序號(hào)從0開(kāi)始），多個(gè)列序號(hào)用逗號(hào)“，”分隔。android:shrinkColumns設(shè)置可收縮的列的列序號(hào)（序號(hào)從0開(kāi)始），多個(gè)列序號(hào)用逗號(hào)“，”分隔。android:stretchColumns設(shè)置可伸展的列序號(hào)（序號(hào)從0開(kāi)始），多個(gè)列序號(hào)用逗號(hào)“，”分隔。2.3.4 表格布局管理器2.3布局管理器目錄2.3 布局管理器2.3.1相對(duì)布局管理器2.3.2線性布局管理器2.3.3幀布局管理器2.3.4 表格布局管理器2.3.5 網(wǎng)格布局管理器2.3.6 布局管理器的嵌套網(wǎng)格布局管理器是在Android4.0版本中提出的，使用GridLayout表示。在網(wǎng)格布局管理器中，屏幕被虛擬的細(xì)線劃分成行、列和單元格，每個(gè)單元格放置一個(gè)組件，這個(gè)組件也可以跨行或跨列擺放，如圖2.13所示。圖2.13網(wǎng)格布局管理器示意圖2.3.5 網(wǎng)格布局管理器2.3布局管理器在XML布局文件中，定義網(wǎng)格布局管理器可使用<GridLayout>標(biāo)記，其基本的語(yǔ)法格式如下：GridLayout常用的XML屬性如表所示。XML屬性描述android:columnCount設(shè)置網(wǎng)格最大列數(shù)android:rowCount設(shè)置網(wǎng)格最大行數(shù)android:orientationGridLayout中子元素的布局方向android:alignmentModealignBounds：對(duì)齊子視圖邊界alignMargins：對(duì)齊子視距內(nèi)容，默認(rèn)值android:columnOrderPreserved使列邊界顯示的順序和列索引的順序相同，默認(rèn)是trueandroid:rowOrderPreserved使行邊界顯示的順序和行索引的順序相同，默認(rèn)是trueandroid:useDefaultMargins沒(méi)有指定視圖的布局參數(shù)時(shí)使用默認(rèn)的邊距，默認(rèn)值是false2.3.5 網(wǎng)格布局管理器2.3布局管理器目錄2.3 布局管理器2.3.1相對(duì)布局管理器2.3.2線性布局管理器2.3.3幀布局管理器2.3.4 表格布局管理器2.3.5 網(wǎng)格布局管理器2.3.6 布局管理器的嵌套在進(jìn)行用戶界面設(shè)計(jì)時(shí)，很多時(shí)候只通過(guò)一種布局管理器很難實(shí)現(xiàn)想要的界面效果，這時(shí)就得將多種布局管理器混合使用，即布局管理器的嵌套。在實(shí)現(xiàn)布局管理器的嵌套時(shí)，只需要記住以下幾點(diǎn)原則即可：根布局管理器必須包含xmlns屬性。在一個(gè)布局文件中，最多只能有一個(gè)根布局管理器。如果想要使用多個(gè)布局管理器，就需要使用一個(gè)根布局管理器將它們括起來(lái)。不能嵌套太深。如果嵌套太深，則會(huì)影響性能，會(huì)降低頁(yè)面的加載速度。2.3.6 布局管理器的嵌套2.3布局管理器目錄2.1UI設(shè)計(jì)的相關(guān)概念2.2 控制UI界面2.3 布局管理器2.4 購(gòu)物商城的布局設(shè)計(jì)2.4 購(gòu)物商城的布局設(shè)計(jì)2.2.1使用XML布局文件控制UI界面2.2.2開(kāi)發(fā)自定義的View類訪問(wèn)購(gòu)物商城APP時(shí)，首先進(jìn)入的就是商城主框架頁(yè)面。主框架頁(yè)面主要分為如圖2.14所示兩部分，一部分是界面切換區(qū)，另一部分是底部切換欄。其中，界面切換區(qū)通過(guò)幀布局管理器(FrameLayout)來(lái)實(shí)現(xiàn)；底部切換欄采用包含另一個(gè)布局文件bottombar_layout.xml來(lái)實(shí)現(xiàn)。2.4購(gòu)物商城的布局設(shè)計(jì)2.4.1 商城首頁(yè)布局在后臺(tái)MainActivity.java文件中修改MainActivity的onCreate方法，更改加載布局的id為fragment_home。@Override

protectedvoidonCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

//setContentView(R.layout.activity_main);

setContentView(R.layout.fragment_home);

}2.4.1 商城首頁(yè)布局2.4購(gòu)物商城的布局設(shè)計(jì)2.4.1 商城首頁(yè)布局2.4購(gòu)物商城的布局設(shè)計(jì)目錄2.4 購(gòu)物商城的布局設(shè)計(jì)2.4.1商城