我要评论要使用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中有所帮助。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论