MaterialDesign(完整) 带你体验艺术般交互体验

先看看Demo的演示效果:

one.gif

1.Toolbar

  1. Toolbar是代替Actionbar的使用,因为在继承了Actionbar的所有功能以外,灵活性更高,并且可以配合其他的一些控件实现MaterailDesign的效果 ,因此官方推荐使用Toolbar。
  2. 要使用Toolbar,则必须要要配置当前Activity的主题为“***.NoActionBar”,否则会报一个"This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead."的异常,就是提醒,已经有actionbar,不能再使用toolBar。
  3. 如何使用:
    先配置主题为noActionbar
    

Activity的中的代码

        //如果不设置,则不会出现标题
        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //不设置会显示label的属性,也可以在清单文件中进行配置
//      tbAtToolbar.setTitle(" I am toolbar ");
        setSupportActionBar(tbAtToolbar);

布局文件中的代码:

            

这里我们使用"android:theme"去指定和ActionBar的主题一样。app:popupTheme是为了兼容5.0一下的系统使用的主题,因为MaterailDesign是在5.0以后才出现的。到这一步,Toolbar的简单使用已经介绍完毕。
但是,如果只是这样实现的话,你可能会有疑问,和Actionbar有个毛线的不同,别急,高级定制Toolbar才刚刚开始。
先看看效果:


toolbar.png

具体实现 :
先在res中创建menu文件夹,然后创建toolbarmenu.xml,并编写以下代码



    

    

    

先介绍一下 app:showAsAction这个属性:'ifRoom'表示如果空间充足则显示,如果不充足,则不显示,'always'一直显示,'never'则表示不出现,点击,则先会出现title的属性,即为3个小白点。
然后去重写Activity的onCreateOptionsMenu()方法去加载toolbarmenu.xml配置文件,重写onOptionsItemSelected()去实现菜单的点击事件


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toobalr, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                dlAtDrawLayout.openDrawer(Gravity.START);
                break;
            case R.id.add:
                Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.tb_setting:
                Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

到这里,关于toolbar的使用就完全介绍完毕咯。

2.DrawerLayout

滑动菜单,通过滑动将菜单栏滑动出来。
先看看效果:


MaterialDesign(完整) 带你体验艺术般交互体验_第1张图片
DrawLayout.png

下来介绍如何实现上面的效果:




    
    

    
    


如果要定制菜单选项栏,只需要替换ScrollView的布局,但是一定要保留android:layout_gravity="start"属性,并不一定要用"start",也可以使用left和right属性,表示从那边进行滑动出来菜单。但是如果不添加任何的标记的话,用户一般不会发现这个菜单,所以最好是添加一个菜单指示器。
这里介绍2中方式:
第一种:完全自定义:没有效果和button的点击事件类似

     ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
        }

   @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                dlAtDrawLayout.openDrawer(Gravity.START);
                break;
        }
        return true;
    }

第二种:使用ActionBarDrawerToggle类进行添加

  ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, dlAtDrawLayout, tbAtToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        dlAtDrawLayout.addDrawerListener(toggle);
        toggle.syncState();

strings.xml


    MaterialDesignDemo

    Open navigation drawer
    Close navigation drawer

    Settings

则会出现滑动菜单栏指示器,并且自动监听是否闭合的监听。

3. CoordinatorLayout

CoordinatorLayout可以理解为一个加强版的FrameLayout,如果使用常规的控件,使用和效果和FrameLayout没有多大的效果,但是如果使用一些Design Support中的另外一些控件使用,就体现出它的强大之处了。
CoordinatorLayout为什么强大,因为她可以监听所有它的子View的各种事件,并且会通过这些事件的监听,会动态的去调整布局,比如,我们在屏蔽右下角使用FloatingActionButton,并添加一个弹出Snackbar的提示,如果使用的FrameLayout,则Snackbar会挡住FloatingActionButton,但是如果使用CoordinatorLayout,则不会出现,它会动态的将布局整体上移。

       FloatingActionButton fabButton = (FloatingActionButton) findViewById(R.id.fab_at_action);
        fabButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "snack action ", 1000)
                        .setAction("Toast", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(ToolbarActivity.this, " to do ", Toast.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });

在看一个例子:

    


        


        
        

    

加入我们使用上面的这种布局,我们会发现RecycleView会将Toolbar挡住,类似于这种效果,
不难理解,因为CoordinatorLayout在前面提到过是类似于FrameLayout的使用,所以,RecycleView会挡住Toolbar的一部分,我们如何解决呢?如果不在添加任何的materialDesign的效果,我们可以添加Margin效果,实现想要的效果,但是Google肯定提供了解决方案,那就是使用AppBarLayout的布局,我们在下面继续。

4.AppBarLayout

针对上面出现的bug,我们提到了AppBarLayout的使用,这里先看看如何使用,我们在Toolbar的最外面进行嵌套了一层AppBarLayout,然后再看效果,是不是解决了上面出现的bug

   



        

            
        


        
        

    

因为AppBarLayout通过查看源码是继承自LinearLayout,则我们可以将AppBarLayout看做事垂直方向的LinearLayout进行使用。因为是MaterialDesign设计效果,所以我们配合RecycleView进行使用,因为recycleView的滑动会被AppBarLayout监听到,所以我们通过给RecycleView设置一个内定的布局行为

app:layout_behavior="@string/appbar_scrolling_view_behavior"

给Toolbar设置

app:layout_scrollFlags="scroll|enterAlways"

“scroll”代表:RecycleView向上滚动时,toolbar也会向上滑动,直到隐藏,“enterAlways”属性代表:当RecycleView向下滚动时,Toolbar也会向下滑动,并且重新显示。“snap”属性代表:当Toolbar还没有完全隐藏或显示的时候,会根据当前滑动的距离,自动选择隐藏或者显示。
看看运行的效果:

5.CollapsingToolbarLayout

如果你见过类似的效果,那么绝大多数是使用的这个布局,即可折叠标题栏
先看看效果:

从命名规则上面看出,它是作用于Toolbar上面的折叠布局,但是,它的作用范围有限,即CollapsingToolbarLayout不能单独使用,即CollapsingToolbarLayout必须作为AppbarLayout的直接子布局进行使用,AppbarLayout又是CoordinatorLayout的子布局,所以看看我们的布局文件



        

            


                

                

            
        


        

            
                
                

            
        

        

    

解释一下几个属性: app:layout_scrollFlags="scroll|exitUntilCollapsed"
“scroll” 表示随着recycleView的滚动,CollapsingToolbarLayout也进行滚动,“exitUntilCollapsed”属性代表:随着滚动完成折叠以后保留在屏幕上,不再移出界面。 app:contentScrim="?attr/colorPrimary"指定当CollapsingToolbarLayout折叠完成以后Toolbar的背景颜色。

NestedScrollView

NestedScrollView类似于一个ScrollView,将其app:layout_behavior="@string/appbar_scrolling_view_behavior"和之前RecycleView的使用是一样的。

填充状态栏的空间

想要使用和设置状态栏,我们只需要这行代码就行

android:fitsSystemWindows="true"

当然设置了这行以后,还需要将你的Activity的主题的状态栏的背景设置为透明
即:

    

RecycleView和SwipeRefreshLayout、FloatingActionButton的使用这里不用介绍了,因为太多了。在这个Demo中也都有,所以不做介绍了,也相对的比较简单。
最后看看整体的效果
最后附上Github地址:https://github.com/OnexZgj/MaterialDesign

one.gif

你可能感兴趣的:(MaterialDesign(完整) 带你体验艺术般交互体验)