Android(安卓)之 史上最细 Material Design
Material Design
Material Design是谷歌新的设计语言，谷歌希望寄由此来统一各种平台上的用户体验，Material Design的特点是干净的排版和简单的布局，以此来突出内容。今天试了几个比较Support包中比较典型的Material Design控件，后期会在学习下Material Design的设计思想和理念。
Android Design Support 库依赖
compile 'com.android.support:design:24.2.1'
cardview
依赖：
compile 'com.android.support:cardview-v7:24.2.1'效果图
代码（案例）
<?xml version="1.0" encoding="utf-8"?>
Floating Action Button 与 Snackbar
效果图（悬浮框按钮）
代码 （可以通过更改资源文件更改图形按钮图片）
按钮事件
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show(); } }) .show(); } });以使用app:elevation来表示空闲状态高度，app:pressedTanslationZ为按下状态的高度
按钮的颜色一般为主题的强调色，也可以使用 ”app:backgroundTint“修改
snackbar
Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show(); } }) .show();AppBarLayout
当滑档内容时，为了腾出跟多的空间展示内容可以将AppBarLayout隐藏
效果
代码
Toolbar
Toolbar 比传统的 ActionBar 更灵活，功能也更多，我们可以看到现在市面上很多的 APP 已经用 Toolbar 替代了 actionbar，在 Desgin Support 的组件中，很多设计都可以和 Toolbar 协同工作，而不是和 actionbar，所以还是建议使用新的 toolbar 替换以前的 actionbar
去除actionbar
android:theme="@style/Theme.AppCompat.Light.NoActionBar">代码
通知系统使用 toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);一般我们都会把 toolbar 和 AppBarLayout 一起协同起来使用如下
要想达到Toolbar隐藏的效果，看以上的布局文件，有几点说明：
1、首先顶层布局必须是CoordinatorLayout
2、给需要隐藏的组件设置 app:layout_scrollFlags滚动标志，比如这里的Toolbar。这个标志有四种，如下所示：
scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如TabLayout 没有设置这个值，将会停留在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
toolbar事件
/** * 重写父类的一个方法为toolbar引入图标 * @param menu * @return */ public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.toolbar, menu); return true; } //toolbar 的监听事件 @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: //打开左侧栏 mDrawerLayout.openDrawer(GravityCompat.START); break; case R.id.backup: Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show(); break; case R.id.delete: Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show(); break; case R.id.settings: Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show(); break; default: } return true; }AppBarLayout当中嵌套CollapsingToolbarLayout
效果如下，这种效果在详情页面用的比较多，展现个性化内容，图像具有很强的吸引力。当往下滚动RecyclerView的时候，CollapsingToolbar会自动扩展自AppBarLayout的高度，当往上滚动的时候，CollapsingToolbar又会折叠，最终固定为Toolbar的高度，在CollapsingToolbarLayout当中放了一个ImageView，用于承载一张图片。
代码
要想达到隐藏的效果，必须跟上面的说明一样：
1、首先顶层布局必须是CoordinatorLayout。
关于CollapsingToolbarLayout，有几个属性说明：
1、Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2、Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3、如果我们把CollapsingToolbarLayout的layout_scrollFlags的exitUntilCollapsed标志去掉，那么CollapsingToolbarLayout里面的控件在折叠的时候都不会显示在顶端，都会隐藏起来，忽略控件的折叠模式。
4、同时标志exitUntilCollapsed本身就包含Toolbar折叠到顶端，如果此时把Toolbar的app:layout_collapseMode设置为"parallax"，那么Toolbar在折叠到顶端的时候，图标和菜单都不会显示出来，这个需要注意一下，所以一般把Toolbar的app:layout_collapseMode设置为"pin"。
CoordinatorLayout
在Material Design当中存在很多组件之间的交互，一般是以动画的形式呈现。在Design library当中引入了组件CoordinatorLayout，它是一个布局，继承自FrameLayout，通过协调调度子视图布局的形式来产生动画效果，来达到子控件之间的交互效果
通过上面 Floating Action Button ，AppBarLayout，Toolbar以及 控件的使用我们发现了一个问题
可以看到，Snackbar 遮挡住了我们的 view，这时候需要一个CoordinatorLayout来协调 view 布局，当我们把Snackbar依附于CoordinatorLayout的时候，当点击FloatingActionButton弹出Snackbar的时候，FloatingActionButton会自动上移，然后隔一段时间Snackbar消失后，FloatingActionButton就会自动归位。
在一系列隐藏中都需要使用到他作为外部控件
注意
根据官方的谷歌文档，AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view
在 toolbar 中加入属性，app:layout_collapseMode=”pin”，使得 Toolbar 中的按钮能固定在顶部
侧滑菜单 NavigationView
效果如下
代码
nav_header圆形库
compile 'de.hdodenhof:circleimageview:2.1.0'<?xml version="1.0" encoding="utf-8"?> nav_menu
<?xml version="1.0" encoding="utf-8"?>侧滑菜单事件
打开事件
左滑
mDrawerLayout.openDrawer(GravityCompat.START);右滑
mDrawerLayout.openDrawer(GravityCompat.END);关闭事件
navView.setCheckedItem(R.id.nav_call); //为左边的栏框的每一个item设置一个点击事件 navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { //关闭左侧栏 mDrawerLayout.closeDrawers(); return true; } });
到此结束我的讲解，喜欢的点个赞 谢谢！
更多相关文章
- 我的Android进阶之旅------>android Toast大全（五种情形）建立属于
- Android(安卓)material Design 之CoordinatorLayout详解
- TextSurface实现文字呈现效果
- 解决Android(安卓)5.0以上版本Button自带阴影效果的方法
- Android(安卓)Material Design 系列之 CoordinatorLayout + Coll
- Android(安卓)中CollapsingToolbarLayout和Toolbar实现炫酷效果
- textview点击后selector的pressed无效果
- Android(安卓)自定义进度条ColorfulProgressBar，原理简单、效果很
- 【IOS】实现IOS版的抽屉效果（点击，拖拽滑动）