Design Support Library 轻松打造酷炫Android5.0风格
来源:互联网 发布:java tar打包代码 编辑:程序博客网 时间:2024/05/16 17:00
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.NavigationViewandroid: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"><TextViewandroid: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"><itemandroid:id="@+id/nav_home"android:icon="@mipmap/ic_dashboard"android:title="Home" /><itemandroid:id="@+id/nav_messages"android:icon="@mipmap/ic_event"android:title="Messages" /><itemandroid:id="@+id/nav_friends"android:icon="@mipmap/ic_headset"android:title="Friends" /><itemandroid:id="@+id/nav_discussion"android:icon="@mipmap/ic_forum"android:title="Discussion" /></group><item android:title="Sub items"><menu><itemandroid:icon="@mipmap/ic_dashboard"android:title="Sub item 1" /><itemandroid: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 () {@Overridepublic 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.FloatingActionButtonandroid: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() {@Overridepublic void onClick(View view) {Snackbar.make (view, "Here's a Snackbar", Snackbar.LENGTH_LONG).setAction ("按钮", new View.OnClickListener () {@Overridepublic 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.TabLayoutandroid: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.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.v7.widget.Toolbarandroid: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.TabLayoutandroid: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.AppBarLayoutandroid: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.CollapsingToolbarLayoutandroid: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"><ImageViewandroid: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.Toolbarandroid: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.RecyclerViewandroid: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的源码(╯‵□′)╯︵┻━┻
- Design Support Library 轻松打造酷炫Android5.0风格
- Support Library最新8个组件(Material Design设计风格:design support library)
- 超炫的Android Design Support Library
- Android Design Support Library
- Android Design Support Library
- Android Design Support Library
- Design Support Library
- Design Support Library详解
- Design Support Library---->NavigationView
- Design Support Library相关
- Android Design Support Library
- Design Support Library介绍
- Design Support library简介
- Design Support Library
- Android Design Support Library
- android Design Support Library
- Android Design Support Library
- Android Design Support Library
- linux下在grub.cfg中配置win7启动引导
- 深入理解java异常处理机制
- Codeforces Round #317 (Div. 2) (572A Arrays,572B Order Book)
- 对Linux堆内存释放的总结
- 学习软件专业的行话
- Design Support Library 轻松打造酷炫Android5.0风格
- Canvas——滑杆操控图片放大缩小
- 如何通过github提升自己
- Ubuntu 10.04上安装MongoDB
- Android应用程序组件(五)
- Linux命令: find命令的使用方法
- 编码规范
- 安装TestNG在eclipse中的插件
- 【codevs1684】垃圾陷阱 解题报告