走着官方的教程入门Material Design（一）

又到期末了，学习下Google的材料设计。写下此文记录自己的同时，分享给需要的同学，若发现文中有什么问题和不对，欢迎指出

使用 Material Design 创建新应用

首先需要使用材料主题

如果是在5.0及以上的系统，可以直接使用材料主题。否则，就需要做5.0之前系统的兼容

引用Google官方的话:

您可对您的应用进行配置，使应用能够在支持它的设备上使用材料主题，并且能够在运行早期版本 Android 的设备上还原至早期版本的主题

具体操作就是:

1. 定义备用样式 style和v-21的style
2. 提供备用布局 xx布局.xml和v-21的xx布局.xml
3. 使用支持内容库 使用v7支持库

定义备用样式

1. 定义一个从 res/values/styles.xml 中的早期版本主题（例如 Holo）继承的主题。

2. 定义一个从 res/values-v21/styles.xml 中的材料主题继承且拥有相同名称的主题。

3. 在清单文件中将此主题设置为您的应用主题。

    //5.0以上系统使用的主题(res\values-v21文件夹中)
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <!-- Customize your theme here. -->            
    </style>
   
    //5.0以下系统使用的主题(res\values文件夹中)
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
    </style>
   

提供备用布局

Google是这样说的

您可在res/layout-v21/内创建用于 Android 5.0（API 级别 21）的布局文件，同时也可在res/layout/内创建用于早期版本 Android 的备用布局文件。

例如，res/layout/my_activity.xml是res/layout-v21/my_activity.xml的备用布局。

为避免代码重复，请在res/values/内定义您的风格，在res/values-v21/内为新 API 修改风格，以及使用风格继承（即：在res/values/内定义基础风格，然后在res/values-v21/内继承这些风格）。

具体操作如下:

1. 像平时一样在layout目录里新建布局文件( 例: activity_main.xml )

2. 在里面书写布局属性(例如: 新建一个TextView )

    <TextView        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="5dp"
        android:text="@string/app_name"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
   

可以看出5.0以上的效果除了两者的ActionBar有所不同，其余没有明显差别

现在给TextView加上Material Design新增的视图静态高度属性: elevation (ps:还要一个动画用的动态高度转换)

android:elevation="20dp"

加上之后，AS就会提示我们该属性只能使用在5.0(Api 21)系统之上

于是按着AS的提示来，Ctrl+Enter,在layout-v21文件夹复写该布局文件，然后把

    android:elevation="20dp"

移到v-21布局文件里

为了看出加了elevation之后的效果，我们还需要给TextView加个简单的背景轮廓(shape).

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="@android:color/black" />
</shape>

两者布局

//layout文件夹中 activity_main
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tv_back"
    android:padding="5dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    android:textSize="18sp" />

//layout-v21文件夹中 activity_main
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tv_back"
    android:elevation="15dp"
    android:padding="5dp"
    android:text="@string/app_name"
    android:textColor="@android:color/white"
    android:textSize="18sp" />

其实我们应该按照官方的将两者重复的属性写到样式(style)里复用,这里暂时就不了^_

比较两者

现在就能看出两者的区别了

使用V7支持库

前面的方式都没有使用V7支持库，在v-21文件夹（style和layout）中复写只是为了让应用能在5.0以下和5.0以上的系统正常运行，所以材料设计都只能显示在5.0以上的系统

//v7包Gradle依赖
compile 'com.android.support:appcompat-v7:21.0.+'

官方的V7包给下面这些组件提供了Material Design 风格，让材料设计在5.0以下的系统也能显示

• EditText
• Spinner
• CheckBox
• RadioButton
• SwitchCompat
• CheckedTextView

这些控件都在android.support.v7.widget.AppCompatView包下

//例如EditText
<android.support.v7.widget.AppCompatEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"        
    android:hint="@string/app_name"
    android:padding="5dp"   
    android:textSize="18sp" />

同时要在我们的主题(style)里加上这段颜色配置，因为AppCompatTextView默认是从colorAccent着色的

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/my_red</item>

效果图

以上只是小生简单的使用了Material Design。主要是为了熟悉要在应用中使用材料设计，需要注意的地方和正确方法。后面继续学习更加好看的材料设计^_