亲宝软件园·资讯

展开

Android仿微博个人详情页滚动到顶部的实例代码

人气:0

个人详情页滑动到顶部

最近产品提了个新需求,需要实现点击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仿微博个人详情页滚动到顶部的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

您可能感兴趣的文章:

加载全部内容

相关教程
猜你喜欢
用户评论