当前位置: 移动技术网 > IT编程>移动开发>Android > 玩转AppBarLayout实现更酷炫的顶部栏

玩转AppBarLayout实现更酷炫的顶部栏

2019年07月24日  | 移动技术网IT编程  | 我要评论

一次性速冷冰袋,小金毛犬图片,广深铁路美股

上一篇文章《coordinatelayout的使用如此简单 》对coordinatelayout的使用做了讲解,今天我们再讲解常常与其一起使用的几个view:appbarlayout、collapsingtoolbarlayout以及toolbar。一下子出现3个陌生的view,是不是觉得很慌张~,很多人都写了这几个布局的使用,但是他们却没有有针对性的单独讲解每个view的作用以及如何使用,我看的很多文章都是一上来就把appbarlayout、collapsingtoolbarlayout以及toolbar写到一个布局里面去,然后一个一个布局属性去说,一下子感觉好混乱,本文是从toolbar开始说起,最终让你把这3个view彻底掌握下来!

其实,这三个view都是针对我们以往常用的actionbar的,就是针对我们的app的顶部的bar玩各种花样~我们往下看,看看他们把我们的app的”顶部栏”玩出个什么花样!

1 toolbar

toobar主要是用来替换actionbar的,换句话说,actionbar能做的,toolbar都能做。如果你对actionbar的使用比较熟悉,你会发现toolbar使用起来非常简单。ok,既然是替换,当然用toolbar的时候就得先去把actionbar给隐藏掉啦~

隐藏actionbar的方法有很多,可以通过代码的方式隐藏,也可以通过配置文件的方式,我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的apptheme标签中加入如下两行:

<item name="windowactionbar">false</item>
<item name="windownotitle">true</item>

当然了,你也可以新建一个<style>标签,将上面两行代码加入,并且将这个新建的标签作为<application>的theme。还可以选择通过将apptheme的parent设置为theme.appcompat.light.noactionbar的方式。方法很多,可以自己随便选。

接下来就是将toolbar放入到布局文件(没啥好解释的):

 <android.support.v7.widget.toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:background="?attr/colorprimary"
 android:layout_height="?android:attr/actionbarsize" />

最后将toobar作为“actionbar”来用

 toolbar toolbar = (toolbar) findviewbyid(r.id.toolbar);
 toolbar.settitle("这里是title");
 toolbar.setsubtitle("这里是子标题");
 toolbar.setlogo(r.drawable.icon); 
 setsupportactionbar(toolbar);

可以对toolbar设置logo、标题、子标题等等~还有很多其他的设置,自己去慢慢玩,这里不提啦~。当然了,也可以在布局文件中设置这些,在布局文件设置就不写啦,hongyang大神有篇博客写的挺好的《 android 5.x theme 与 toolbar 实战 》可以去参考一下。

看看效果:

如果toolbar仅仅是用来对以往的actionbar做一次替换,那也太没创意啦!完全没必要去替换了,因为它们表现出来的都是一样的,而且并没有让我们觉得用起来比actionbar方便。那为啥要替换呢,总应该有他的理由吧:actionbar是固定在顶部,并不能移动,我觉得这是最大的不好,而我们的toolbar可以让我们随便摆放,就就可以带来很多灵活性和效果啦!

正如你所看的这样,toolbar根本就不够看的,一点都不复杂。接下来我们继续学习在toolbar上面再套一层父view,让toolbar更有互动性。

2 appbarlayout

appbarlayout继承自linearlayout,布局方向为垂直方向。所以你可以把它当成垂直布局的linearlayout来使用。appbarlayout是在linearlayou上加了一些材料设计的概念,它可以让你定制当某个可滚动view的滚动手势发生变化时,其内部的子view实现何种动作。 

请注意:上面提到的某个可滚动view,可以理解为某个scrollview。怎么理解上面的话呢?就是说,当某个scrollview发生滚动时,你可以定制你的“顶部栏”应该执行哪些动作(如跟着一起滚动、保持不动等等)。那某个可移动的view到底是哪个可移动的view呢?这是由你自己指定的!如何指定,我们后面说。

2.1 appbarlayout子view的动作

内部的子view通过在布局中加app:layout_scrollflags设置执行的动作,那么app:layout_scrollflags可以设置哪些动作呢?分别如下:

(1) scroll:值设为scroll的view会跟随滚动事件一起发生移动。
什么意思呢?简单的说,就是当指定的scrollview发生滚动时,该view也跟随一起滚动,就好像这个view也是属于这个scrollview一样。

一张gif足以说明:

对应的布局文件

<android.support.design.widget.appbarlayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content">

 <android.support.v7.widget.toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?android:attr/actionbarsize"
 android:background="?attr/colorprimary"
 app:layout_scrollflags="scroll" />
</android.support.design.widget.appbarlayout>

(2) enteralways:值设为enteralways的view,当scrollview往下滚动时,该view会直接往下滚动。而不用考虑scrollview是否在滚动。 

看个动画片(y(^o^)y)(toolbar高度设为:?android:attr/actionbarsize,app:layout_scrollflags="scroll|enteralways"):

(3) exituntilcollapsed:值设为exituntilcollapsed的view,当这个view要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应scrollview的内部滑动事件。 

怎么理解呢?简单解释:在scrollview往上滑动时,首先是view把滑动事件“夺走”,由view去执行滑动,直到滑动最小高度后,把这个滑动事件“还”回去,让scrollview内部去上滑。看个gif感受一下(图中将高度设的比较大:200dp,并将最小高度设置为?android:attr/actionbarsize,app:layout_scrollflags="scroll|exituntilcollapsed"):

(4) enteralwayscollapsed:是enteralways的附加选项,一般跟enteralways一起使用,它是指,view在往下“出现”的时候,首先是enteralways效果,当view的高度达到最小高度时,view就暂时不去往下滚动,直到scrollview滑动到顶部不再滑动时,view再继续往下滑动,直到滑到view的顶部结束。 

来个gif感受一下(图中将高度设的比较大:200dp,并将最小高度设置为?android:attr/actionbarsize,app:layout_scrollflags="scroll|eneralways|enteralwayscollapsed"):

 

2.2 将appbarlayout与scrollview关联起来

前面说了一直反复说“当scrollview发生滚动时”,那么怎么将appbarlayout与scrollview关联起来呢?我们注意到,appbarlayout与scrollview之间动作“相互依赖”,这不就是我们上一篇《coordinatelayout的使用如此简单 》所学的内容吗?把scrollview和appbarlayout作为coordinatelayout的子view,然后编写一个behavior,在这个behavior里面判断当前的操作是应该让scrollview时刻保持在appbarlayout之下(即只要改变appbarlayout的位置就可以一起滑动),还是应该让scrollview内部滚动而不让appbarlayout位置发生变化等等这些需求,都是可以在behavior里面处理的。你可以去针对你的scrollview编写behavior。然而,我们看到我们的appbarlayout事先的功能比较复杂,如果我们自己去定义这样的效果,代码非常复杂,还要考虑很多方面,好在android帮我们写好啦,我们直接用就是了,这个scrollview就是nestedscrollview,请注意,它并没有继承scrollview,它继承的是framelayout,但是它实现的效果把它可以看成是scrollview。

把nestedscrollview放入到我们的layout文件里面就可以啦~~~,很方便~

 <android.support.v4.widget.nestedscrollview

 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:layout_behavior="@string/appbar_scrolling_view_behavior">

 <!--将你的内容放在这里-->

 </android.support.v4.widget.nestedscrollview>

有没有注意到有个属性:app:layout_behavior="@string/appbar_scrolling_view_behavior",它就是指定behavior的,appbar_scrolling_view_behavior对应的类的名称是:android.support.design.widget.appbarlayout$scrollingviewbehavior感兴趣的可以去分析源码。

好了,我们现在会用appbarlayout啦~是不是发现用起来so easy!接下来我们把剩下collapsingtoolbarlayout的给”消化”掉!

3 collapsingtoolbarlayout

collapsingtoolbarlayout是用来对toolbar进行再次包装的viewgroup,主要是用于实现折叠(其实就是看起来像伸缩~)的app bar效果。它需要放在appbarlayout布局里面,并且作为appbarlayout的直接子view。collapsingtoolbarlayout主要包括几个功能(参照了官方网站上内容,略加自己的理解进行解释):

(1) 折叠title(collapsing title):当布局内容全部显示出来时,title是最大的,但是随着view逐步移出屏幕顶部,title变得越来越小。你可以通过调用settitle函数来设置title。

(2)内容纱布(content scrim):根据滚动的位置是否到达一个阀值,来决定是否对view“盖上纱布”。可以通过setcontentscrim(drawable)来设置纱布的图片.

(3)状态栏纱布(status bar scrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setstatusbarscrim(drawable)来设置纱布图片,但是只能在lollipop设备上面有作用。

(4)视差滚动子view(parallax scrolling children):子view可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(ps:其实就是让这个view的滚动的速度比其他正常滚动的view速度稍微慢一点)。将布局参数app:layout_collapsemode设为parallax

(5)将子view位置固定(pinned position children):子view可以选择是否在全局空间上固定位置,这对于toolbar来说非常有用,因为当布局在移动时,可以将toolbar固定位置而不受移动的影响。 将app:layout_collapsemode设为pin。 

了解这些概念后,我们来看看布局吧~

<?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"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >


 <android.support.design.widget.appbarlayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/themeoverlay.appcompat.dark.actionbar">

 <android.support.design.widget.collapsingtoolbarlayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:expandedtitlemarginend="64dp"
 app:expandedtitlemarginstart="48dp"
 app:layout_scrollflags="scroll|exituntilcollapsed">

 <imageview
 android:id="@+id/main.backdrop"
 android:layout_width="wrap_content"
 android:layout_height="300dp"
 android:scaletype="centercrop"
 android:src="@drawable/material_img"
 app:layout_collapsemode="parallax" />

 <android.support.v7.widget.toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?android:attr/actionbarsize"
 app:layout_collapsemode="pin" />

 </android.support.design.widget.collapsingtoolbarlayout>
 </android.support.design.widget.appbarlayout>

 <android.support.v4.widget.nestedscrollview

 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:paddingtop="50dp"
 app:layout_behavior="@string/appbar_scrolling_view_behavior">

 <textview
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="@string/my_txt"
 android:textsize="20sp" />

 </android.support.v4.widget.nestedscrollview>

</android.support.design.widget.coordinatorlayout>

上面的都看得懂吧,每个陌生的属性都是讲过的哦,忘记了的话回头看,稍微解释一下,图片被设置为有视差的滑动,toolbar设置为固定不动,另外,collapsingtoolbarlayout会对title进行放大和缩小,我们看看效果吧~

如果你希望拖动过程中状态栏是透明的,可以在collapsingtoolbarlayout中加 app:statusbarscrim=”@android:color/transparent”,并且在oncreate中调用getwindow().addflags(windowmanager.layoutparams.flag_translucent_status)将状态栏设置为透明就好啦~

献上源码,请笑纳:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网