Android MD风格相关控件小结

要使用MD风格控件,首先需要在Gradle中加入Support Design Library,例如:
compile 'com.android.support:design:24.1.1'

一、CoordinatorLayout

1、CoordinatorLayout + AppBarLayout
布局文件代码如下:



    

        

        

    

    
        ................

看一下效果:

CoordinatorLayout_1

配合CoordinatorLayout、AppBarLayout,我们实现了这样的效果,向上滚动列表时,Toolbar隐藏,TabLayout置顶,再向下滚动Toolbar则显示。
Toolbar之所以可以滚动隐藏\显示,是通过如下属性实现的: app:layout_scrollFlags="scroll|enterAlways"
相关属性值解释如下:

scroll:需要滚动出屏幕的view需要设置该flag, 没有设置则view将被固定在屏幕顶部。
enterAlways: 使用该flag,则向下的滚动会使view变为可见状态。

为Toolbar设置layout_scrollFlags属性只是第一步,还需要在CoordinatorLayout 中提供一个可滚动的View,我们使用ViewPager,并在里边嵌套RecyclerView。同时需要为ViewPager设置如下属性:app:layout_behavior="@string/appbar_scrolling_view_behavior"

这里简单说下Tablayout的用法:

 //设置TabLayout可滚动,保证Tab数量过多时也可正常显示
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //两个参数分别对应Tab未选中的文字颜色和选中的文字颜色
        mTabLayout.setTabTextColors(Color.WHITE, Color.RED);
        //绑定ViewPager
        mTabLayout.setupWithViewPager(mViewPager);
        //设置TabLayout的布局方式(GRAVITY_FILL、GRAVITY_CENTER)
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        //设置TabLayout的选择监听
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //点击Tab时回调
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }
            //重复点击Tab时回调
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                scrollToTop(mFragments.get(tab.getPosition()).getTypeList());
            }
        });

Tablayout选中与否的颜色也可以在xml文件中配置:

 //tab文字默认颜色

注意添加命名空间:

xmlns:app="http://schemas.android.com/apk/res-auto"

2、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
布局文件代码如下:




    

        

            

            

        
    

    

        

    
    .....................


看一下效果:

CoordinatorLayout_2

结合CollapsingToolbarLayout,我们向上滑动时ImageView隐藏、Toolbar显示,向下滑动则反之,类似折叠展开的效果。
在CollapsingToolbarLayout中通过 app:contentScrim="?attr/colorPrimary"属性设置Toolbar折叠到顶部的背景,同时设置了 app:layout_scrollFlags="scroll|exitUntilCollapsed"属性,其中scroll的含义已经解释过了,exitUntilCollapsed的含义如下:

exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端

同时AppBarLayout的高度需要时第一个固定值,这样CollapsingToolbarLayout就有了折叠的效果。

折叠后Toolbar可以固定在顶部是因为使用了app:layout_collapseMode="pin"属性,属性值除了pin还有一个parallax:

pin:固定模式,在折叠的时候最后固定在顶端
parallax:视差模式,在折叠时会有个视差折叠的效果

同时在ImageView中使用了app:layout_collapseMode="parallax"属性,来产生视差渐变的效果,使用app:layout_collapseParallaxMultiplier="0.7"可以控制视差的变化,属性值的范围是[0.0, 1.0],值越大视察越大。

最后还需要在NestedScrollView中设置app:layout_behavior="@string/appbar_scrolling_view_behavior属性。

3、CoordinatorLayout + FloatingActionButton
看一下布局文件代码:


    .......................
    


FloatingActionButton的父View是CoordinatorLayout,在屏幕右下角显示,在java代码中我们可以这样使用:

mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(mCoordinatorLayout, "点我分享哦!", Snackbar.LENGTH_SHORT).show();
            }
        });

看效果:


CoordinatorLayout_3

在Snackbar展示的时候FloatingActionButton上移,隐藏时下移。如果FloatingActionButton的父View是RelativeLayout或其它Container则FloatingActionButton不会上移而导致被Snackbar覆盖。

CoordinatorLayout_2的gif效果中,我们上滑时FloatingActionButton会折叠消失,其实只需要如下两个属性就可以

app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"

第一个属性使FloatingActionButton显示在AppBarLayout的区域,第二个属性确定显示的具体位置。

二、Toolbar

使用Toolbar首先要隐藏原有的ActionBar,我们可以增加一个主题


也可以扩展原有的主题,


colorPrimary:对应ActionBar的颜色。
colorPrimaryDark:对应状态栏的颜色
colorAccent:对应EditText编辑时、FloatingActionButton背景等颜色。

在布局文件中的用法可以参考上边的代码,之后在java代码中得到Toolbar,通过setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar。

接下来看一张图:


Android MD风格相关控件小结_第1张图片
Toolbar

标出了一些Toolbar常用的扩展方法,这样我们可以更好的根据需求定制我们的Toolbar了。具体的实践可参考源码。

三、NavigationView

先看一下效果:


NavigationView

其实NavigationView就是用来实现我们常见的侧滑菜单的效果的。
在布局文件中的代码:




    

    


以DrawerLayout作为根布局,content_main作为主界面布局,最后是NavigationView,通过android:layout_gravity="start"设置为左侧滑菜单,同理android:layout_gravity="end"代表右侧滑菜单。
其中

app:menu="@menu/menu_drawer"
app:headerLayout="@layout/nav_head_main"

两个属性分别代表NavigationView的顶部header布局以及下边的menu item布局,具体可以参考源代码。
准备好了布局文件,接下来就是初始化工作:

private void initNavigationView() {
        //初始化NavigationView顶部head的icon和name
        ImageView icon = (ImageView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_icon);
        icon.setImageResource(R.mipmap.ic_launcher);
        TextView name = (TextView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_name);
        name.setText("VipOthershe");
        //设置NavigationView对应menu item的点击事情
        mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_item1:
                        break;
                    case R.id.nav_item2:
                        break;
                    case R.id.nav_set:
                        break;
                    case R.id.menu_share:
                        break;
                    case R.id.nav_about:
                        break;
                }
                //隐藏NavigationView
                mDrawerLayout.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }

很简单,就是初始化NavigationView的顶部header和Menu Item。

接下来看一下如何将右滑菜单和Toolbar结合使用:

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        mDrawerLayout.addDrawerListener(toggle);
        //设置左上角显示三道横线
        toggle.syncState();

通过设置将两者绑定在一起,同时Toolbar左上角显示三道横线,左上角可打开左滑菜单。

还可以采用另外一种方式:

 //设置Toolbar左上角图标
        mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDrawerLayout.openDrawer(GravityCompat.START);
            }
        });

先设置Toolbar左上角图标,并绑定事件,通过mDrawerLayout.openDrawer(GravityCompat.START);打开左滑菜单。

以上两个方法,分别对应打开和关闭左滑菜单:

mDrawerLayout.openDrawer(GravityCompat.START);
mDrawerLayout.closeDrawer(GravityCompat.START);

如果使用右滑菜单则将GravityCompat.START改成GravityCompat.END,即可实现右滑菜单的开关。

有需要的话可下载源码:点我下载哦!

你可能感兴趣的:(Android MD风格相关控件小结)