仿微博发现页吸顶效果

整个首页布局采用 CoordinatorLayout 布局，实现正常的吸顶效果。然后监听 AppBarLayout 的展开与折叠。我直接上代码吧。

首页外部布局：

  <androidx.coordinatorlayout.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appBar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"app:layout_behavior="com.ikongjian.widget.behavior.AppBarLayoutBehavior"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:titleEnabled="false"></com.google.android.material.appbar.CollapsingToolbarLayout><com.google.android.material.tabs.TabLayout/></com.google.android.material.appbar.AppBarLayout><androidx.viewpager.widget.ViewPager/></androidx.coordinatorlayout.widget.CoordinatorLayout>

这是一个很普通的采用 CoordinatorLayout 控件达到吸顶效果的布局。

代码操作


// 监听展开与关闭appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {@Overridepublic void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {int ver = verticalOffset;ver = Math.abs(ver);if (ver >= lvHeader.getBottom()) {if (!isHideHeaderLayout) {EventBus.getDefault().post(new HomeEventBean(2));}}}});// 因为我的底部是一个Viewpager，中间交互我采用了eventBus @Subscribe(threadMode = ThreadMode.MAIN)public void tabControl(HomeEventBean messageEvent) {if (isFastClick()) {return;} else {switch (messageEvent.getIsOpen()) {case 1:showHead();break;case 2:hideHead();break;}}}private long lastClickTime = 0;private final int CLICK_TIME = 500; //快速点击间隔时间// 判断按钮是否快速点击public boolean isFastClick() {long time = System.currentTimeMillis();if (time - lastClickTime < CLICK_TIME) {//判断系统时间差是否小于点击间隔时间return true;}lastClickTime = time;return false;}/*** 隐藏头部*/private void hideHead() {isHideHeaderLayout = true;VibrateUtils.vibrateOnce(getActivity(), 10);appBar.setTag(APPBAR_LAYOUT_TAG);topbar.setVisibility(View.GONE);new Handler().postDelayed(new Runnable() {@Overridepublic void run() {VibrateUtils.vibrateStop();}}, 100);}/*** 展开头部*/private void showHead() {isHideHeaderLayout = false;VibrateUtils.vibrateOnce(getActivity(), 10);appBar.setTag(null);topbar.setVisibility(View.VISIBLE);appBar.setExpanded(true, true);new Handler().postDelayed(new Runnable() {@Overridepublic void run() {VibrateUtils.vibrateStop();}}, 100);}

这里是首页的代码操作，其中做了一个手机震动的效果 VibrateUtils.vibrateOnce(getActivity(), 10); 关于震动工具类的代码我在最后贴出来。不需要的可以直接删除这行代码。

viewpager + fragment 的代码我就不贴了，之前有写过， tablayout + viewpager + fragment 快读拷贝的帖子，直接拿过来用。

fragment xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/refreshRoot"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/white"android:gravity="center_horizontal"android:orientation="vertical"><com.scwang.smart.refresh.layout.SmartRefreshLayoutandroid:id="@+id/sr_base"android:layout_width="match_parent"android:layout_height="match_parent"app:srlTextSecondary="释放进入二楼"><com.scwang.smart.refresh.header.TwoLevelHeaderandroid:id="@+id/header"android:layout_width="match_parent"android:layout_height="wrap_content"app:srlFloorRate="1.5" /><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_base"android:layout_width="match_parent"android:layout_marginRight="8dp"android:layout_marginLeft="8dp"android:layout_height="match_parent" /></com.scwang.smart.refresh.layout.SmartRefreshLayout>
</LinearLayout>

fragment 代码逻辑

这里使用kotlin写了，其实就是 SmartRefreshLayout  中 TwoLevelHeader 的监听。然后发送一个event事件通知外部展开。header.setOnTwoLevelListener {LogUtil.show("触发二楼事件")EventBus.getDefault().post(HomeEventBean(1));false}

到这里真个逻辑完成。当然还有一切补充效果，底部导航换icon，title。这些都是可以通过event事件完成的，我就不贴了。

震动工具类

/*** 作者　: chulipeng* 时间　: 6/8/21* 描述　: 震动帮助类*/public class VibrateUtils {private static Vibrator vibrator;/*** 简单震动* @param context     调用震动的Context* @param millisecond 震动的时间，毫秒*/@SuppressWarnings("static-access")public static void vibrateOnce(Context context, int millisecond) {vibrator = (Vibrator) context.getSystemService(context.VIBRATOR_SERVICE);vibrator.vibrate(millisecond);}/*** 复杂的震动* @param context 调用震动的Context* @param pattern 震动形式*                数组参数意义：*                      第一个参数为等待指定时间后开始震动，*                      震动时间为第二个参数。*                      后边的参数依次为等待震动和震动的时间* @param repeate 震动的次数，-1不重复，非-1为从pattern的指定下标开始重复 0为一直震动***/@SuppressWarnings("static-access")public static void vibrateComplicated(Context context, long[] pattern, int repeate) {vibrator = (Vibrator) context.getSystemService(context.VIBRATOR_SERVICE);vibrator.vibrate(pattern, repeate);}/*** 停止震动*/public static void vibrateStop() {if (vibrator != null) {vibrator.cancel();}}
}

如果对你的工作有些许帮助，希望点下赞！好长时间没有写博客，这里也就是我记录自己实现一些效果的储备库。所以不会讲解一些原理，仅仅是让你用更短的时间实现你想要的效果。

仿微博发现页吸顶效果相关推荐

Android - 吸顶效果布局篇
调研了一下微博和豆瓣等大体量的APP,发现内容详情页的评论吸顶效果非常常见. 以截图自豆瓣的效果为例,当上划至内容部分消失时,滑动中的回复条会置顶,并保持在位置不动. 笔者通过实践,记录下目前发现的最 ...
【使用篇】WebView 实现嵌套滑动，丝滑般实现吸顶效果，完美兼容 X5 webview
本文首发我的公众号徐公,收录于 Github·AndroidGuide,这里有 Android 进阶成长知识体系, 希望我们能够一起学习进步,关注公众号徐公,5 年中大厂程序员,一起建立核心竞争力背 ...
30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...
flutter 吸顶效果
flutter 吸顶问题今天在做一个吸顶效果时,发现了一些问题: 我是用的是官方widget CustomScrollView+SliverAppBar 可向下拉伸并虚化背景功能代码: Custo ...
微信小程序搜索框吸顶效果实现
业务场景主页要做一个搜索框,滑动主页页面的时候,搜索框始终位于导航栏下面,位置不变,不随页面的滑动而滑动,这种效果被称为"吸顶"效果. 点击搜索框,弹出上层搜索详情的视图层,搜索 ...
移动软件开发-仿微信发现页
一.实验目标 1.了解安卓开发的一些基础知识:2.学习如何仿微信发现页创建布局,了解安卓开发的线性布局和一些对应的组件. 二.实验步骤 1.实验准备: 下载android studio,并配置好相应的 ...
vue开发（三）vue-scroller实现下拉刷新，上拉加载笔记（包括吸顶效果失效的问题）
项目中要实现下拉刷新,上拉加载,首先想到了vue-scroller. npm网址:vue-scroller 简单记录一下自己的使用过程,以备不时之需. 安装依赖: npm install vue-sc ...
axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果
昆仑女神的故事,sem优化,破产管理人在移动端页面上,用手上下滑时,超过一定向上滑动时,菜单栏能有吸顶效果,如何用axure实现呢? 作者在最近在手机移动端的时候,有一个动画,希望达到效果:用手上下 ...

仿微博发现页吸顶效果

仿微博发现页吸顶效果相关推荐

最新文章

热门文章