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'

效果图

代码（案例）

 

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'

nav_menu

侧滑菜单事件

打开事件

左滑

 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;
            }
        });

 

到此结束我的讲解，喜欢的点个赞 谢谢！