Android仿微博个人详情页滚动到顶部的实例代码
个人详情页滑动到顶部
最近产品提了个新需求,需要实现点击app内的某个按钮跳转到个人详情页并且滑动到顶部,个人详情页的页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了google出的coordinatorlayout那套组件,由于app的个人详情页跟微博的相似,这里就拿微博为例来描述。微博默认的效果以及手动滑动到顶部的效果图如下。
个人详情页技术实现分析:
先看看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"> <android.support.design.widget.appbarlayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff6f6f6"> <android.support.design.widget.collapsingtoolbarlayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentscrim="@color/transparent" app:layout_scrollflags="scroll|exituntilcollapsed" app:toolbarid="@+id/toolbar"> <android.support.v7.widget.toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="48dp" android:visibility="invisible" android:background="@color/white" app:layout_collapsemode="pin"> </android.support.v7.widget.toolbar> </android.support.design.widget.collapsingtoolbarlayout> <android.support.design.widget.tablayout android:id="@+id/gift_tab" style="@style/customertablayout" android:layout_width="match_parent" android:layout_height="45dp" app:tabgravity="center" app:tabmode="scrollable" /> <view android:layout_width="match_parent" android:layout_height="1dp" android:background="#f2f2f2" /> </android.support.design.widget.appbarlayout> <android.support.v4.view.viewpager android:id="@+id/viewpager" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.design.widget.coordinatorlayout>
整个结构上分为两部分,appbarlayout(里面包含tablayout),viewpager,根节点是coordinatorlayout。上下滑动会引起appbarlayout的联动,悬浮在顶部,或者是跟着viewpager一起滑动以及视差效果之类的。目前我们要实现的是,在进入当前页面时,强制让appbarlayout滑动到顶部,使toolbar悬浮固定不动。那么该怎么做呢,一种思路是在oncreate()方法中,发post任务,页面渲染结束后,执行post任务,post的任务是调用appbarlayout的api方法,让appbarlayout往上滑。
appbarlayout.post(() -> { //...具体的滑动逻辑 });
操作appbarlayout滑动的是对应的behavior。在coordinatorlayout这套组件里面体现的淋漓尽致。感兴趣的可以好好分析下coordinatorlayout是如何完成事件分发的,如何让子view相互联动的。
这里具体的滑动逻辑伪代码为:
coordinatorlayout.behavior behavior = ((coordinatorlayout.layoutparams) appbarlayout.getlayoutparams()).getbehavior(); if (behavior instanceof appbarlayout.behavior) { appbarlayout.behavior appbarlayoutbehavior = (appbarlayout.behavior) behavior; if (mcollapsingheight != 0) { appbarlayoutbehavior.settopandbottomoffset(-math.abs(mcollapsingheight)); } }
我们将appbarlayout向上滑动了mcollapsingheight的高度,那么这个高度值是如何计算出来的呢。这个值,实际上是在最开始做个人详情页这个需求就已经得出的值。
mcollapsingheight = appbarlayout.getheight() - toolbar.getheight() - displayutils.dip2px(46);
这个值需要结合页面布局来计算,我们的页面布局两部分中,最上面的是appbarlayout,规定的是距离靠近toolbar的高度就产生渐变,toolbar开始固定位置,那么就需要按照这个公式计算mcollapsingheight。
完整的代码如下:
private void initview() { appbarlayout.addonoffsetchangedlistener((appbarlayout, verticaloffset) -> { mcollapsingheight = appbarlayout.getheight() - toolbar.getheight() - displayutils.dip2px(46); }); if (scrolltype != 0) { appbarlayout.post(() -> { coordinatorlayout.behavior behavior = ((coordinatorlayout.layoutparams) appbarlayout.getlayoutparams()).getbehavior(); if (behavior instanceof appbarlayout.behavior) { appbarlayout.behavior appbarlayoutbehavior = (appbarlayout.behavior) behavior; if (mcollapsingheight != 0) { appbarlayoutbehavior.settopandbottomoffset(-math.abs(mcollapsingheight)); } } }); } }
个人详情页相关:
在github上找到了一个仿微博个人详情页的开源项目,https://github.com/whisper92/weiboprofile,技术实现上采用的是scrollview,listview,部分代码可以看看。
总结
以上所述是小编给大家介绍的android仿微博个人详情页滚动到顶部的实例代码,希望对大家有所帮助