在上一篇文章中，我們使用appcompat包為我們的RSS閱讀器app做了配色方案。在這篇文章中，我們要看一下我們的文字樣式，也要看一下CardView。
只做了很少的宣傳（指的是Lollipop，而不是Material design本身）的Lollipop的Material主題和appcompat包中介紹了一些預定義的文字樣式。我們可以從預定義的樣式中選擇最恰當的來支援我們的想法，並且在不同的app中保持文字樣式的一致性。這些樣式的細節在Material Design Style reference（Material設計模式引用）。
實際上，應用這些文字樣式很簡單。在Lollipop中，許多TextAppearance樣式都再android.R.style.TextAppearance.Material.*裡，這些都相當於 Material Style風格的引用。使用appcompat也是很容易的——我們可以使用在R.style.TextAppearance.AppCompat.*裡的樣式來替代上面的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:attr/listPreferredItemHeight" android:orientation="vertical" android:paddingLeft="?android:attr/listPreferredItemPaddingLeft" android:paddingStart="?android:attr/listPreferredItemPaddingStart" android:paddingEnd="?android:attr/listPreferredItemPaddingEnd" android:paddingRight="?android:attr/listPreferredItemPaddingRight"> <TextView android:id="@+id/feed_item_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/margin" android:textColor="@color/text_dark" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:id="@+id/feed_item_description" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@color/text_medium" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> <TextView android:id="@+id/feed_item_date" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/margin" android:textColor="@color/text_light" android:gravity="end" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout> |
我們也需要在res/layout/feed_detail.xml，做同樣的事，但是我不想把它列在這，變化基本是一樣的。
下一件要考慮的事是在我們的佈局檔案中使用CardView 。CardView 是一個已經發布了相容包的功能元件，使用它可以很容易的在我們的app裡包含進Material cards。cardview相容包定義了一個新的必不可少的CardView元件，該元件和FrameLayout（實際上它是FrameLayout的子類）做一樣的事並且會渲染一個card-like大綱。
相容包會針對主系統的特點使用適用的控制元件——在Lollipop上陰影將使用正在研製的演算法來渲染，但是在Lollipop之前的裝置drawables控制元件將使用陰影特效來建立。支援陰影繪製的Lollipop上會有更好的使用者體驗，但在之前的舊裝置上看起來也不賴。
在2014的Droidcon London上，Nick Butcher 和 Chris Banes在他們的Papercraft討論中說，不要 over cardify 應用——只在適合的地方使用卡片。在這個專案裡，我覺得為我們的Listview使用卡片是不合適的，因為這些單獨的ListView條目本質上都是一種型別的資料。然而，在詳細檢視他有一個頭部區（header section），還有一個body去包含WebView裡的整篇文章，這些區域就可以拆分作為卡片。
首先，我們需要新增cardview包到我們的依賴關係裡：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
apply plugin: 'com.android.application' android { compileSdkVersion 21 buildToolsVersion "21.1.1" defaultConfig { applicationId "com.stylingandroid.materialrss" minSdkVersion 14 targetSdkVersion 21 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile 'com.mcxiaoke.volley:library:1.0.7' compile "com.android.support:appcompat-v7:21.0.0" compile "com.android.support:cardview-v7:21.0.0" } apply from: "${project(':').projectDir}/config/static_analysis.gradle" |
然後把佈局檔案裡已經存在的程式碼包含進CardView容器裡：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/feed_detail" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".FeedDetailFragment"> <android.support.v7.widget.CardView android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_margin="@dimen/outer_margin"> <LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical"> <TextView android:id="@+id/feed_detail_title" style="@style/TextAppearance.AppCompat.Title" android:textColor="@color/text_dark" android:layout_margin="@dimen/margin" android:layout_width="match_parent" android:layout_height="wrap_content" tools:text="Title"/> <TextView android:id="@+id/feed_detail_date" style="@style/TextAppearance.AppCompat.Caption" android:textColor="@color/text_light" android:layout_margin="@dimen/margin" android:gravity="end" android:layout_width="match_parent" android:layout_height="wrap_content" tools:text="Date"/> </LinearLayout> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" android:layout_marginTop="0dp" android:layout_marginLeft="@dimen/outer_margin" android:layout_marginBottom="@dimen/outer_margin" android:layout_marginRight="@dimen/outer_margin"> <WebView android:id="@+id/feed_detail_body" android:layout_height="match_parent" android:layout_width="match_parent" android:layout_margin="@dimen/margin" /> </android.support.v7.widget.CardView> </LinearLayout> |
完成了，讓我們看看在Lollipop裡看起來如何：
在Kitkat 它看起來也很好（形狀不同的裝置有不同的佈局——一臺Lollipop系統的Nexus9和一臺Kitkat系統的Nexus5）
在這篇文章裡，我們沒有用很龐大的處理程式碼就使用Material design模式完整的完成了我們的app。
在下一篇文章裡，我們將從表面上的UI切換到如何優化的幕後工作，要新增更多的Material 優點到我們的app裡
這篇文章的原始碼從這裡可得到