在上篇文章中，我們得到了一個可以執行的RSS閱讀器應用。它展示了一列Android樣式的條目，當你點選它們的時候，還會 彈出一個詳細頁面。在這篇文章裡，我們將設計應用了material design原則的app，同時也嘗試使用appcompat包來讓它向後相容。
顯而易見，第一步我們需要新增新版本的appcompat包給我們的build.gradle：
mobile/build.gradle
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
apply plugin: 'com.android.application' android { compileSdkVersion 21 buildToolsVersion "21.0.2" defaultConfig { applicationId "com.stylingandroid.materialrss" minSdkVersion 14 targetSdkVersion 21 versionCode 1 versionName "1.0" } buildTypes { release { runProguard 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" } |
讓我們開始應用material deign來完成我們將要使用的配色方案吧。在一連串漣漪（Ripples）上，我們能看到要使用Android-L預覽中的配色方案是很容易的，使用 appcompat也很容易。無論我們想要使用的主題和僅在Android-L預覽版或Lollipop中才可以繼承到的Material主題有多不一 樣。對於執行在Lollipop上的裝置來說，這都一樣，因為它們都需要使用appcompat主題 ——appcompat在後臺檢測OS版本，據此採用相應的機制。
因此我們需要修改自己的app主題：
res/values/styles.xml
|
1 2 3 4 5 6 7 8 |
<resources]]> <!-- Base application theme. --]]> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/sa_green</item> <item name="colorPrimaryDark">@color/sa_green_dark</item> <item name="colorAccent">@color/sa_green</item> </style> </resources]]> |
其中一件值得注意的事就是，元件並不包含在Android的parent主題型別或item的name屬性的名稱空間中。這是因為它們已經被定義在了我們app的預設名稱空間中，所以沒必要將用到的元件指定為系統元件，因為appcompat包已經被匯入了。
我們也需要配置顏色引數：
res/values/colors.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources]]]]> <color name="text_dark"]]]]>#333333</color> <color name="text_medium"]]]]>#555555</color> <color name="text_light"]]]]>#888888</color> <color name="sa_green"]]]]>#1E9618</color> <color name="sa_green_dark"]]]]>#146310</color> </resources]]]]> |
我們要刪除之前定義的v21的樣式。正如之前提到的，appcompat包會為我們進行管理樣式，我們不需要分離它。
如果我們在Lollipop裝置上執行，那麼一起看起來都很好——我們有我們自己配色的主題：
但如果我們執行在KitKat上，就會有兩個問題：
Firstly, the status bar is still showing black. There’s nothing that we can do about this because extending our colour scheme outside of our app and on to system controls is simply not supported pre-Lollipop, so we’ll just have to live with it.
首先，狀態列任然會顯示成黑色。但是我們什麼都做不了，因為Lollipop之前的系統不支援配色方案樣式擴充套件到app外部以及系統控制元件。我們能做的只有接受它了。
第二個問題是ActionBar不顯示！之前我們使用appcompat主題的時候毫無疑問它是存在的。由於想要應用這個支援ActionBar的主題，我們的Activity必須繼承自ActionBarActivity。對於當前繼承自Activity 的FeedDetailView來說，這是很簡單的事，但是在繼承自ListActivity的FeedListActivity上需要多做一點工作：
FeedListActivity.java
|
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 |
public class FeedListActivity extends ActionBarActivity implements FeedConsumer { private static final String DATA_FRAGMENT_TAG = DataFragment.class.getCanonicalName(); private ListView listView; private FeedAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(android.R.layout.list_content); listView = (ListView) findViewById(android.R.id.list); listView.setOnItemClickListener(new ItemClickListener()); DataFragment dataFragment = (DataFragment) getFragmentManager().findFragmentByTag(DATA_FRAGMENT_TAG); if (dataFragment == null) { dataFragment = (DataFragment) Fragment.instantiate(this, DataFragment.class.getName()); dataFragment.setRetainInstance(true); FragmentTransaction transaction = getFragmentManager().beginTransaction(); transaction.add(dataFragment, DATA_FRAGMENT_TAG); transaction.commit(); } } public void setFeed(Feed feed) { adapter = new FeedAdapter(this, feed.getItems()); listView.setAdapter(adapter); } @Override public void handleError(String message) { Toast.makeText(this, message, Toast.LENGTH_LONG).show(); } private class ItemClickListener implements AdapterView.OnItemClickListener { @Override public void onItemClick(AdapterView<?]]> parent, View view, int position, long id) { Intent detailIntent = new Intent(FeedListActivity.this, FeedDetailActivity.class); Item item = adapter.getItem(position); detailIntent.putExtra(FeedDetailActivity.ARG_ITEM, item); startActivity(detailIntent); } } } |
本質上，我們必須手動的實現一些從ListActivity得到的功能，但這又不是很有必要。
最後一件值得一提的事：對比更老的Android版本，在我們使用appcompat包時，Lollipop可以在條目被選中時提供不同的視覺反饋。在Lollipop上，我們得到一個很好看的漣漪效果（就像我們討論的——連串波紋（Ripples））：Youtube視訊
但是在KitKat我們得到一個標準的ListView點選動畫：Youtube視訊
原因僅僅在於Ripples不包含在appcompat包中，並且Lollipop中引入了渲染執行緒。如果沒有渲染執行緒，就不能很好的播放其他的動畫，因此Ripples沒有被包含在內。
在下一篇文章中，我們將要使用appcompat包向後相容Material design。
原始碼可以從這裡下載。