使用Android Design Support Library创建一个Android Material Design

1. 概述

Material design提供了一套跨平台跨设备，涵盖视觉、触摸和交互的综合性设计指导。

你将会学到这些

- 如何使用Android Design Support Library

- 如何使用矢量图

- 如何运用 material design 到自己的Android app中

- material design中的关键组件和用法

- 使用主题和颜色去创建可触摸的空间和打印设计

- 提升导航功能有更好的实践

- 通过动画和触摸反馈来提升控件的意义

你需要：

- Android studio version 2.1+ & JDK8+

- 有一定 Android 开发经验

- 一个系统为Android 4.1+的测试设备

*Android 2.3.3（Gingerbread, API Level 10）或者更高的版本可能也可以使用，但是一些material design组件不能运行在Android4.4（KitKat）以及之前的版本上，例如ripple effect。

2. 创建

下载例子

你可以下载源码 Android design library

http://pan.baidu.com/s/1nv92lnz

也可以从github上下载

$ git clone https://github.com/googlecodelabs/android-design-library.git[/code] 
运行sample app

3. 主题，颜色，排版
现在让我们来看看两个关键的设计：Themes和colors

Themes可以让APP看起来样式统一，可以选择dark或者light主题

也可以在theme中自定义颜色，可以自动运用在APP中的不同组件中，比如Status Bar和App Bar的colorPrimary属性

添加Light Theme并在 res/values/styles.xml中自定义一些颜色

styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#3F51B5</item>
<!-- Light Indigo -->
<item name="colorPrimaryDark">#3949AB</item>
<!-- Dark Indigo -->
<item name="colorAccent">#00B0FF</item>
<!-- Blue -->
</style>
<style name="AppTheme" parent="AppTheme.Base"></style>
</resources>


可以通过设置属性
parent="Theme.AppCompat.Light.NoActionBar"
去掉ActionBar。

4. 布局和动画
自此可以创建基本的框架了，接下来添加相应的material design 组件了。

添加ToolBar

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</RelativeLayout>


MainActivity.java

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Adding Toolbar to Main screen
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);


给toolbar添加tabs

使用
CoordinatorLayout
作为一些子View的容器，比如TabLayout和FloatingActionButton。

action_main.xml

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>


MainActivity.java

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setText("Tab 1"));
tabs.addTab(tabs.newTab().setText("Tab 2"));
tabs.addTab(tabs.newTab().setText("Tab 3"));
}


添加Fragment和ViewPager

MainActivity.java

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Adding Toolbar to Main screen
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Setting ViewPager for each Tabs
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
// Set Tabs inside Toolbar
TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.setupWithViewPager(viewPager);
}
// Add Fragments to Tabs
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new ListContentFragment(), "List");
adapter.addFragment(new TileContentFragment(), "Tile");
adapter.addFragment(new CardContentFragment(), "Card");
viewPager.setAdapter(adapter);
}

static class Adapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();

public Adapter(FragmentManager manager) {
super(manager);
}

@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}

@Override
public int getCount() {
return mFragmentList.size();
}

public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}

@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}


activity_main.xml

</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />


5. 使用RecyclerView
RecyclerView 其他的不说，但是要说明的是，并不比ListView性能好多少，只是扩展性更强，比如融合了listview和gridview，而且还可以用来展示瀑布流。

要使用CardView和RecyclerView，首先要在
build.gradble
中声明依赖。

build.gradle

dependencies {
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0'
compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:recyclerview-v7:23.4.0'
}


再创建一个
recycler_view.xml


recycler_view.xml

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="@dimen/md_keylines"
android:paddingTop="@dimen/md_keylines"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />


在fragment中声明RecyclerView，要使用RecyclerView.ViewHolder。

public static class ViewHolder extends RecyclerView.ViewHolder {
public ViewHolder(LayoutInflater inflater, ViewGroup parent) {
super(inflater.inflate(R.layout.item_tile, parent, false));
}
}


在fragment中创建 
RecyclerView.Adapter
的实例，使用
ViewHolder
。

public static class ContentAdapter extends RecyclerView.Adapter<ViewHolder> {
// Set numbers of List in RecyclerView.
private static final int LENGTH = 18;

public ContentAdapter() {
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(LayoutInflater.from(parent.getContext()), parent);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
// no-op
}

@Override
public int getItemCount() {
return LENGTH;
}
}


在fragment中重写
onCreateView()
来使用新的
ContentAdapter
。

在
TileContentFragment
中，让RecyclerView实现Gridview的效果。

public class TileContentFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
RecyclerView recyclerView = (RecyclerView) inflater.inflate(
R.layout.recycler_view, container, false);
ContentAdapter adapter = new ContentAdapter();
recyclerView.setAdapter(adapter);
recyclerView.setHasFixedSize(true);

// Set padding for Tiles (not needed for Cards/Lists!)
int tilePadding = getResources().getDimensionPixelSize(R.dimen.tile_padding);
recyclerView.setPadding(tilePadding, tilePadding, tilePadding, tilePadding);
recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 2));

return recyclerView;
}


6. 使用矢量图
现在学习如何通过 Support Library support-vector-drawable 使用 VectorDrawable。可以使用 VectorDrawableCompat。通过使用矢量图，可以在多设备屏幕中只使用一套图片资源。

在gradle文件中添加配置

添加一个属性

build.gradle

// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}


导入矢量图到Android studio中

item_card.xml

<ImageButton
android:id="@+id/share_button"
android:layout_width="@dimen/cards_button_width"
android:layout_height="@dimen/cards_button_height"
android:layout_marginRight="@dimen/md_keylines"
app:srcCompat="@drawable/ic_share"
android:layout_below="@+id/card_text"
android:layout_alignParentRight="true"
style="?android:attr/borderlessButtonStyle"
android:tint="@color/button_grey" />


7. 页面元素
添加 NavigationDrawer

添加一个从左侧滑出的导航栏是一个很常见的设计。

在
res/menu
目录中创建一个
menu_navigation.xml
，声明导航目录。

menu_navigation.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:icon="@drawable/ic_home_black_24dp"
android:tint="@color/button_grey"
android:title="One" />
<item
android:icon="@drawable/ic_favorite_black_24dp"
android:tint="@color/button_grey"
android:title="Two" />
<item
android:icon="@drawable/ic_bookmark_border_black_24dp"
android:tint="@color/button_grey"
android:title="Three" />
</group>
</menu>


2、创建
navheader.xml
，声明一个Navigation Drawer。

navheader.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/navheader_height"
android:background="?attr/colorPrimaryDark"
android:orientation="vertical"
android:padding="@dimen/md_keylines">
</LinearLayout>


3、在
activity_main.xml
中声明DrawerLayout。

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">


activity_main.xml

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/navheader"
app:menu="@menu/menu_navigation" />


4、
MainActivity.java


// Create Navigation drawer and inflate layout
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);

// Adding menu icon to Toolbar
ActionBar supportActionBar = getSupportActionBar();
if (supportActionBar != null) {
supportActionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
supportActionBar.setDisplayHomeAsUpEnabled(true);
}

// Set behavior of Navigation drawer
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
// Set item in checked state
menuItem.setChecked(true);
// TODO: handle navigation
// Closing drawer on item click
mDrawerLayout.closeDrawers();
return true;
}
});


在点击menu按钮时，设置
mDrawerLayout.openDrawer(GravityCompat.START);


@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
} else if (id == android.R.id.home) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
return super.onOptionsItemSelected(item);
}


添加 Floating Action Button(FAB) 并且触发 SnackBar。

FAB是一个浮动的按钮，作为一个或者一组动作的按钮。现在让我们创建一个FAB并且用来触发一个SnackBar，其提供了一些轻量级的反馈信息。

activity_main.xml

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_marginBottom="@dimen/md_keylines"
android:layout_marginRight="@dimen/md_keylines"
android:src="@drawable/ic_add_white_24dp" />


MainActivity.java

// Adding Floating Action Button to bottom right of main view
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "Hello Snackbar!",
Snackbar.LENGTH_LONG).show();
}
});


3、在
values-21
文件夹中，修改
styles.xml
文件，使系统组件在Android5及其以上系统中透明。

styles.xml

<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>


8. 带有可折叠toolbar的详情页
创建一个详情页

先在AndroidManifest.xml中配置

<activity
android:name=".DetailActivity"
android:parentActivityName=".MainActivity">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity" />
</activity>


在
activity_detail.xml
中，添加
AppBarLayout
和
CollapsingToolbarLayout
 和 
CoordinatorLayout


activity_detail.xml

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="@dimen/article_keylines"
app:expandedTitleMarginStart="@dimen/md_keylines"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/paris"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>


在
DetailActivity.java
设置折叠toolbar的标题

DetailActivity.java

// Set Collapsing Toolbar layout to the screen
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
// Set title of Detail page
collapsingToolbar.setTitle(getString(R.string.item_title));


9. 结尾
本文为译文，原文链接点这里