安卓Material Design（3）

698 查看

在上一篇文章中，我们使用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.*里的样式来替代上面的：

<?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包到我们的依赖关系里：

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容器里：

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

这篇文章的源码从这里可得到