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.AppCom
10cef
pat.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;
}
}

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

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

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

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