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

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:headerLayout与app: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之间有一些默认的行为,还记得上面FAB和Snackbar的例子吗? 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的源码(╯‵□′)╯︵┻━┻