Fork me on GitHub

Material Design实战

MaterialDesign实战。

记得最早接触MaterialDesign还是在去年我刚自学android的时候,当时迫切的想尝试一下这种新的设计语言,但由于一些原因搁浅到现在。趁这个机会写个小demo,感受一下这种设计语言的魅力。先来看下效果:

这里写图片描述

这个demo主要实现了:Material design的设计风格,Toolbar制作顶栏,RecyclerView制作列表。

主要用到的知识点:

1.Material design基本知识;

2.Toolbar的用法;

3.RecyclerView的基本用法;

然后说下具体的实现思路。

Material design

什么是Material design?

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

从官方介绍里我们了解到,这是一门崭新的视觉设计语言。它除了遵循经典设计定则,还汲取了最新的科技,秉承了创新的设计理念。这就是材料化设计(Material Design)。

Material design的核心

Material design的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

创建使用Material design的应用

官方文档中的步骤

1.The material theme(使用materialdesign主题)
2.Widgets for cards and lists(使用列表和卡片组件)
3.Custom shadows and view clipping(定义shadows和clipping视图)
4.Vector drawables(矢量drawables)
5.Custom animations(自定义动画)

本demo的实现过程

使用materialdesign主题

Material主题被定义在:

1
2
3
@android:style/Theme.Material (暗色版本)
@android:style/Theme.Material.Light (亮色版本)
@android:style/Theme.Material.Light.DarkActionBar

为了使我们的应用可以兼容低版本,可以使用兼容主题

1
2
3
Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar

关于主题,我们可以自定义调色板,反馈动画和 Activity 切换动画。同时XML layout 中的元素可以定义 android:theme 属性, 用于引用主题资源。这个属性修改了自己和子元素的主题,通过这个我们可以修改局部主题颜色。

这里是我用的主题,是Pink色系。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- inherit from the material theme -->
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">@color/myColorPrimary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">@color/myColorPrimaryDark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/myColorAccent</item>
<!-- textcolor -->
<item name="android:textColor">@color/myColorText</item>
</style>

AndroidStudio还提供了可视化操作的工具,用来设置这些颜色。

这里写图片描述

工具界面如下图,可以点击特定属性选择符合自己品牌的颜色。

这里写图片描述

使用Toolbar

5.0以后使用了Toolbar这个控件来替换以前的ActionBar。并且提供了supprot library用于向下兼容。使用方法与ActionBar基本类似。

隐藏ActionBar使用ToolBar有两种方法:

1.继承主题:Theme.AppCompat.Light.NoActionBar

2.在主题中使用以下属性:

1
2
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>

为了兼容低版本,我们使用support v7 里的 toolbar。

1
2
3
4
5
6
7
8
9
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@color/myColorPrimary"
android:elevation="3dp"
android:navigationIcon="@mipmap/menu"
android:title="@string/app_name"
app:titleTextColor="@color/myColorText"></android.support.v7.widget.Toolbar>

然后是一些基本的设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
* 初始化toolbar
*/
private void initToolBar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// App Logo
// toolbar.setLogo(R.mipmap.logo);
// Title
// toolbar.setTitle("WaKaKa");
// Sub Title
// toolbar.setSubtitle("Sub title");
toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.more));
setSupportActionBar(toolbar);
//导航按钮
toolbar.setNavigationIcon(R.mipmap.menu);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Click navigation", Toast.LENGTH_SHORT).show();
}
});
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String msg = "";
switch (item.getItemId()) {
case R.id.action_delete:
msg += "Click delete";
break;
case R.id.action_favorite:
msg += "Click favorite";
break;
case R.id.action_settings:
msg += "Click settings";
break;
}
if (!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
});
}

要注意的是setNavigationIcon需要放在 setSupportActionBar之后才会生效。

这个demo中的图标大部分是从谷歌官方制作的icon中下载的。

使用RecycleView

RecycleView组件是一个更高级和伸缩性更强的 ListView。这个组件是一个显示大量数据的容器,通过维护有限量的View,来达到滚动时的高效。当你的数据会在运行过程中根据用户行为或网络事件动态改变时,使用RecyclerView是一个不错的选择。

RecyclerView 通过以下方式简化显示流程,并操作大量数据:

1.使用 Layout manager 来定位元素

2.为常用操作定义默认动画,比如添加或移除元素

你也可以为 RecyclerView 自定义 Layout manager 和动画。

要使用 RecyclerView 组件,你需要定义一个 adapter 和 layout manager。创建 adapter,要继承 RecyclerView.Adapter 类。Layout manager把元素视图放在 RecyclerView,并决定什么时候重用不可见的元素视图。要重用(或回收)视图时,layout manager 会让 adapter 用另外的元素内容替换视图内的内容。回收 View 这个方法能提高性能,因为它避免了创建不必要的view对象,或执行昂贵的 findViewById() 查找。RecyclerView 提供三种内建的 layout manager:LinearLayoutManager 用于显示横向或纵向的滚动列表;GridLayoutManager 用于显示方格元素;StaggeredGridLayoutManager 在 staggered 方格中显示元素。创建一个自定义的 layout manager,要继承于 RecyclerView.LayoutManager 类。

在xml文件中使用RecyclerView之后,初始化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
private void initRecyclerView() {
mRecyclerView = (RecyclerView) findViewById(R.id.recycleview);
// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);
// use a linear layout manager
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
//set divider
mRecyclerView.addItemDecoration(new MyItemDecoration(MainActivity.this));
// specify an adapter (see also next example)
String[] myDataset = {"a", "b", "c", "d", "e", "a", "b", "c", "d", "e", "a", "b", "c", "d", "e", "a", "b", "c", "d", "e"};
mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);
mAdapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(MainActivity.this, position + "", Toast.LENGTH_SHORT).show();
}
});
}

适配器的代码和使用listview大同小异:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private String[] mDataset;
private OnItemClickListener listener;
// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public TextView mTitle;
public RelativeLayout root;
public ViewHolder(View v) {
super(v);
mTitle = (TextView) v.findViewById(R.id.item_title);
root = (RelativeLayout) v.findViewById(R.id.item_rl);
}
}
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(String[] myDataset) {
mDataset = myDataset;
}
// Create new views (invoked by the layout manager)
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// create a new view
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.my_item_view, parent, false);
// set the view's size, margins, paddings and layout parameters
ViewHolder vh = new ViewHolder(v);
return vh;
}
// Replace the contents of a view (invoked by the layout manager)
@Override
public void onBindViewHolder(ViewHolder holder, final int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
holder.mTitle.setText(mDataset[position]);
if(listener != null){
holder.root.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
listener.onItemClick(v,position);
}
});
}
}
// Return the size of your dataset (invoked by the layout manager)
@Override
public int getItemCount() {
return mDataset.length;
}
public interface OnItemClickListener {
void onItemClick(View view, int position);
}
public void setOnItemClickListener(OnItemClickListener listener) {
this.listener = listener;
}
}

这里的两个比较大的问题是:

1.RecyclerView的分割线要自己定义。

2.RecyclerView Item的点击事件和长按事件都要自己定义。

对于第一个问题我们需要去继承RecyclerView.ItemDecoration类,在里边绘制分割线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* 绘制item分割线
*/
public class MyItemDecoration extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
private Drawable mDivider;
public MyItemDecoration(Context context) {
final TypedArray array = context.obtainStyledAttributes(ATTRS);
mDivider = array.getDrawable(0);
array.recycle();
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
drawHorizontal(c,parent);
}
// 水平线
public void drawHorizontal(Canvas c, RecyclerView parent) {
final int childCount = parent.getChildCount();
// 在每一个子控件的底部画线
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final int left = child.getLeft() + child.getPaddingLeft();
final int right = child.getWidth() + child.getLeft() - child.getPaddingRight();
final int top = child.getBottom() - mDivider.getIntrinsicHeight() - child.getPaddingBottom();
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
@Override
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
}
}

对于第二个问题,我们可以写一个回调方法,来设置点击事件,长按事件类似。

1
2
3
4
5
6
7
public interface OnItemClickListener {
void onItemClick(View view, int position);
}
public void setOnItemClickListener(OnItemClickListener listener) {
this.listener = listener;
}

在onBindViewHolder中使用接口对象处理点击事件。

1
2
3
4
5
6
7
8
if(listener != null){
holder.root.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
listener.onItemClick(v,position);
}
});
}

然后在activity中进行设置

1
2
3
4
5
6
mAdapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(MainActivity.this, position + "", Toast.LENGTH_SHORT).show();
}
});

到这里基本就完成了,这个demo可以在低版本中运行,但是5.0的新特性是不会显示的。源码戳这里

参考链接:
Material icon https://design.google.com/icons/
MaterialDesign官方介绍:https://www.google.com/design/spec/material-design/introduction.html
Training:http://developer.android.com/training/material/index.html

任磊_Coder wechat
关注博主是一种态度,评论博主是一种欣赏。
坚持原创技术分享,您的支持将鼓励我继续创作!