Android之AppBarLayout实现悬停吸附伸缩效果

2401_84149220

于 2024-04-22 20:11:09 发布

阅读量422

点赞数 4

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84149220/article/details/138090288

版权

程序员专栏收录该内容

297 篇文章 0 订阅

订阅专栏

1.AppBarLayout

2.CoordinatorLayout

3.CollapsingToolbarLayout

实现上面的UI效果需要将这三剑客的组合起来用,下面先介绍下这三个控件:

AppBarLayout:

1.AppBarLayout简单介绍

AppBarLayout是android.support:design包中的支持的控件,继承自LinearLayout,实际上就是一个垂直分布的LinearLayout.父类视图结构如下:

public class AppBarLayout

extends LinearLayout

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.LinearLayout

↳ android.support.design.widget.AppBarLayout

其中官方文档中有这么两句话尤为重要:

This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it’s functionality will not work.

AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior behavior class, meaning that you should set your scrolling view’s behavior to be an instance of AppBarLayout.ScrollingViewBehavior.

意思就是说AppBarLayout 必须作为CoordinatorLayout的直接子类,否则很多功能是无法实现的.并且AppBarLayout 必须有一个能滚动的兄第ScrollView (实现了NestedScrollView,listview不可以哦),以此来通知AppBarLayout 何时进行滚动,兄弟View必须实现以下标识:

app:layout_behavior=“@string/appbar_scrolling_view_behavior”

官方给出的例子如下:

<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.v4.widget.NestedScrollView

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior=“@string/appbar_scrolling_view_behavior”>

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

<android.support.design.widget.AppBarLayout

android:layout_height=“wrap_content”

android:layout_width=“match_parent”>

<android.support.v7.widget.Toolbar

…

app:layout_scrollFlags=“scroll|enterAlways”/>

<android.support.design.widget.TabLayout

…

app:layout_scrollFlags=“scroll|enterAlways”/>

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

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

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.Toolbar

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

app:title=“AppbarLayout”

app:titleTextColor=“@color/white”

app:layout_scrollFlags=“scroll”

</android.support.v7.widget.Toolbar>

app:layout_scrollFlags=“scroll|enterAlways”

当子view设置响应动作为app:layout_scrollFlags="scroll|enterAlways"时,当ScrollView 向下滑动时，子View 将直接向下滑动，而不管ScrollView 是否在滑动。

<android.support.v7.widget.Toolbar

android: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”

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.Toolbar

android: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”

4.app:layout_scrollFlags=“scroll|exitUntilCollapsed”

当子view设置响应动作为app:layout_scrollFlags="scroll|exitUntilCollapsed"时,

当ScrollView 向上滑动时，子View先响应滑动事件，滑动至折叠高度，也就是通过minimum height 设置的最小高度后，就固定不动了，再把滑动事件交给 scrollview,然后 scrollview才开始滑动。

<android.support.v7.widget.Toolbar

android: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”

app:layout_scrollFlags=“scroll|snap”

当子view设置响应动作为app:layout_scrollFlags="scroll|snap"时,当ScrollView 下滑到顶部时,如果子view只露出30%的话,子view就会自动折叠回去,如果露出60%的话,就会自动展开.

简单来说,就是具有弹性且遵守就近原则,露的小就干脆不露头了,露的大,就全部出来了.

<android.support.v7.widget.Toolbar

android: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.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.v4.widget.NestedScrollView

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior=“@string/appbar_scrolling_view_behavior” >

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

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

app:layout_behavior=“@string/appbar_scrolling_view_behavior” >

CollapsingToolbarLayout:

CollapsingToolbarLayout也是android.support:design包中的支持的控件,继承自FrameLayout.主要用于实现ToolBar的伸缩效果,而且必须为AppBarLayout的直接子View;

继承结构图如下:

java.lang.Object

↳ android.view.View

↳ android.view.ViewGroup

↳ android.widget.FrameLayout

↳ android.support.design.widget.CollapsingToolbarLayout

主要使用到的方法如下:

setCollapsedTitleGravity

void setCollapsedTitleGravity（int gravity）

设置折叠标题和垂直重力的水平对齐方式，当折叠边界中有额外空间超出标题本身所需的空间时，将使用该对齐方式

特别说明:

三剑客配合使用，可以做出一些很炫酷的UI效果.

但是前提必须满足:AppbarLayout 要作为CoordinatorLayout 的直接子View，而CollapsingToolbarLayout 要作为AppbarLayout 的直接子View ，否则，上面展示的效果将实现不了.

AppbarLayout实例展示

1.仿 [开眼App]个人中心效果

.xml布局文件:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

xmlns:fresco=“http://schemas.android.com/apk/res-auto”

xmlns:imagetext=“http://schemas.android.com/apk/res-auto”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:orientation=“vertical”

android:background=“@color/colorWhite”

<android.support.design.widget.AppBarLayout

android:id=“@+id/center_appbar_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:elevation=“0dp”

android:background=“@color/colorWhite”

android:fitsSystemWindows=“true”

<android.support.design.widget.CollapsingToolbarLayout

android:id=“@+id/collapsing_toobar”

android:layout_width=“match_parent”

android:layout_height=“260dp”

app:layout_scrollFlags=“scroll|exitUntilCollapsed”

app:contentScrim=“@color/colorGraylight”

fresco:expandedTitleTextAppearance=“@style/style_textsize1”

fresco:collapsedTitleTextAppearance=“@style/style_textsize”

fresco:collapsedTitleGravity=“left”

fresco:expandedTitleMarginTop=“185dp”

fresco:expandedTitleGravity=“left”

fresco:expandedTitleMarginStart=“30dp”

<FrameLayout

app:layout_scrollFlags=“scroll”

android:layout_width=“match_parent”

android:layout_height=“180dp”>

<com.facebook.drawee.view.SimpleDraweeView

android:id=“@+id/avatar_max”

android:layout_width=“match_parent”

android:layout_height=“170dp” />

<com.facebook.drawee.view.SimpleDraweeView

android:layout_marginLeft=“20dp”

android:layout_gravity=“bottom”

android:id=“@+id/avatar_min”

android:layout_width=“70dp”

android:layout_height=“70dp”

fresco:actualImageScaleType=“centerCrop”

fresco:placeholderImageScaleType=“centerCrop”

fresco:roundedCornerRadius=“50dp”

<FrameLayout

android:layout_marginTop=“180dp”

app:layout_scrollFlags=“scroll”

android:layout_width=“match_parent”

android:layout_height=“50dp”

<Button

android:id=“@+id/edit_btn”

android:layout_width=“60dp”

android:layout_height=“20dp”

android:layout_marginRight=“20dp”

android:layout_gravity=“right|center_vertical”

android:background=“@drawable/login_btn”

android:gravity=“center”

android:text=“编辑资料”

android:textColor=“@color/colorBlacklight”

android:textSize=“10sp” />

<TextView

android:layout_marginTop=“230dp”

app:layout_scrollFlags=“scroll”

android:textSize=“10sp”

android:id=“@+id/date”

android:layout_marginLeft=“20dp”

android:text=“2018.07.08注册”

android:textColor=“@color/colorGraylight”

android:layout_width=“match_parent”

android:layout_height=“wrap_content” />

<android.support.v7.widget.Toolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

app:layout_collapseMode=“pin”

android:layout_height=“?attr/actionBarSize”

</android.support.v7.widget.Toolbar>

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

<LinearLayout

android:gravity=“center_vertical”

android:layout_marginTop=“20dp”

android:background=“@color/colorGrayalpha”

android:layout_width=“match_parent”

android:layout_height=“70dp”>

<openeyes.dr.openeyes.widget.CustomImageTextView

android:id=“@+id/works”

android:layout_marginLeft=“40dp”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

imagetext:image=“@drawable/works2”

imagetext:text=“@string/works”

imagetext:textColor=“@color/colorGraylight”

</openeyes.dr.openeyes.widget.CustomImageTextView>

<openeyes.dr.openeyes.widget.CustomImageTextView

android:id=“@+id/attention”

android:layout_marginLeft=“90dp”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

imagetext:image=“@drawable/attention6”

imagetext:text=“@string/attention”

imagetext:textColor=“@color/colorGraylight”

</openeyes.dr.openeyes.widget.CustomImageTextView>

<openeyes.dr.openeyes.widget.CustomImageTextView

android:id=“@+id/fans”

android:layout_marginLeft=“90dp”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

imagetext:image=“@drawable/works2”

imagetext:text=“@string/fans”

imagetext:textColor=“@color/colorGraylight”

</openeyes.dr.openeyes.widget.CustomImageTextView>

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

<android.support.v7.widget.RecyclerView

android:id=“@+id/recycle_state”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior=“@string/appbar_scrolling_view_behavior”

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

java文件:

public class PersonPageActivity extends SwipeBackActivity {

@BindView(R.id.avatar_max)

SimpleDraweeView avatarBackground;

@BindView(R.id.avatar_min)

SimpleDraweeView avatarUser;

@BindView(R.id.date)

TextView registerDate;

@BindView(R.id.works)

CustomImageTextView works;

@BindView(R.id.attention)

CustomImageTextView attention;

@BindView(R.id.fans)

CustomImageTextView fans;

@BindView(R.id.center_appbar_layout)

AppBarLayout appBarLayout;

@BindView(R.id.collapsing_toobar)

CollapsingToolbarLayout collToobar;

@BindView(R.id.toolbar)

Toolbar toolbar;

@BindView(R.id.recycle_state)

RecyclerView recyclerView;

private SharedPreferences sharedPreferences = MyApplication.sharedPreferences;

private HistoryDB db;

private List details = null;

private DynamicStateRecyclerAdapter adapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_person_page);

ButterKnife.bind(this);

initView();

initData();

}

private void initData() {

db = new HistoryDB();

details= db.loadHistoryByUserId(sharedPreferences.getString(“userId”,“000”));

if (details==null||details.size()==0){

}else {

Collections.reverse(details);

adapter = new DynamicStateRecyclerAdapter(details,this);

LinearLayoutManager manager = new LinearLayoutManager(this);

manager.setOrientation(LinearLayoutManager.VERTICAL);

recyclerView.setLayoutManager(manager);

recyclerView.setAdapter(adapter);

recyclerView.setItemAnimator(new DefaultItemAnimator());//添加默认动画

//设置RecyclerView的item监听事件

setOnItemClickListener();

}

private void setOnItemClickListener() {

adapter.setOnItemClickListener(new DynamicStateRecyclerAdapter.OnItemClickListener() {

@Override

public void onItemClick(View itemview, DynamicStateRecyclerAdapter.MyViewHolder childview, int position) {

initVideoDetail( position);//初始化视频详情界面数据并实现跳转

}

});

}

/**

初始化视频详情界面数据,跳转至视频详情界面
*/

private void initVideoDetail(int position) {

Intent intent = new Intent(PersonPageActivity.this, VideoDetailActivity.class);

Bundle bundle = new Bundle();

bundle.putString(“title”,details.get(position).getTitle());//获取标题

bundle.putString(“time”, details.get(position).getDetail());

bundle.putString(“desc”, details.get(position).getDesc());//视频描述

bundle.putString(“blurred”, details.get(position).getBlurred());//模糊图片地址

bundle.putString(“feed”, details.get(position).getPhoto());//图片地址

bundle.putString(“video”, details.get(position).getVideo());//视频播放地址

bundle.putInt(“collect”, details.get(position).getCollect());//收藏量

bundle.putInt(“share”, details.get(position).getShare());//分享量

bundle.putInt(“reply”, details.get(position).getReply());//回复数量

intent.putExtras(bundle);

startActivity(intent);

}

private void initView() {

avatarBackground.setImageURI(Uri.parse(sharedPreferences.getString(“userIcon”,“”)));

avatarUser.setImageURI(Uri.parse(sharedPreferences.getString(“userIcon”,“”)));

toolbar.setTitle(sharedPreferences.getString(“userName”,“”));//设置标题

collToobar.setExpandedTitleColor(getResources().getColor(R.color.colorBlack));

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayShowHomeEnabled(true);

toolbar.setNavigationIcon(R.drawable.back_black);

toolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

finish();

}

});

}

@OnClick(R.id.attention)

public void onClick(){

startActivity(new Intent(this,MyAttentionActivity.class));

}

效果展示:

#####开眼app个人中心

2.仿[开眼App]搜索悬停界面:

.xml布局文件:

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

总结

可以看出，笔者的工作学习模式便是由以下 「六个要点」 组成：

❝ 多层次的工作/学习计划 + 番茄工作法 + 定额工作法 + 批处理 + 多任务并行 + 图层工作法❞

希望大家能将这些要点融入自己的工作学习当中，我相信一定会工作与学习地更富有成效。

下面是我学习用到的一些书籍学习导图，以及系统的学习资料。每一个知识点，都有对应的导图，学习的资料，视频，面试题目。

**如：我需要学习 **Flutter的知识。（大家可以参考我的学习方法）

Flutter 的思维导图（无论学习什么，有学习路线都会事半功倍）

Flutter进阶学习全套手册

Flutter进阶学习全套视频

大概就上面这几个步骤，这样学习不仅高效，而且能系统的学习新的知识。

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

[外链图片转存中…(img-s77ScosU-1713787840735)]

[外链图片转存中…(img-M1EhT3bj-1713787840737)]

[外链图片转存中…(img-htp8JmHZ-1713787840738)]

[外链图片转存中…(img-t0YGZHTC-1713787840739)]

[外链图片转存中…(img-0QZnAHsm-1713787840739)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

[外链图片转存中…(img-Lf42lyAR-1713787840740)]

总结

可以看出，笔者的工作学习模式便是由以下 「六个要点」 组成：

❝ 多层次的工作/学习计划 + 番茄工作法 + 定额工作法 + 批处理 + 多任务并行 + 图层工作法❞

希望大家能将这些要点融入自己的工作学习当中，我相信一定会工作与学习地更富有成效。

下面是我学习用到的一些书籍学习导图，以及系统的学习资料。每一个知识点，都有对应的导图，学习的资料，视频，面试题目。

**如：我需要学习 **Flutter的知识。（大家可以参考我的学习方法）

Flutter 的思维导图（无论学习什么，有学习路线都会事半功倍）

[外链图片转存中…(img-J4XikhDl-1713787840741)]

Flutter进阶学习全套手册

[外链图片转存中…(img-bpoJa4Dx-1713787840742)]

Flutter进阶学习全套视频

[外链图片转存中…(img-6eUa5gGD-1713787840744)]

大概就上面这几个步骤，这样学习不仅高效，而且能系统的学习新的知识。

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

2401_84149220

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android之AppBarLayout实现悬停吸附伸缩效果

实现上面的UI效果需要将这三剑客的组合起来用,下面先介绍下这三个控件:1.AppBarLayout简单介绍AppBarLayout是。
复制链接

扫一扫

专栏目录