《Android系統(tǒng)設(shè)計(jì)與開發(fā)》課件-第13章

第13章高級UI-MaterialDesign簡介13.1立體界面13.2標(biāo)題欄13.3滑動菜單13.4懸浮按鈕13.5Snackbar——可以交互的提示工具13.6CardView13.7下拉刷新本章總結(jié)

13.1立體界面

MaterialDesign最明顯的改變在于它將界面從二維升到了三維。在Android5.0之前，對于UI顯示效果的設(shè)計(jì)大部分還停留在二維平面，即通過改變不同視圖的位置及動畫切換來提高界面的美感，雖然取得了不錯的效果，但由于設(shè)計(jì)開發(fā)人員面對的是二維視圖的設(shè)計(jì)，產(chǎn)品自然不會脫離這個框架。

MaterialDesign帶來了z軸，體現(xiàn)在視圖上就是elevation屬性，通過設(shè)置該值可以讓視圖體現(xiàn)出不同的高度。elevation可以通過在xml中設(shè)置屬性值來設(shè)置，也可以通過setElevation(float)方法來設(shè)置，一般采用直接在xml中設(shè)置，具體用法和設(shè)置組件寬高一樣。

實(shí)際設(shè)置如下：

13.2標(biāo)題欄

Toolbar是用來取代actionbar的組件，actionbar就是所有應(yīng)用的標(biāo)題欄，在MaterialDesign出現(xiàn)后，由于actionbar不能很好地與Materialdesign相融合，逐漸被拋棄，安卓推薦標(biāo)題欄使用Toolbar來顯示，Toolbar擁有actionbar的所有功能，并且能與MaterialDesign很好地結(jié)合。

打開這兩個文件后，首先看第一個AndroidManifest.xml文件，里面theme屬性值默認(rèn)為@style/AppTheme，這個指向的文件就是我們打開的第二個文件。所有的Android項(xiàng)目在新建時都有標(biāo)題欄，而標(biāo)題欄的默認(rèn)設(shè)置就是通過AppTheme屬性來設(shè)置的，AppTheme文件中規(guī)定了具體的各項(xiàng)屬性值，從<stylename="AppTheme"parent="Theme.AppCompat.Light.DarkActionBar">可以看出style的parent設(shè)置為了DarkActionbar。

上述代碼主要完成了ActionBar的隱藏和ToolBar的建立，首先將DarkActionBar改為NoActionBar，完成了ActionBar的隱藏，再在activity_main.xml中新建ToolBar，視圖的高度改為?attr/actionBarSize，背景設(shè)為colorPrimary，theme設(shè)為Dark.ActionBar。這里要弄明白兩個theme的區(qū)別，style中的theme是整個界面的風(fēng)格，為淺色的風(fēng)格，但標(biāo)題的風(fēng)格為白色時，不夠明顯，所以將ToolBar的風(fēng)格單獨(dú)設(shè)為深色，下面的popupTheme用來指定ToolBar中彈窗的風(fēng)格，兩者的顏色風(fēng)格不能一樣。

在AppTheme文件中只是隱藏了ActionBar，并沒有指定標(biāo)題欄要顯示的布局，那怎么將ToolBar顯示出來呢？這就需要通過修改MainActivity代碼來實(shí)現(xiàn)了，添加兩行代碼，具體如下：

Toolbartoolbar=(Toolbar)findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

首先找到ToolBar控件，然后調(diào)用setSupportActionBar(toolbar)，將toolBar傳入作為標(biāo)題欄。運(yùn)行程序，效果如圖13.1所示。

圖13.1標(biāo)題欄運(yùn)行程序，效果如圖13.2所示。點(diǎn)擊標(biāo)題欄中的圖片按鈕，會有對應(yīng)的Toast提示信息，讀者可以自行測試。

圖13.2帶菜單欄的標(biāo)題欄

13.3滑動菜單

現(xiàn)在許多手機(jī)App中都使用到了滑動菜單，它可以通過隱藏一些菜單選項(xiàng)實(shí)現(xiàn)節(jié)省屏幕空間的目的，同時又具有非常炫酷的動畫效果，是MaterialDesign中非常推薦的做法。下面通過示例來學(xué)習(xí)下滑動菜單的實(shí)現(xiàn)。

在布局文件中，用DrawerLayout將所有控件包圍起來，DrawerLayout是谷歌提供的一個控件，也是一個布局，借助它可以簡單方便地實(shí)現(xiàn)滑動菜單的功能。此外用CoordinatorLayout替代了FrameLayout，CoordinatorLayout類似于FrameLayout，只是它能自動調(diào)整布局中內(nèi)容的位置，具體效果可以在程序運(yùn)行后查看。TextView用來顯示滑動菜單中的內(nèi)容，layout_gravity屬性設(shè)為start，用以指定滑動菜單滑出的方向，start會根據(jù)語言習(xí)慣來自動判定，因?yàn)闈h字的閱讀順序是從左至右，所以此處滑動菜單會在左側(cè)。運(yùn)行程序，效果如圖13.3所示。

圖13.3滑動菜單

在日常使用的App中，滑動菜單既可以通過滑動顯示，也可以通過點(diǎn)擊菜單按鈕顯示，開發(fā)人員一般都會兩者兼用?；瑒诱{(diào)用已經(jīng)實(shí)現(xiàn)，接下來實(shí)現(xiàn)菜單按鈕調(diào)用。

代碼中，首先找到DrawerLayout布局對象，然后使用getSupportActionBar()方法獲得ActionBar實(shí)例，通過ActionBar的setDisplayHomeAsUpEnabled顯示菜單按鈕、setHomeAsUpIndicator給菜單按鈕設(shè)置圖片，最后onOptionsItemSelected()判斷按下的按鈕，當(dāng)按下android.R.id.home菜單按鈕時通過opendrawer方法將滑動DrawerLayout布局對象的菜單顯示出來。

有讀者會問，我們并沒有給菜單按鈕創(chuàng)建布局文件，更沒有設(shè)置id，怎么能直接引用呢？其實(shí)在調(diào)用setDisplayHomeAsUpEnabled時就已經(jīng)創(chuàng)建了一個菜單按鈕，之后再調(diào)用setHomeAsUpIndicator來設(shè)置呈現(xiàn)的圖片就完成了菜單按鈕的完整創(chuàng)建。另外要注意的是openDrawer()中的GravityCompat

.START用來保持與布局文件中滑動菜單彈出方向一致。

重新運(yùn)行程序，效果如圖13.4所示，菜單已經(jīng)顯示在標(biāo)題欄中，點(diǎn)擊菜單欄，滑動菜單會彈出，讀者可自行測試。

圖13.4帶菜單按鈕的滑動菜單

上述三部分代碼具有很強(qiáng)的調(diào)用關(guān)系，在activity_main.xml中新建了一個NavigationView對象，app:menu="@menu/nav_menu"和app:headerLayout="@layout/nav_header"分別調(diào)用了前面的兩個xml文件。nav_header.xml中的控件及屬性都是比較常見的，在nav_menu.xml中，<groupandroid:checkableBehavior="single">這一行將下面的控件設(shè)定為一組，android:checkableBehavior="single"表明這一組中只能單選。

以上首先獲取NavigationView對象，然后通過setNavigationItemSelectedListener()函數(shù)設(shè)置默認(rèn)選中打電話選項(xiàng)，給NavigationView對象設(shè)置監(jiān)聽事件，監(jiān)聽事件中并沒有寫相應(yīng)的邏輯，只是當(dāng)有內(nèi)容被選中時，調(diào)用DrawerLayout的closeDrawers()方法關(guān)閉滑動菜單作為演示。

重新運(yùn)行程序，效果如圖13.5所示。

圖13.5NavigationView菜單

13.4懸浮按鈕

在MaterialDesign中引入了立面設(shè)計(jì)，使界面具有三維立體效果。下面介紹MaterialDesign中的三維立體效果，并通過示例來學(xué)習(xí)該屬性。首先完成activity_main.xml中的代碼

在activity_main.xml中添加一個FloatingActionButton，就是懸浮按鈕，然后設(shè)置它的id和寬高。它的layout_gravity屬性和滑動菜單的屬性值類似，bottom|end，bottom是設(shè)置了組件的位置在底部，end則會根據(jù)語言習(xí)慣調(diào)整左右。src屬性設(shè)置該控件的背景圖片，最后一個elevation屬性設(shè)置懸浮的高度，該值也可以不設(shè)置，系統(tǒng)識別到懸浮按鈕后會自動設(shè)置一個合適的懸浮高度給它。

運(yùn)行程序，點(diǎn)擊右下角的懸浮按鈕，效果如圖13.6所示，懸浮按鈕有明顯的3D效果，可以看到按鈕下面有陰影。

圖13.6懸浮按鈕

13.5Snackbar——可以交互的提示工具

在前面的Android學(xué)習(xí)中，多次使用Toast來進(jìn)行信息提示，Toast能夠及時給用戶反饋信息，又不會一直占用界面空間。但是使用Toast只能看到信息，卻不能做出相應(yīng)的反應(yīng)，可以說Toast是一個交互性不那么強(qiáng)的工具。但是如果用戶想要在看到提示信息后做出反應(yīng)呢？這就要用到可以交互的提示工具SnackBar。

SnackBar調(diào)用make()方法，方法中接收三個參數(shù)，第一個參數(shù)是傳入一個當(dāng)前界面的view，它的目的是通過傳入的view找到最外層的view，這里傳入形參v；第二個參數(shù)是提示信息；第三個參數(shù)是提示信息停留的時間?？梢钥吹絊nackBar與Toast的用法基本類似，只有第一個參數(shù)不同。接下來調(diào)用SnackBar的setAction方法，注意此處setAction和make是平行的方法，都屬于Snackbar。setAction方法接收的第一個參數(shù)是要顯示的信息，第二個參數(shù)是一個監(jiān)聽對象，類似于按鈕。然后在onClick()方法中寫具體的處理邏輯，此處直接調(diào)用Toast顯示信息。

重新運(yùn)行程序，點(diǎn)擊懸浮按鈕，交互提示效果如圖13.7和圖13.8所示。

圖13.7SnackBar演示1

圖13.8SnackBar演示2

以上兩個圖展示了SnackBar的交互方式，這里懸浮按鈕用來刪除數(shù)據(jù)，而SnackBar可以撤銷操作。首先點(diǎn)擊懸浮按鈕，界面下方彈出一行提示，詢問用戶是否撤銷操作，若點(diǎn)擊撤銷，那么會彈出Toast，提示已經(jīng)撤銷了操作。當(dāng)然這里只是演示，并沒有具體實(shí)現(xiàn)刪除數(shù)據(jù)和撤銷數(shù)據(jù)的邏輯，僅用信息提示來展現(xiàn)整個流程。SnackBar的make函數(shù)對應(yīng)的是第一個提示，setAction對應(yīng)的是可點(diǎn)擊的撤銷文字，點(diǎn)擊之后觸發(fā)setAction中第二個參數(shù)的監(jiān)聽事件，彈出Toast。

上面的演示看起來很順利，但是有一點(diǎn)讀者需注意到，就是在提示撤銷操作時，懸浮按鈕自動往上移了一點(diǎn)，這是由于13.4節(jié)在創(chuàng)建滑動菜單時將FramentLayout布局換成了coordinatorlayout，當(dāng)時介紹coordinatorlayout時說這個布局方式與FramentLayout作用一樣，但是它能自動調(diào)整布局內(nèi)的組件位置，這時就體現(xiàn)出它的作用了，感興趣的讀者可以將coordinatorlayout再換為FramentLayout看看效果，會發(fā)現(xiàn)提示和懸浮按鈕在同一水平線上。

13.6CardView

到目前為止，我們已經(jīng)可以設(shè)計(jì)出美觀的標(biāo)題欄、滑動菜單以及懸浮按鈕，但是界面顯示內(nèi)容部分區(qū)域還很空白。接下來完善一下這個區(qū)域的內(nèi)容顯示部分，前面學(xué)過的關(guān)于顯示大量內(nèi)容的控件是RecyclerView，但是僅用RecyclerView顯示內(nèi)容沒有立體感也不美觀，這里使用RecyclerView結(jié)合CardView來裝載顯示內(nèi)容。CardView實(shí)際上也是一個FrameLayout，但是它額外提供了圓角和陰影等效果，會有立體的感覺。

第一個是recycleview的依賴，第二個是cardView的依賴，第三個是一個開源的項(xiàng)目，能夠處理網(wǎng)絡(luò)上下載的高品質(zhì)圖片，使其與項(xiàng)目相匹配。后續(xù)用到時會再解釋該開源項(xiàng)目。

代碼中使用了CardView布局，為布局中的控件提供了圓角和陰影的效果。其中app:cardCornerRadius屬性設(shè)置圓角的弧度，elevation設(shè)置陰影的大小，不設(shè)置該值時會有默認(rèn)值，此處使用默認(rèn)值。ImageView中還有一個屬性android:scaleType="centerCrop"，用來設(shè)置圖片的填充方式，centerCrop表示圖片按原比例填入，超出的部分被裁剪掉。

代碼和第5章中講RecyclerView的適配器時基本一致，主要是新建一個內(nèi)部類ViewHolder，并且重寫onCreateViewHolder，onBindViewHolder，getItemCount等方法，不過在重寫onBindViewHolder方法時，采用了Glide對象填充照片，Glide的with方法接收上下文對象，然后調(diào)用load方法加載圖片的view對象，into方法確定填入的view對象。Glide對象的用法雖然很簡單，但它卻讓用戶可以自由地使用不同大小的圖片，而不用擔(dān)心內(nèi)存問題。

在MainActivity中首先定義了一個Animal數(shù)組用來存儲Animal對象，這個數(shù)組和initAnimal函數(shù)配合使用可以實(shí)現(xiàn)隨機(jī)顯示內(nèi)容，使得每次打開應(yīng)用時可以看到不同的內(nèi)容。GridLayoutManager是網(wǎng)格布局管理，用來管理生成布局的樣式，該對象的構(gòu)造函數(shù)接收兩個參數(shù)，第一個是調(diào)用的對象，第二個用來設(shè)置顯示的列數(shù)，這里設(shè)置為2列。

運(yùn)行程序，效果如圖13.9所示。

圖13.9CardView顯示

可以看到，顯示效果是出來了，但是感覺卻不美觀，界面上的圖片緊貼著屏幕上沿顯示，將ToolBar都遮住了。這是由于放置ToolBar以及CardView控件的父布局CoordinatorLayout造成的，這個布局在介紹懸浮按鈕時講過，它能夠自動調(diào)整內(nèi)部控件的位置，那為什么在這里卻沒有調(diào)整好呢？其實(shí)CoordinatorLayout功能雖然強(qiáng)大，但也沒到全能的地步，ToolBar和CardView都沒有指定位置就放到其中，它只能按照幀布局的規(guī)則將控件放在左上角，從而形成遮擋。為解決這個問題，需要借用另一個專門的工具：AppBarLayout，它能很好地解決這個問題。下面就通過AppBarLayout來解決本示例出現(xiàn)的問題。

使用AppBarLayout將ToolBar包圍，并且在RecyclerView中增加一個屬性：app:layout_behavior="@string/appbar_scrolling_view_behavior"，這個屬性指定了一個布局行為。然后在ToolBar中添加屬性：app:layout_scrollFlags="scroll|enterAlways|snap"，該屬性等看到效果圖再細(xì)講。

重新運(yùn)行程序，效果如圖13.10和圖13.11所示。

圖13.10AppBar效果圖1

圖13.11AppBar效果圖2

從效果圖中可以看到，AppBarLayout完成了和ToolBar的“和諧共處”，剛打開應(yīng)用時，ToolBar并沒有被遮擋，當(dāng)向上滑動時，發(fā)現(xiàn)ToolBar不見了，并且ToolBar的背景也移走了，這說明ToolBar被隱藏了。這種效果主要就是app:layout_scrollFlags="scroll|enterAlways|snap"屬性完成的，屬性值中的scroll表示向上滑動時，ToolBar也會滑動，并且會隱藏，enterAlways表示當(dāng)滑到最下面時，ToolBar會再次顯示，snap表示當(dāng)滑動到中間時，自行判斷ToolBar是隱藏還是顯示，這種顯示方式和正常應(yīng)用一樣，給用戶的體驗(yàn)會比較好。

13.7下拉刷新

在用手機(jī)瀏覽時經(jīng)常會通過向下滑動來刷新當(dāng)前頁面，這個作用其實(shí)非常的簡單，每次只在當(dāng)前頁面顯示一部分內(nèi)容，當(dāng)用戶刷新時，就將新的數(shù)據(jù)顯示到當(dāng)前頁面。下面通過示例學(xué)習(xí)該功能。

將需要刷新的內(nèi)容添加到SwipeRefreshLayout中，這里將RecyclerView控件移到刷新的布局中。刷新的布局比較簡單，現(xiàn)在需要實(shí)