当前位置：首页 > 资讯 > 技术文档

总结Android中MD风格相关控件

时间：2020-01-30 02:39 编辑：来源：阅读：
扫一扫，手机访问

摘要：总结Android中MD风格相关控件

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

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

[b]一、CoordinatorLayout[/b] 1、CoordinatorLayout + AppBarLayout [b]布局文件代码如下：[/b]

<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>

[b]看一下效果：[/b] [img]http://files.jb51.net/file_images/article/201608/20168194712185.gif?20167194727[/img] CoordinatorLayout_1 配合CoordinatorLayout、AppBarLayout，我们实现了这样的效果，向上滚动列表时，Toolbar隐藏，TabLayout置顶，再向下滚动Toolbar则显示。 Toolbar之所以可以滚动隐藏\显示，是通过如下属性实现的：[code]app:layout_scrollFlags="scroll|enterAlways" [/code] [b]相关属性值解释如下：[/b] [b]scroll：[/b]需要滚动出屏幕的view需要设置该flag，没有设置则view将被固定在屏幕顶部。 [b]enterAlways: [/b]使用该flag，则向下的滚动会使view变为可见状态。为Toolbar设置layout_scrollFlags属相只是第一步，还需要在CoordinatorLayout 中提供一个可滚动的View，我们使用ViewPager，并在里边嵌套RecyclerView。同时需要为ViewPager设置如下属性： [code]app:layout_behavior="@string/appbar_scrolling_view_behavior"[/code] [b]这里简单说下Tablayout的用法：[/b]

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

[b]2、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout[/b] [b]布局文件代码如下：[/b]

<?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>

[b]看一下效果：[/b] [img]http://files.jb51.net/file_images/article/201608/20168195030586.gif?2016719510[/img] CoordinatorLayout_2 结合CollapsingToolbarLayout，我们向上滑动时ImageView隐藏、Toolbar显示，向下滑动则反之，类似折叠展开的效果。在CollapsingToolbarLayout中通过[code]app:contentScrim="?attr/colorPrimary"[/code]属相设置Toolbar折叠到顶部的背景，同时设置了[code]app:layout_scrollFlags="scroll|exitUntilCollapsed"[/code]属相，其中scroll的=含义已经解释过了，[b]exitUntilCollapsed的含义如下：[/b] [b]exitUntilCollapsed: [/b]滚动退出屏幕，最后折叠在顶端同时AppBarLayout的高度需要时第一个固定值，这样CollapsingToolbarLayout就有了折叠的效果。折叠后Toolbar可以固定在顶部是因为使用了[code]app:layout_collapseMode="pin"[/code]属性，属性值除了pin还有一个parallax： [b]pin：[/b]固定模式，在折叠的时候最后固定在顶端 [b]parallax：[/b]视差模式，在折叠时会有个视差折叠的效果同时在ImageView中使用了[code]app:layout_collapseMode="parallax"[/code]属相，来产生视差渐变的效果，使用[code]app:layout_collapseParallaxMultiplier="0.7"[/code]可以控制视差的变化，属性值的范围是[0.0, 1.0]，值越大视察越大。最后还需要在NestedScrollView中设置[code]app:layout_behavior="@string/appbar_scrolling_view_behavior[/code]属性。 [b]3、CoordinatorLayout + FloatingActionButton[/b] [b]看一下布局文件代码：[/b]

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

[b]看效果：[/b] [img]http://files.jb51.net/file_images/article/201608/20168195341165.gif?20167195359[/img] CoordinatorLayout_3 在Snackbar展示的时候FloatingActionButton上移，隐藏时下移。如果FloatingActionButton的父View是RelativeLayout或其它Container则FloatingActionButton不会上移而导致被Snackbar覆盖。在[b]CoordinatorLayout_2[/b]的gif效果中，我们上滑时FloatingActionButton会折叠消失，其实只需要如下两个属性就可以

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

第一个属性使FloatingActionButton显示在AppBarLayout的区域，第二个属性确定显示的具体位置。 [b]二、Toolbar[/b] 使用Toolbar首先要隐藏原有的ActionBar，[b]我们可以增加一个主题[/b]

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  </style>

[b]也可以扩展原有的主题,[/b]

<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>

[b]colorPrimary：[/b]对应ActionBar的颜色。 [b]colorPrimaryDark：[/b]对应状态栏的颜色 [b]colorAccent：[/b]对应EditText编辑时、FloatingActionButton背景等颜色。在布局文件中的用法可以参考上边的代码，之后在java代码中得到Toolbar，通过[code]setSupportActionBar(mToolbar);[/code]使Toolbar取代原本的ActionBar。 [b]接下来看一张图：[/b] [img]http://files.jb51.net/file_images/article/201608/20168195552721.png?2016719564[/img] Toolbar 标出了一些Toolbar常用的扩展方法，这样我们可以更好的根据需求定制我们的Toolbar了。具体的实践课参考源码。 [b]三、NavigationView[/b] [b]先看一下效果：[/b] [img]http://files.jb51.net/file_images/article/201608/20168195633498.gif?20167195652[/img] NavigationView 其实NavigationView就是用来实现我们常见的侧滑菜单的效果的。 [b]在布局文件中的代码：[/b]

<?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，通过[code]android:layout_gravity="start"[/code]设置为左侧滑菜单，同理[code]android:layout_gravity="end"[/code]代表右侧滑菜单。其中

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

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

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左上角显示三道横线，左上角可打开左滑菜单。 [b]还可以采用另外一种方式：[/b]

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

先设置Toolbar左上角图标，并绑定事件，通过[code]mDrawerLayout.openDrawer(GravityCompat.START);[/code]打开左滑菜单。 [b]以上两个方法，分别对应打开和关闭左滑菜单：[/b]

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

如果使用右滑菜单则将GravityCompat.START改成GravityCompat.END，即可实现右滑菜单的开关。以上就是Android中MD风格相关控件的总结，文章利用实例介绍的很详细，希望对大家在Android开发App中有所帮助。

全部评论(0)

上一篇：android图片处理让图片变成圆形
下一篇：Android中监听判断网络连接状态的方法

资讯排行榜
更多>>