安卓Material Design（2）

753 查看

在上篇文章中，我们得到了一个可以运行的RSS阅读器应用。它展示了一列Android样式的条目，当你点击它们的时候，还会弹出一个详细页面。在这篇文章里，我们将设计应用了material design原则的app，同时也尝试使用appcompat包来让它向后兼容。

显而易见，第一步我们需要添加新版本的appcompat包给我们的build.gradle：

mobile/build.gradle

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

<resources]]>

<!-- Base application theme. --]]>

<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

<?xml version="1.0" encoding="utf-8"?>

<resources]]]]>

</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

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。

源代码可以从这里下载。