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

DrawerLayout

已经流行了一段时间了,现在知乎,饿了么等几乎都是使用

DrawerLayout

,而

NavigationView

是在

Design Support Library

中推出,使得抽屉的实现更加简单.

build.gradle

12345

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

12345678910111213141516171819

<android.support.v4.widget.DrawerLayoutxmlns: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

12345678910111213141516

<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

12345678910111213141516171819202122232425262728293031323334

<?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:tit fe10 le="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详解这篇文章.

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

1234567891011121314151617181920

//初始化ToolBarToolbar 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()

了.通过实现下面的方法即可:

123456789

@Overridepublic 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终于出了兼容低版本的官方库.使用方法很简单不多说了.

1234567

<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" />

12345678910111213

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()方法.

12345

@Overridepublic CharSequence getPageTitle(int position) { return mFragmentTitles.get(position);}

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

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

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

12	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

123456789101112131415161718192021222324252627282930

<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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

<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

1234	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的源码(╯‵□′)╯︵┻━┻