前言
伟大的Google为Android推出了一系列的兼容包，最新的就是Design Support Library了，这里我们结合v7和v4中的几个控件，来主要学习Design Support Library中的几个新控件！一个Demo学会用它们！
效果动图GIF：
学习内容
通过本实例可以学习到以下内容：
- Drawerlayout和NavigationView实现优雅的Google范儿侧边栏；
- 新控件CoordinatorLayout、AppBarLayout、Toolbar、FloatingActionButton的用法，以及Toolbar的渐变隐藏动画效果；
- 官方Tabs组件TabLayout和ViewPager结合实现主界面内容区域；
- SwipeRefreshLayout和RecyclerView结合实现下拉刷新，以及RecyclerView的数据适配器RecyclerView.Adapter的用法，还有RecyclerView中item的点击事件的实现方法；
- 卡片式CardView的用法；
- 类似Toast的新控件Snackbar的用法。
##布局文件
在源码中学习Android，是有种身临其境的感觉的。
学习Android解释再多代码都没有用，因为解释过了还是不会用。因此，我们这里将布局文件XML源码贴出来供学习，放心，所有知识点都已经注释在源码中。
###styles.xml源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <resources>
<style name="AppTheme" parent="MyThemeBlue"></style>
<style name="MyThemeBlue" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/main_blue_light</item>
<item name="colorPrimaryDark">@color/main_blue_dark</item>
<item name="colorAccent">@color/main_blue_light</item>
<item name="android:textColorPrimary">@color/main_white</item>
</style>
</resources>
|
colorPrimary、colorPrimaryDark、colorAccent、textColorPrimary的含义，请看博文《Android L+ Theme 与 Toolbar 实例》。
主布局activity_my.xml源码（重点）
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
| <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/id_drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/content_main" />
<android.support.design.widget.NavigationView
android:id="@+id/id_navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:itemTextColor="@color/selector_nav_menu_textcolor"
android:layout_gravity="left" />
</android.support.v4.widget.DrawerLayout>
|
content_main.xml源码（重点）
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <?xml version="1.0" encoding="utf-8"?>
<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/id_coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/id_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+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"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:title="@string/toolbar_title" />
<android.support.design.widget.TabLayout
android:id="@+id/id_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/main_white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/id_floatingactionbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@mipmap/ic_action_plusone"
app:backgroundTint="@color/main_blue_light"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:rippleColor="@color/main_blue_dark" />
</android.support.design.widget.CoordinatorLayout>
|
frag_main.xml源码（Fragment的布局）
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
| <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_swiperefreshlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.widget.SwipeRefreshLayout>
|
item_main.xml源码（RecyclerView中item）
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
|
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_cardview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardBackgroundColor="@color/main_blue_light"
app:cardCornerRadius="4dp"
app:cardElevation="5dp"
app:cardMaxElevation="10dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/id_textview"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:gravity="center"
android:textColor="@color/main_white"
android:textSize="30sp" />
</android.support.v7.widget.CardView>
|
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
| <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_menu_home"
android:icon="@mipmap/ic_home_white_48dp"
android:title="主页" />
<item
android:id="@+id/nav_menu_categories"
android:icon="@mipmap/ic_sort_by_alpha_white_48dp"
android:title="分类" />
<item
android:id="@+id/nav_menu_feedback"
android:icon="@mipmap/ic_message_white_48dp"
android:title="反馈" />
<item
android:id="@+id/nav_menu_setting"
android:icon="@mipmap/ic_settings_white_48dp"
android:title="设置" />
</group>
</menu>
|
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
| <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="@drawable/ic_user_background"
android:gravity="center"
android:orientation="vertical">
<com.sunjiajia.androidnewwidgetsdemo.view.RoundedImageView
android:id="@+id/id_header_face"
android:layout_width="110dp"
android:layout_height="110dp"
android:scaleType="fitXY"
android:src="@drawable/author" />
<TextView
android:id="@+id/id_header_authorname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/header_author_name"
android:textColor="@android:color/black"
android:textSize="16sp" />
<TextView
android:id="@+id/id_header_url"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/header_author_url"
android:textColor="@android:color/black"
android:textSize="18sp" />
</LinearLayout>
|
Java代码
Java代码写法比较简单，这里只给出RecyclerView.Adapter的写法（包括item点击事件）。
###RecyclerView.Adapter写法源码
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| package com.sunjiajia.androidnewwidgetsdemo.adapter;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.sunjiajia.androidnewwidgetsdemo.R;
import java.util.ArrayList;
import java.util.List;
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewHolder> {
public interface OnItemClickListener {
void onItemClick(View view, int position);
void onItemLongClick(View view, int position);
}
public OnItemClickListener mOnItemClickListener;
public void setOnItemClickListener(OnItemClickListener listener) {
this.mOnItemClickListener = listener;
}
public Context mContext;
public List<String> mDatas;
public LayoutInflater mLayoutInflater;
public MyRecyclerViewAdapter(Context mContext) {
this.mContext = mContext;
mLayoutInflater = LayoutInflater.from(mContext);
mDatas = new ArrayList<>();
for (int i = 'A'; i <= 'z'; i++) {
mDatas.add((char) i + "");
}
}
@Override
public MyRecyclerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View mView = mLayoutInflater.inflate(R.layout.item_main, parent, false);
MyRecyclerViewHolder mViewHolder = new MyRecyclerViewHolder(mView);
return mViewHolder;
}
@Override
public void onBindViewHolder(final MyRecyclerViewHolder holder, final int position) {
if (mOnItemClickListener != null) {
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mOnItemClickListener.onItemClick(holder.itemView, position);
}
});
holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
mOnItemClickListener.onItemLongClick(holder.itemView, position);
return true;
}
});
}
holder.mTextView.setText(mDatas.get(position));
}
@Override
public int getItemCount() {
return mDatas.size();
}
}
|
MyRecyclerViewHolder.java源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| package com.sunjiajia.androidnewwidgetsdemo.adapter;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import com.sunjiajia.androidnewwidgetsdemo.R;
public class MyRecyclerViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public MyRecyclerViewHolder(View itemView) {
super(itemView);
mTextView = (TextView) itemView.findViewById(R.id.id_textview);
}
}
|
结语
在源码中学习Android，是有种身临其境的感觉的。
整个Demo的源码我放在了GitHub上，谢谢star一下~
在看源码过程中如果发现什么问题，请在留言，看到一定回复。
源码地址：
AndroidNewWidgetsDemo
##清纯妹子
