Android CardView 和Material Design风格设计学习

这篇文章主要介绍一下我自己对于CardView和Material Design学习的过程。学习途径主要是通过书本和网上资料学习。

效果图:

说明一下，通过下拉可以让我们宇宙的图片拉伸延展出来，通过上滑，可以让我们宇宙图片逐渐变换成ToolBar样式。
一.什么是Material Design:
Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
个人感觉这样的界面设计可以使得我们的APP界面更加的统一和美观。

二.什么是CardView:
卡片布局，从名字中就能感受到界面的划分以卡片形式为主，并且通过其属性设置，可以更大程度上满足我们对于卡片界面的设计。

三.学习过程:

首先我们先添加依赖:

  compile 'com.android.support:recyclerview-v7:25.1.1'    compile 'com.android.support:cardview-v7:25.1.1'    compile 'com.github.githubwing:ByeBurger:1.2.3'

这部分依赖是用于cardview和recyclerview包括coordinationlayout的依赖。

然后看一下布局文件:
recycler_view_item:

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/card_view"    android:layout_width="match_parent"    android:layout_height="wrap_content"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_margin="5dp"    android:clickable="true"    app:cardElevation="5dp"    android:foreground="?attr/selectableItemBackground"    app:cardCornerRadius="2dp"><LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <ImageView        android:id="@+id/fruit_image"        android:layout_width="match_parent"        android:layout_height="100dp"        android:scaleType="center"/>    <TextView        android:id="@+id/fruit_name"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:textSize="16sp"        android:layout_gravity="center"/></LinearLayout></android.support.v7.widget.CardView>

可以看到，我们外层布局采用的是cardview布局，我们设置了它的阴影，圆角和边距，然后下面的控件就是具体item中显示的控件了。
这个布局文件也是我们图一种Recycler的Item的布局样式。

activity_main:

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.administrator.learncardview.MainActivity">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"><android.support.v7.widget.Toolbar    android:id="@+id/tool_bar"    android:layout_width="match_parent"    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    app:layout_scrollFlags="scroll|enterAlways|snap"    android:layout_height="?attr/actionBarSize"/>        </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recycler_view"        android:layout_width="match_parent"        android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior">    </android.support.v7.widget.RecyclerView>    </android.support.design.widget.CoordinatorLayout></android.support.v4.widget.DrawerLayout>

MainActivity的布局样式，这里面我们按照以前一样，放置了RecyclerView,然后可以看到我们的外层布局采用的是DrawerLayout.

<android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">

这个布局可以达到上滑隐藏toolbar和下拉显示toolbar的效果，然后我们用到了AppBarLayout
这个也是和CoordinatorLayout配套使用的。通过它在里面我们就可以包裹我们的Toolbar来达到隐藏Toolbar和显示ToolBar的效果了。

接了下来我恩 我们ToolBar的设置:

    <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"><android.support.v7.widget.Toolbar    android:id="@+id/tool_bar"    android:layout_width="match_parent"    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    app:layout_scrollFlags="scroll|enterAlways|snap"    android:layout_height="?attr/actionBarSize"/>        </android.support.design.widget.AppBarLayout>

设置它的popup主题风格

 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

设置它的滑动标志:

 app:layout_scrollFlags="scroll|enterAlways|snap"

这里的三个参数，scroll代表Recyclerview在向上滚动的时候Toolbar会一起向上滚动并且隐藏。enterAlways代表RecyclerView在向下滚动的时候Toolbar会随着Recycler的滚动而显示，而snap代表着，Toolbar会跟根据RecyclerView的滚动距离选择一个合适自己的状态进行隐藏或者显示。
这里ToolBar的设置就这么多了，然后我们在看看RecyclerView的属性设置。

  <android.support.v7.widget.RecyclerView        android:id="@+id/recycler_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">    </android.support.v7.widget.RecyclerView>

可以看到我们有一句:

app:layout_behavior="@string/appbar_scrolling_view_behavior">

这里是设置RecyclerView的布局行为

这两个布局的效果就相当于设置了我们第一个界面的布局:

接下来我们看看跳转后的界面布局:

friut_activity:

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    xmlns:app="http://schemas.android.com/apk/res-auto"><android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:fitsSystemWindows="true"    android:layout_height="235dp">    <android.support.design.widget.CollapsingToolbarLayout        android:id="@+id/collapsongbar"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fitsSystemWindows="true"        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:contentScrim="?attr/colorPrimary"        app:layout_scrollFlags="scroll|exitUntilCollapsed"       >        <ImageView            android:fitsSystemWindows="true"            android:id="@+id/iamge_fruit"            android:scaleType="centerCrop"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@mipmap/sky1"            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">        </android.support.v7.widget.Toolbar>    </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:orientation="vertical"            android:layout_width="match_parent"            android:layout_height="wrap_content">            <android.support.v7.widget.CardView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginBottom="15dp"                android:layout_marginLeft="15dp"                android:layout_marginRight="15dp"                android:layout_marginTop="35dp"                app:cardCornerRadius="4dp"                >                <TextView                    android:id="@+id/fruit_textview"                    android:layout_width="wrap_content"                    android:layout_margin="10dp"                    android:layout_height="wrap_content" />            </android.support.v7.widget.CardView>        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

这个布局就较为复杂了，让我们看看他的控件和属性设置吧。
最外层布局还是coor所以就不多说了。
这里我们引入了一个新的布局叫做CollapsingToolbarLayout
它是一个作用于Toolbar基础之上的布局。我们称他为可折叠标题栏。
他是不能独立存在的，用它的时候也是将它作文AppBarLayout的直接子布局使用。
接下来我们看一下CollapsingToolbarLayout的属性设置:

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

我们可以看到两个属性：

   app:contentScrim="?attr/colorPrimary"                app:layout_scrollFlags="scroll|exitUntilCollapsed"

这里的contentScrim的作用就是用于指定可折叠标题栏在折叠之后的背景颜色。
scrollFlage中的参数,前面第一个已经说过了，而后面的exitUntilCollapsed表示CollapsingToolBarLayout会随着滚动完成折叠之后保留在屏幕上，不会移出屏幕。

CollapsingToolBarLayout的布局里我们放置了用于显示在标题栏拉伸后的图片，和一个Toolbar

这个布局的设置就相当于我们设置好了跳转后的布局:

下载我们看一下主要代码:

Adapter:

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {    List<String> infos;    public Adapter(List<String> infos) {        this.infos = infos;    }    /*      * 子布局创建时候对其进行布局绑定和Item的点击事件的设置      * */    @Override    public ViewHolder onCreateViewHolder(final ViewGroup parent, int viewType) {        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_view_item, parent, false);        ViewHolder holder = new ViewHolder(view);        holder.cardView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Intent intent = new Intent(parent.getContext(), FruitActivity.class);                parent.getContext().startActivity(intent);            }        });        return holder;    }    /*    * 子布局控件的数据设置    * */    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        holder.image.setImageResource(R.mipmap.ic_launcher);        holder.text.setText(infos.get(position).toString());    }    @Override    public int getItemCount() {        return infos.size();    }    /*    * 子布局控件的初始化    * */    static class ViewHolder extends RecyclerView.ViewHolder {        public ImageView image;        public TextView text;        public CardView cardView;        public ViewHolder(View itemView) {            super(itemView);            image = (ImageView) itemView.findViewById(R.id.fruit_image);            text = (TextView) itemView.findViewById(R.id.fruit_name);            cardView = (CardView) itemView.findViewById(R.id.card_view);        }    }}

FriutActivity

public class FruitActivity extends AppCompatActivity {    TextView textView;    ImageView imageView;    String x;    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.friut_activity);        Toolbar bar = (Toolbar) findViewById(R.id.toolbar);        CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsongbar);        imageView = (ImageView) findViewById(R.id.iamge_fruit);        textView = (TextView) findViewById(R.id.fruit_textview);        setSupportActionBar(bar);//设置默认标题栏        ActionBar actionBar = getSupportActionBar();        if(actionBar!=null){            actionBar.setDisplayHomeAsUpEnabled(true);        }        loadData();        collapsingToolbarLayout.setTitle("Firut Name");//设置标题        imageView.setImageResource(R.mipmap.sky);//设置标题栏找票        textView.setText(x);//文本信息    }    /*    * 用于数据展示， 我们通过StringBuilder 重复添加500次数据保存给x    * */    public void loadData(){        StringBuilder y = new StringBuilder();    for(int i =0;i<=500;i++){        y.append("asdasdasdsadsadsadasdasdsadasdascxzcsafdafasdadas");    }        x = y.toString();    }}

MainActivity

package com.example.administrator.learncardview;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.GridLayoutManager;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.widget.Toast;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    RecyclerView rc;    List<String> infos = new ArrayList<String>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);        setSupportActionBar(toolbar);//系统标题栏设置        rc = (RecyclerView) findViewById(R.id.recycler_view);        loadData();        Adapter adapter = new Adapter(infos);        GridLayoutManager gridLayoutManager = new GridLayoutManager(this,2);//GridLlayout样式        rc.setLayoutManager(gridLayoutManager);        rc.setAdapter(adapter);    }    /*    * 数据读取    * */    public void loadData(){        for(int i = 0 ;i<=20;i++){            infos.add("香蕉香蕉"+i);        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.menu,menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.setting:                Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();                break;            case R.id.back:                Toast.makeText(this, "back", Toast.LENGTH_SHORT).show();                break;            case R.id.exit:            Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();            break;        }        return true;    }}

代码里我都有注释，代码的设计并没有很难。都是比较简单的。

仅仅是为了记录自己的学习过程，代码不是很规范，如果有什么错误的话，请大神多多包含。

学习过程主要是通过网上资料和郭霖著第一行代码中。

推荐郭霖<第一行代码>给大家，个人比较喜欢这本书的讲解风格。因人而异吧。