-
AppBarLayout
2019-05-27 11:17:37简介 xxx 监听 ...package widget.appbarlayout; import com.google.android.material.appbar.AppBarLayout; /** * Created on 2019/5/27. * * @author 郑少鹏 * @desc AppBarLayou...简介
xxx
属性
- app:layout_scrollFlags
- app:elevation
0dp除默阴影,android:elevation="0dp"无效(兼容库)。
监听
一
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { float percent = (Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()); materialToolbar.setAlpha(percent); } });
二
BaseAppBarLayoutStateChangeListener
package widget.appbarlayout; import com.google.android.material.appbar.AppBarLayout; /** * Created on 2019/5/27. * * @author 郑少鹏 * @desc AppBarLayout状变监听 */ public abstract class BaseAppBarLayoutStateChangeListener implements AppBarLayout.OnOffsetChangedListener { public enum State { /** * 展开 */ EXPANDED, /** * 折叠 */ COLLAPSED, /** * 中间 */ IDLE } private State mCurrentState = State.IDLE; @Override public final void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (i == 0) { if (mCurrentState != State.EXPANDED) { onStateChanged(appBarLayout, State.EXPANDED); } mCurrentState = State.EXPANDED; } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { if (mCurrentState != State.COLLAPSED) { onStateChanged(appBarLayout, State.COLLAPSED); } mCurrentState = State.COLLAPSED; } else { if (mCurrentState != State.IDLE) { onStateChanged(appBarLayout, State.IDLE); } mCurrentState = State.IDLE; } } /** * 状变 * * @param appBarLayout AppBarLayout * @param state State */ public abstract void onStateChanged(AppBarLayout appBarLayout, State state); }
主代码
mineChildFragmentAbl.addOnOffsetChangedListener(new BaseAppBarLayoutStateChangeListener() { @Override public void onStateChanged(AppBarLayout appBarLayout, State state) { if (state == State.COLLAPSED) { // 折叠 mineChildFragmentTv.setText("..."); } else { // 中间 mineChildFragmentTv.setText(""); } } });
动设
说明
CollapsingToolbarLayout自身app:layout_scrollFlags含scroll时下设layout_behavior布局无法垂直居中。不设scroll上无法滑而吸顶。动设即可。
解决
AppBarLayoutKit
package com.zsp.library.appbarlayout.kit; import android.view.View; import com.google.android.material.appbar.AppBarLayout; /** * Created on 2019/6/14. * * @author 郑少鹏 * @desc AppBarLayoutKit */ public class AppBarLayoutKit { /** * 滑标志 * <p> * CollapsingToolbarLayout自身app:layout_scrollFlags含scroll时下设layout_behavior布局无法垂直居中。 * 不设scroll上无法滑而吸顶。 * 动设即可。 * * @param view 视图 * @param flags 标志 */ public static void setScrollFlags(View view, int flags) { AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) view.getLayoutParams(); params.setScrollFlags(flags); view.setLayoutParams(params); } }
主代码
- MaterialToolbar
AppBarLayoutKit.setScrollFlags(activityNoticeFragmentMt, 0); AppBarLayoutKit.setScrollFlags(activityNoticeFragmentMt, AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS | AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP);
- CollapsingToolbarLayout
AppBarLayoutKit.setScrollFlags(myIntegrationFragmentCtl, 0); AppBarLayoutKit.setScrollFlags(myIntegrationFragmentCtl, AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);
-
AppBarLayout Demo
2016-12-13 15:40:14AppBarLayout使用总结demo。有需要的可以下载看看,如有更好的实现,请指点。 -
AppBarLayout disappears
2020-11-30 19:24:29<div><p>When I implement your library AppBarLayout disappears, could you recommend how to fix it?</p><p>该提问来源于开源项目:medyo/android-about-page</p></div> -
AppBarLayout学习
2018-12-03 09:50:15AppBarLayout是一个垂直的LinearLayout,实现了很多和协调布局一起合作的滚动属性。其子View可以通过setScrollFlags()或在xml布局中通过app:layout_scrollFlags属性设置想要的滚动行为。 AppBarLayout很多行为依赖于...AppBarLayout是一个垂直的LinearLayout,实现了很多和协调布局一起合作的滚动属性。其子View可以通过setScrollFlags()或在xml布局中通过app:layout_scrollFlags属性设置想要的滚动行为。
AppBarLayout很多行为依赖于CoordinatorLayout。如果你使用别的ViewGroup装AppBarLyout,很多功能就没有了。
AppBarLayout不能滚动,但是要有一个可以滚动的兄弟View。兄弟View需要设置AppBarLayout.ScrollingViewBehavior。
AppBarLayout是什么,效果是怎样的
使用AndroidStudio建立一个ScrollActivity,模板就是使用的AppBarLayout,不过例子里还使用了CollapsingToolbarLayout,暂时先不考虑这个,因此对例子做了点修改,xml布局如下:
<?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" tools:context=".ScrollingActivity2"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar app:title="AppBarLayout学习" android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="@android:dimen/app_icon_size"></android.support.v7.widget.Toolbar>l <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic_11"/> </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" tools:showIn="@layout/activity_scrolling2"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/text_margin" android:text="@string/large_text"/> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
父布局是CoordinatorLayout,然后主要两个布局:AppBarLayout以及NestedScrollView,NestedScrollView设置了layout_behavior属性,这样AppBarLayout里面的布局就可以跟着一起滚动,不过由于这里还没给AppBarLayout里面的scrollFlags设置参数,目前运行效果如下:
可以看到下面的布局滚动,上面的AppBarLayout不为所动。下面就开始为View设置不同属性,看看效果。
scrollFlags的效果
scrollFlags一共有五个值,一些值是可以组合作用在View上的。五个值分别是:
- scroll:子View随ScrollView一起滚动
- enterAlways:只要ScrollView向下移动,子View立即响应滚动
- enterAlwaysCollapsed:当ScrollView滚动最顶层时,子View响应滚动事件,直至子View完全显示
- exitUtilCollapsed:只要ScrollView向上滚动,子View立即响应滚动,直到达到最小高度
- snap:当Scrollview滚动到最顶层时,子View响应滚动事件。松开手指时,依据AppBarLayout移出屏幕区域与生育可视区域对比,自动移向占比大的区域。
scroll
修改AppBarLayout的子View的属性如下:
<android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar app:layout_scrollFlags="scroll" app:title="AppBarLayout学习" android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="@android:dimen/app_icon_size"></android.support.v7.widget.Toolbar>l <ImageView app:layout_scrollFlags="scroll" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic_11"/> </android.support.design.widget.AppBarLayout>
运行效果如下:
可以看到ToolBar和ImageView就好像是ScrollView里的内容一样,跟着上下滚动;不过需要注意的是,如果单独设置ImageView的为scroll,而不设置ToolBar,是没有效果的,因为ToolBar把ImageView给顶住了,只有下面的ScrollView会滚动。
scroll属性是其他属性的基础,并且由于AppBarLayout是一个垂直的LinearLayout,因此一旦一个View没有设置该属性,那么该View之后的效果都会生效,可以简单认为是该View把后面View的滚动效果给顶住了。
enterAlways
在上面例子的基础上,设置ImageView的scrollFlags=“scroll|enterAlways”,如下:
<ImageView app:layout_scrollFlags="scroll|enterAlways" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic_11"/>
此时滚动效果如下所示:
此时可以看到,向上滚动,没有区别;向下滚动时,由于ImageView设置了enterAlways,因此首先滚动,直至出现了,然后ScrollView滚动,最后才是ToolBar显示。
可以理解为设置了enterAlways属性的View在向下滚动时的优先级高于ScrollView本身,可以实现分段滚动的效果。
enterAlwaysCollapsed
enterAlwaysCollapsed是进一步修饰enterAlways属性的,上面的例子看到设置了enterAlways后,向下滚动时,ImageView首先滚动,然后才是ScrollView滚动,而设置了enterAlwaysCollapsed之后,再配合minHeight属性,可以有不同的效果,先看xml设置:
<ImageView android:minHeight="60dp" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic_11"/>
效果如下图:
可以看到设置了minHeight以及enterAlwaysCollapsed后,ImageView先滚动到最小高度,然后ScrollView滚动,最后ImageView和ToolBar一起滚动。
exitUtilCollapsed
当向上滑动时,称为exit;向下滑动时,称为enter,这样理解起enterAlways和enterAlwaysCollpased就很好理解了,理解exitUtilCollapsed也好理解了。
exitUtilCollapsed用于设置向上滚动时的最小高度,吸顶的功能。举个例子:
<ImageView android:minHeight="60dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic_11"/>
效果如下:
可以看到,一开始跟着ScrollView一起向上滚动,当到达最小高度后,就不再滚动,吸顶了。 向下滚动时,当ScrollView滚动顶部了,才继续滚动了。
snap
snap是一个根据View在屏幕上显示范围进行调整的一个属性,看下效果其实就明白是怎么回事了。
<ImageView android:minHeight="60dp" app:layout_scrollFlags="scroll|snap" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/pic_11"/>
效果如下图:
snap属性会根据View的显示范围,判定是显示还是隐藏。
监听AppBarLayout滚动
可以通过设置监听器来监听AppBarLayout的移动,比如说随着滚动,更改AppBarLayout的透明度,代码如下:
app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, offset -> val toolBarHeight = toolBar.height if (Math.abs(offset) <= toolBarHeight) { appBarLayout.alpha = 1.0f - Math.abs(offset) * 1.0f / toolBarHeight } })
运行效果如下:
当向上滑时,offset的变化是0–>负数;向下滑时,负数—>0。
总结
AppBarLayout是一个垂直的LinearLayout,内部可以布局多个View,在CoordinatorLayout内部与ScrollView共同作用,一共有五种scrollFlags设置,scroll是其他属性的基础。
后面会继续学习与CollapsingToolbarLayout一起的使用。
参考
-
AppBarLayout结合CoordinateLayout
2016-06-02 13:56:33AppBarLayout结合CoordinateLayout和Toolbar以及CollapsingToolbarLayout -
Prevent RecyclerView from scrolling under AppBarLayout before AppBarLayout is collapsed
2020-11-29 13:40:30<div><p>Prevent RecyclerView from scrolling under AppBarLayout before AppBarLayout is collapsed</p><p>该提问来源于开源项目:henrytao-me/smooth-app-bar-layout</p></div> -
Android代码-AppBarLayout
2019-08-06 03:06:42This is a smooth version of Google Support Design AppBarLayout. If you are using AppBarLayout, you will know it has an issue with fling. Check out these threads to know about that problem: ... -
AppBarLayout相关
2018-08-24 10:36:29AppBarLayout状态设置 //收起 appbar.setExpanded(false); //展开 appbar.setExpanded(true);AppBarLayout状态设置
//收起 appbar.setExpanded(false); //展开 appbar.setExpanded(true);
AppBarLayout 监听事件 appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { //verticalOffset是滑动的距离 //完全展开 if (verticalOffset >= 0) { LogUtil.e("HomeFragment : 0"); spring.setEnable(true); } else { spring.setEnable(false); EventBusBean eventBusBean = new EventBusBean(); eventBusBean.setShangla(199); eventBusBean.setShangla(false); EventBus.getDefault().post(eventBusBean); LogUtil.e("verticalOffset : " + verticalOffset); // appbar.getsetExpanded appbar.getTotalScrollRange(); LogUtil.e("appbar.getTotalScrollRange() : " + appbar.getTotalScrollRange()); //收起状态 appbar.getTotalScrollRange()获取的是appBarLayout的高 Math.abs()获取绝对值 if (Math.abs(verticalOffset) >= Math.abs(appbar.getTotalScrollRange())) { EventBusBean eventBusBean1 = new EventBusBean(); eventBusBean.setShangla(199); eventBusBean.setShangla(true); EventBus.getDefault().post(eventBusBean); } } } });
-
AppBarLayout原理分析
2020-10-30 11:46:17一、AppBarLayout为什么可以滑动 AppBarLayout滑动分为两种情况: 滑动AppBarLayout引起的滑动 滑动底部的列表引起的滑动 1、滑动AppBarLayout引起的滑动 我们分别继承了MyCoordinatorLayout、MyAppbarLayout、...一、AppBarLayout为什么可以滑动
AppBarLayout滑动分为两种情况:
- 滑动AppBarLayout引起的滑动
- 滑动底部的列表引起的滑动
1、滑动AppBarLayout引起的滑动
我们分别继承了MyCoordinatorLayout、MyAppbarLayout、MyAppbarBehavior以及MyAppbarScrollingViewBehavior,在onInterceptTouchEvent和onTouchEvent中打印日志。MyCoordinatorLayout重写如下,其他类类似。
@Override public boolean onInterceptTouchEvent(MotionEvent ev) { Log.e(TAG, "------------------------------------------------"); Log.e(TAG, "onInterceptTouchEvent>>start"); boolean result = super.onInterceptTouchEvent(ev); Log.e(TAG, "onInterceptTouchEvent>>result:" + result); Log.e(TAG, "------------------------------------------------"); return result; } @Override public boolean onTouchEvent(MotionEvent ev) { Log.e(TAG, "------------------------------------------------"); Log.e(TAG, "onTouchEvent>>start"); boolean result = super.onTouchEvent(ev); Log.e(TAG, "onTouchEvent>>result:" + result); Log.e(TAG, "------------------------------------------------"); return result; }
当我们滑动AppBarLayout时打印日志如下:
com.demo.app E/MyCoordinatorLayout: ------------------------------------------------ com.demo.app E/MyCoordinatorLayout: onInterceptTouchEvent>>start com.demo.app E/MyAppbarBehavior: onInterceptTouchEvent>>start com.demo.app E/MyAppbarBehavior: onInterceptTouchEvent>>result:false com.demo.app E/MyAppbarScrollingViewBehavior: onInterceptTouchEvent>>result:false com.demo.app E/MyAppbarBehavior: onInterceptTouchEvent>>start com.demo.app E/MyAppbarBehavior: onInterceptTouchEvent>>result:false com.demo.app E/MyAppbarScrollingViewBehavior: onInterceptTouchEvent>>result:false com.demo.app E/MyCoordinatorLayout: onInterceptTouchEvent>>result:false com.demo.app E/MyCoordinatorLayout: ------------------------------------------------ com.demo.app E/MyAppbarLayout: ------------------------------------------------ com.demo.app E/MyAppbarLayout: onInterceptTouchEvent>>start com.demo.app E/MyAppbarLayout: onInterceptTouchEvent>>result:false com.demo.app E/MyAppbarLayout: ------------------------------------------------ com.demo.app E/MyAppbarLayout: ------------------------------------------------ com.demo.app E/MyAppbarLayout: onTouchEvent>>start com.demo.app E/MyAppbarLayout: onTouchEvent>>result:false com.demo.app E/MyAppbarLayout: ------------------------------------------------ com.demo.app E/MyCoordinatorLayout: ------------------------------------------------ com.demo.app E/MyCoordinatorLayout: onTouchEvent>>start com.demo.app E/MyAppbarBehavior: onTouchEvent>>start com.demo.app E/MyAppbarBehavior: onTouchEvent>>result:true com.demo.app E/MyAppbarBehavior: onTouchEvent>>start com.demo.app E/MyAppbarBehavior: onTouchEvent>>result:true com.demo.app E/MyCoordinatorLayout: onTouchEvent>>result:true com.demo.app E/MyCoordinatorLayout: ------------------------------------------------ com.demo.app E/MyCoordinatorLayout: ------------------------------------------------ com.demo.app E/MyCoordinatorLayout: onTouchEvent>>start com.demo.app E/MyAppbarBehavior: onTouchEvent>>start com.demo.app E/MyAppbarBehavior: onTouchEvent>>result:true com.demo.app E/MyCoordinatorLayout: onTouchEvent>>result:true com.demo.app E/MyCoordinatorLayout: ------------------------------------------------
通过上面的日志我们可以看出整个事件处理的流程。事件最先到CoordinatorLayout的onInterceptTouchEvent,CoordinatorLayout会调用Behavior的onInterceptTouchEvent,Behavior返回false不处理事件,即CoordinatorLayout的onInterceptTouchEvent返回false。
然后事件传递到AppbarLayout的onInterceptTouchEvent,AppbarLayout返回false不拦截事件。即所有控件都没有拦截事件。
然后事件传递到AppbarLayout的onTouchEvent,AppbarLayout不处理事件返回false。
然后事件向上传递到CoordinatorLayout的onTouchEvent,CoordinatorLayout会调用Behavior的onTouchEvent处理事件,Behavior的onTouchEvent处理了事件返回true,因此CoordinatorLayout的onTouchEvent也会返回true。这代表事件最终由CoordinatorLayout处理,CoordinatorLayout又会在onTouchEvent中调用Behavior的onTouchEvent,即最终事件的处理是在Behavior的onTouchEvent中。
AppBarLayout.Behavior是继承HeaderBehavior,onTouchEvent实际在HeaderBehavior中实现的。代码如下:public boolean onTouchEvent( @NonNull CoordinatorLayout parent, @NonNull V child, @NonNull MotionEvent ev) { boolean consumeUp = false; switch (ev.getActionMasked()) { case MotionEvent.ACTION_MOVE: final int activePointerIndex = ev.findPointerIndex(activePointerId); if (activePointerIndex == -1) { return false; } final int y = (int) ev.getY(activePointerIndex); int dy = lastMotionY - y; lastMotionY = y; // We're being dragged so scroll the ABL scroll(parent, child, dy, getMaxDragOffset(child), 0); break; ... } }
在ACTION_MOVE时通过scroll方法实现滑动,scroll方法最终会执行ViewCompat.offsetTopAndBottom。
因此滑动AppBarLayout时AppBarLayout滑动是通过在Behavior的onTouchEvent中实现的。但是底部的列表怎么会滑动呢?
因为AppBarLayout的底部列表的父控件是CoordinatorLayout,AppBarLayout滑动时底部列表的Behavior的onDependentViewChanged会回调。底部列表的Behavior一般设置为app:layout_behavior="@string/appbar_scrolling_view_behavior",即AppBarLayout中的ScrollingViewBehavior。其关键代码如下:@Override public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) { return dependency instanceof AppBarLayout; } @Override public boolean onDependentViewChanged( @NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) { offsetChildAsNeeded(child, dependency); updateLiftedStateIfNeeded(child, dependency); return false; }
layoutDependsOn中是依赖AppBarLayout,即当AppBarLayout滑动时,就会回调onDependentViewChanged,在offsetChildAsNeeded中实现列表的滑动。
2. 滑动底部的列表引起的滑动
NestedScrollView滑动的时候,会通过CoordinatorLayout将相关的方法代理给Behavior来处理(这里也就是AppBarLayout.Behavior)。根据嵌套滑动机制,会首先调用onStartNestedScroll()方法。
正常情况下,onStartNestedScroll()是会返回true,也就是告诉系统我要消费滑动,后面就会继续进入onNestedPreScroll()方法。public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int type) { if (dy != 0) { int min, max; if (dy < 0) { // 向下滚动 min = -child.getTotalScrollRange(); // 该方法上面已经讲过了,获取到可滚动距离,然后取负数 max = min + child.getDownNestedPreScrollRange(); // 判断有没有向下滑动需要立即滑出的距离 } else { // 向上滚动 min = -child.getUpNestedPreScrollRange(); // 内部就是getTotalScrollRange() max = 0; } if (min != max) { // 通过scroll方法进行滑动处理 consumed[1] = scroll(coordinatorLayout, child, dy, min, max); } } }
通过scroll实现AppBarLayout的滑动。根据上节介绍的,因为CoordinatorLayout的原因AppBarLayout滑动后就会回调列表的Behavior的onDependentViewChanged方法,然后实现列表的滑动,所以感觉AppBarLayout和列表整个界面在一起滑动。
-
Bootstrap环境搭建
-
用微服务spring cloud架构打造物联网云平台
-
蓝桥杯 填算式
-
2021 年该学的 CSS 框架 Tailwind CSS 实战视频
-
flowable在办任务查询
-
【硬核】一线Python程序员实战经验分享(1)
-
MaxScale 实现 MySQL 读写分离与负载均衡
-
柯尼卡美能达 柯美 C266 C256 C226 彩色复印机中文维修手册.rar
-
vue3从0到1-超详细
-
216种Web安全颜色谱
-
MySQL 管理利器 mysql-utilities
-
Samba 服务配置与管理
-
java连连看小游戏(含设计书).zip
-
中台详解(上)——什么是中台
-
中控设备搜索工具deviceSettingTool.exe
-
MySql数据库列表数据分页查询、全文检索API零代码实现
-
串口功能,添加了多发扩展区。
-
【开发工具】eclipse配置jdk
-
DameWareNT.rar
-
rgw daemon命令注册与处理代码流程简介