总结Android中MD风格相关控件

概述要使用MD风格控件，首先需要在Gradle中加入SupportDesignLibrary，例如：compile\'com.android.support:design:24.1.1\'

要使用MD风格控件，首先需要在Gradle中加入Support Design library，例如：

compile 'com.androID.support:design:24.1.1'

一、CoordinatorLayout

1、CoordinatorLayout + AppbarLayout

布局文件代码如下：

<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.AppbarLayout    androID:ID="@+ID/appbar"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:theme="@style/Apptheme.AppbarOverlay">    <androID.support.v7.Widget.Toolbar      androID:ID="@+ID/toolbar"      androID:layout_wIDth="match_parent"      androID:layout_height="?attr/actionbarSize"      androID:background="?attr/colorPrimary"      app:layout_scrollFlags="scroll|enteralways"      app:popuptheme="@style/Apptheme.PopupOverlay"      app:title="MdVIEw" />    <androID.support.design.Widget.TabLayout      androID:ID="@+ID/tablayout"      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content" />  </androID.support.design.Widget.AppbarLayout>  <androID.support.v4.vIEw.VIEwPager    androID:ID="@+ID/vIEwpager"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_vIEw_behavior" />    ................</androID.support.design.Widget.CoordinatorLayout>

看一下效果：

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

2、CoordinatorLayout + AppbarLayout + CollapsingToolbarLayout

布局文件代码如下：

<?xml version="1.0" enCoding="utf-8"?><androID.support.design.Widget.CoordinatorLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:app="http://schemas.androID.com/apk/res-auto"  xmlns:tools="http://schemas.androID.com/tools"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:fitsSystemwindows="true"  androID:ID="@+ID/detail_content"  tools:context="com.othershe.mdvIEw.DetailActivity">  <androID.support.design.Widget.AppbarLayout    androID:ID="@+ID/app_bar"    androID:layout_wIDth="match_parent"    androID:layout_height="200dp"    androID:fitsSystemwindows="true"    androID:theme="@style/Apptheme.AppbarOverlay">    <androID.support.design.Widget.CollapsingToolbarLayout      androID:ID="@+ID/toolbar_layout"      androID:layout_wIDth="match_parent"      androID:layout_height="match_parent"      androID:fitsSystemwindows="true"      app:contentScrim="?attr/colorPrimary"      app:layout_scrollFlags="scroll|exitUntilCollapsed">      <ImageVIEw        androID:ID="@+ID/detail_img"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent"        androID:fitsSystemwindows="true"        androID:scaleType="fitXY"        app:layout_collapseMode="parallax"        app:layout_collapseParallaxMultiplIEr="0.7" />      <androID.support.v7.Widget.Toolbar        androID:ID="@+ID/toolbar"        androID:layout_wIDth="match_parent"        androID:layout_height="?attr/actionbarSize"        app:layout_collapseMode="pin"        app:popuptheme="@style/Apptheme.PopupOverlay" />    </androID.support.design.Widget.CollapsingToolbarLayout>  </androID.support.design.Widget.AppbarLayout>  <androID.support.v4.Widget.nestedScrollVIEw    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_vIEw_behavior">    <WebVIEw      androID:ID="@+ID/webvIEw"      androID:layout_wIDth="match_parent"      androID:layout_height="match_parent" />  </androID.support.v4.Widget.nestedScrollVIEw>  .....................</androID.support.design.Widget.CoordinatorLayout>

看一下效果：

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

看一下布局文件代码：

<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.floatingActionbutton    androID:ID="@+ID/fab"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_gravity="end|bottom"    androID:layout_margin="16dp"    androID:src="@androID:drawable/ic_menu_share" /></androID.support.design.Widget.CoordinatorLayout>

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，我们可以增加一个主题

<style name="Apptheme.NoActionbar">    <item name="windowActionbar">false</item>    <item name="windowNoTitle">true</item>  </style>

也可以扩展原有的主题,

<style name="Apptheme" parent="theme.AppCompat.light.NoActionbar">    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item>  </style>

colorPrimary：对应Actionbar的颜色。

colorPrimaryDark：对应状态栏的颜色

colorAccent：对应EditText编辑时、floatingActionbutton背景等颜色。

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

接下来看一张图：

Toolbar

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

三、NavigationVIEw

先看一下效果：

NavigationVIEw

其实NavigationVIEw就是用来实现我们常见的侧滑菜单的效果的。

在布局文件中的代码：

<?xml version="1.0" enCoding="utf-8"?><androID.support.v4.Widget.DrawerLayout xmlns: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">  <include    layout="@layout/content_main"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent" />  <androID.support.design.Widget.NavigationVIEw    androID:ID="@+ID/nav_vIEw"    androID:layout_wIDth="wrap_content"    androID:layout_height="match_parent"    androID:layout_gravity="start"    androID:fitsSystemwindows="true"    app:menu="@menu/menu_drawer"    app:headerLayout="@layout/nav_head_main" /></androID.support.v4.Widget.DrawerLayout>

以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风格相关控件的总结，文章利用实例介绍的很详细，希望对大家在AndroID开发App中有所帮助。

总结

以上是内存溢出为你收集整理的总结Android中MD风格相关控件全部内容，希望文章能够帮你解决总结Android中MD风格相关控件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。