android oboe 混音_Android之AppBarLayout实现悬停吸附伸缩效果
前几天看到这样一个UI效果,然后自己也仿照实现了下:
看着挺酷的,也有很多App都用到了这个UI效果,比如开眼App和沪江开心词场就用到了.
所以下面就来简单实现一下这个UI效果吧.
组合三剑客
1.AppBarLayout
2.CoordinatorLayout
3.CollapsingToolbarLayout
实现上面的UI效果需要将这三剑客的组合起来用,下面先介绍下这三个控件:
AppBarLayout:
1.AppBarLayout简单介绍
AppBarLayout是android.support:design包中的支持的控件,继承自LinearLayout,实际上就是一个垂直分布的LinearLayout.父类视图结构如下:
public 其中官方文档中有这么两句话尤为重要:
This view depends heavily on being used as a direct child within a
CoordinatorLayout. If you use AppBarLayout within a differentViewGroup, most of it's functionality will not work.
AppBarLayoutalso requires a separate scrolling sibling in order to know when to scroll. The binding is done through theAppBarLayout.ScrollingViewBehaviorbehavior class, meaning that you should set your scrolling view's behavior to be an instance ofAppBarLayout.ScrollingViewBehavior.
意思就是说AppBarLayout 必须作为CoordinatorLayout的直接子类,否则很多功能是无法实现的.并且AppBarLayout 必须有一个能滚动的兄第ScrollView (实现了NestedScrollView,listview不可以哦),以此来通知AppBarLayout 何时进行滚动,兄弟View必须实现以下标识:
"@string/appbar_scrolling_view_behavior"官方给出的例子如下:
<android.support.design.widget.CoordinatorLayoutxmlns: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">2.AppBarLayout的具体使用
AppBarLayout直接子View的几种响应方式
AppbarLayout 可以指定当某个可滑动的兄弟View滑动手势改变时AppbarLayout 内部直接子View的响应动作,只要通过
app:layout_scrollFlags属性来指定响应动作,layout_scrollFlags有5种响应动作,下面简单介绍下:
app:layout_scrollFlags="scroll"
当子view设置响应动作为app:layout_scrollFlags="scroll"时,子view会随ScrollView 的滚动而滚动,就相当于这时的子view变成了ScrollView 的item了,会跟随item一起滚动.
<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:title="AppbarLayout"app:titleTextColor="@color/white"app:layout_scrollFlags="scroll"
>app:layout_scrollFlags="scroll|enterAlways"
当子view设置响应动作为app:layout_scrollFlags="scroll|enterAlways"时,当ScrollView 向下滑动时，子View 将直接向下滑动，而不管ScrollView 是否在滑动。
<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:title="AppbarLayout"app:titleTextColor="@color/white"app:layout_scrollFlags="scroll|enterAlways"
/>3.app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
当子view设置响应动作为app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"时,
当ScrollView 向下滑动的时候，子View(设置了enterAlwaysCollapsed 的子View)下滑至折叠的高度，当ScrollView 到达滑动范围的结束值的时候，滑动View剩下的部分开始滑动。这个折叠的高度是通过子View的minimum height (最小高度)指定的。
简单来说,就是第二种的加强版,当ScrollView 向下滑动时候,子view先露出半个头,当ScrollView 下滑到顶时,子view的头就全露出来了.
<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="200dp"android:minHeight="?attr/actionBarSize"app:title="AppbarLayout"android:gravity="bottom"android:layout_marginBottom="25dp"app:titleTextColor="@color/white"app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
/>4.app:layout_scrollFlags="scroll|exitUntilCollapsed"
当子view设置响应动作为app:layout_scrollFlags="scroll|exitUntilCollapsed"时,
当ScrollView 向上滑动时，子View先响应滑动事件，滑动至折叠高度，也就是通过minimum height 设置的最小高度后，就固定不动了，再把滑动事件交给 scrollview,然后 scrollview才开始滑动。
<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="200dp"android:minHeight="?attr/actionBarSize"app:title="AppbarLayout"android:gravity="bottom"app:titleTextColor="@color/white"app:layout_scrollFlags="scroll|exitUntilCollapsed"
/>app:layout_scrollFlags="scroll|snap"
当子view设置响应动作为app:layout_scrollFlags="scroll|snap"时,当ScrollView 下滑到顶部时,如果子view只露出30%的话,子view就会自动折叠回去,如果露出60%的话,就会自动展开.
简单来说,就是具有弹性且遵守就近原则,露的小就干脆不露头了,露的大,就全部出来了.
<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="200dp"android:minHeight="?attr/actionBarSize"app:title="AppbarLayout"android:gravity="bottom"app:titleTextColor="@color/white"app:layout_scrollFlags="scroll|snap"
/>CoordinatorLayout
CoordinatorLayout 用来调节和控制子View的滚动，而这些子View 的具体响应动作是通过 behavior 属性来指定的,你也可以根据需求自定义自己的behavior, 简单使用如下:,
<android.support.design.widget.CoordinatorLayoutxmlns: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">"@string/appbar_scrolling_view_behavior" >CollapsingToolbarLayout:
CollapsingToolbarLayout也是android.support:design包中的支持的控件,继承自FrameLayout.主要用于实现ToolBar的伸缩效果,而且必须为AppBarLayout的直接子View;
继承结构图如下:
java主要使用到的方法如下:
setCollapsedTitleGravity
void setCollapsedTitleGravity(设置折叠标题和垂直重力的水平对齐方式，当折叠边界中有额外空间超出标题本身所需的空间时，将使用该对齐方式
相关的XML属性：
CollapsingToolbarLayout_collapsedTitleGravity2.setExpandedTitleGravity
void setExpandedTitleGravity(设置展开标题和垂直重力的水平对齐方式，当扩展边界中有额外空间超出标题本身所需的空间时，将使用该对齐方式。
相关的XML属性：
CollapsingToolbarLayout_expandedTitleGravity3.setExpandedTitleTextColor
void setExpandedTitleTextColor(ColorStateList colors)设置展开标题的文本颜色。
4.setCollapsedTitleTextColor
void setCollapsedTitleTextColor(ColorStateList colors)设置折叠标题的文本颜色。
5.setCollapsedTitleTypeface
void setCollapsedTitleTypeface(字体字体)设置用于折叠标题的字体。
5.setExpandedTitleMarginBottom
void setExpandedTitleMarginBottom(以像素为单位设置底部展开的标题边距。
相关的XML属性：
CollapsingToolbarLayout_expandedTitleMarginBottom固定Toolbar
app:layout_collapseMode=6.更多方法见文档
关于AppBarLayout的三剑客组合就介绍的差不多了,想进一步了解的可以去查阅官方文档,上面都给出了连接的.
特别说明:
三剑客配合使用，可以做出一些很炫酷的UI效果.
但是前提必须满足:AppbarLayout 要作为CoordinatorLayout 的直接子View，而CollapsingToolbarLayout 要作为AppbarLayout 的直接子View ，否则，上面展示的效果将实现不了.
AppbarLayout实例展示
1.仿 [开眼App]个人中心效果
.xml布局文件:
<?xml version="1.0" encoding="utf-8"?>java文件:
public 效果展示:
2.仿[开眼App]搜索悬停界面:
.xml布局文件:
<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.RecyclerViewandroid:id="@+id/search_history_rv"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll"
>java文件:
package openeyes.dr.openeyes.view.activity;效果展示:
好了,到这里关于AppBarLayout三剑客的基本使用就介绍完了,使用三剑客能够实现许多炫酷的UI效果,感兴趣的朋友可以自行自定义.
大家都在看
在鸿蒙OS的威胁下，Fuchsia OS API来了 ！
android 自定义酷炫进度条动画
你必须要掌握的Android冷启动优化
地图应用增加RFID认证、证件号码识别等功能
欢迎前往安卓巴士博客区投稿，技术成长于分享
期待巴友留言，共同探讨学习
