欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

总结Android中MD风格相关控件

程序员文章站 2024-03-05 13:21:49
要使用md风格控件,首先需要在gradle中加入support design library,例如: compile 'com.android.support...

要使用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>

看一下效果:

总结Android中MD风格相关控件
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>

看一下效果:

总结Android中MD风格相关控件
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();
      }
    });

看效果:

总结Android中MD风格相关控件
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。

接下来看一张图:

总结Android中MD风格相关控件
toolbar

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

三、navigationview

先看一下效果:

总结Android中MD风格相关控件
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中有所帮助。