Design Support Library 轻松打造酷炫Android5.0风格

Material Design

Posted by Mio4kon on 2015-06-01

NavigationView

DrawerLayout已经流行了一段时间了,现在知乎,饿了么等几乎都是使用DrawerLayout,而NavigationView是在Design Support Library中推出,使得抽屉的实现更加简单.

build.gradle

1
2
3
4
5
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.+'
compile 'com.android.support:design:22.2.0'
}

activity_main..xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your contents -->
<include layout="@layout/layout_content"/>
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>

NavigationView中有两个属性app:headerLayoutapp:menu,顾名思义他是抽屉的上方头部和下方菜单.如图:

headerLayout: drawer_header.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimaryDark"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:orientation="vertical"
android:gravity="bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Username"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>

menu: drawer_view.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
<?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_home"
android:icon="@mipmap/ic_dashboard"
android:title="Home" />
<item
android:id="@+id/nav_messages"
android:icon="@mipmap/ic_event"
android:title="Messages" />
<item
android:id="@+id/nav_friends"
android:icon="@mipmap/ic_headset"
android:title="Friends" />
<item
android:id="@+id/nav_discussion"
android:icon="@mipmap/ic_forum"
android:title="Discussion" />
</group>
<item android:title="Sub items">
<menu>
<item
android:icon="@mipmap/ic_dashboard"
android:title="Sub item 1" />
<item
android:icon="@mipmap/ic_forum"
android:title="Sub item 2" />
</menu>
</item>
</menu>

menu布局对应上图观看.
可以发现到目前为止我们只是写一写XML布局.那么具体了代码如何编写呢?
不要急,activity_main.xml中我们还引入了layout_content.xml这里面具体代码暂时不贴出来.暂时里面其实就放了Toolbar.不知道Toolbar的可以参考Toolbar详解这篇文章.

现在可以看具体的代码部分了,超级简单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//初始化ToolBar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.mipmap.ic_menu);
ab.setDisplayHomeAsUpEnabled(true);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
if (navigationView != null) {
navigationView.setNavigationItemSelectedListener (
new NavigationView.OnNavigationItemSelectedListener () {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked (true);
mDrawerLayout.closeDrawers ();
return true;
}
});
}

可以发现通过实现setNavigationItemSelectedListener就可以实现menu的item点击事件.并自动关闭抽屉.再也不用我们自己写这一块逻辑了!

细心的童鞋可能发现我们还没有实现DrawerToggle,这样菜单键是无效的.其实可以不使用DrawerToggle.syncState()了.通过实现下面的方法即可:

1
2
3
4
5
6
7
8
9
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}

到此为止,短短几句代码便实现了现流行APP的侧滑效果.Activity的代码立刻简单了很多( ⊙ o ⊙ )啊!

FAB与Snackbar

在之前有很多FAB(FloatingActionButton)与snackbar的开源项目.现在google终于出了兼容低版本的官方库.使用方法很简单不多说了.

1
2
3
4
5
6
7
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done" />
1
2
3
4
5
6
7
8
9
10
11
12
13
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make (view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
.setAction ("按钮", new View.OnClickListener () {
@Override
public void onClick(View view) {
Toast.makeText (MainActivity.this,"lalala",Toast.LENGTH_SHORT).show ();
}
}).show();
}
});

效果如下:

注意:细心的童鞋又发现了为什么Snackbar弹出来FAB会自动上移呢? 这个待会再说..

TabLayout

TabLayout很早就有了类似的官方库了.现在又提出了主要是觉得更加好用简单.

只需要在写Viewpage的Adapter时复写getPageTitle()方法.

1
2
3
4
5
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}

布局文件,一般写在ToolBar下方

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

然后只需要tabs关联viewpager即可.

1
2
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);

这样便可实现如下效果:

如果上面这些内容还没上面让你眼前一亮的话.那么下面的一些内容一定会让你爽歪歪~

AppBarLayout

AppBarlayout继承自LinearLayout,他可以实现子View的滑动效果,达到material designs app bar的特效,如下:

这个布局需要用到CoordinatorLayout这个父布局才有效,然后通过设置子View的setScrollFlags(int flag)可以达到上图效果.具体实现:

layout_content.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
<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:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<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>

CoordinatorLayout

CoordinatorLayout按照官方的说法是一个超级Framelayout.
他的功能文档写的有点抽象,我的理解是他可以使得子View之间有一些默认的行为,还记得上面FABSnackbar的例子吗? Snackbar弹出来FAB会自动上移,这其实就是由于在布局上,将CoordinatorLayout包裹在最外层所达到的效果.

CollapsingToolbarLayout

CollapsingToolbarLayout可以达到很酷炫的效果.具体如下图所示:

效果还是阔以的吧,首先来看布局文件:

activity_detail.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
<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/backdrop"
android:src="@drawable/cheese_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
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>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>

注意代码中要设置CollapsingToolbarLayout的title

1
2
3
4
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("cheese");

RecyclerView中有一个属性app:layout_behavior="@string/appbar_scrolling_view_behavior"其作用是将RecyclerView至于Appbar下方.
如果下方使用的不是RecyclerView而想使用ScrollView,请使用NestedScrollView.

总结

可以发现,Design Support Library提供了很多自定义View封装了Android 5的流行效果.但如果不研读源码,可能在使用上依旧有些模糊.所以建议还是读一读
Design Support Library所提供的这些自定义View的源码(╯‵□′)╯︵┻━┻