快捷導(dǎo)航

Android仿微博個(gè)人詳情頁(yè)滾動(dòng)到頂部的實(shí)例代碼

更新時(shí)間：2019年05月26日 14:02:00 作者：xing_star

這篇文章主要介紹了Android仿微博個(gè)人詳情頁(yè)滾動(dòng)到頂部的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒家，需要的朋友可以參考下

個(gè)人詳情頁(yè)滑動(dòng)到頂部

最近產(chǎn)品提了個(gè)新需求，需要實(shí)現(xiàn)點(diǎn)擊App內(nèi)的某個(gè)按鈕跳轉(zhuǎn)到個(gè)人詳情頁(yè)并且滑動(dòng)到頂部，個(gè)人詳情頁(yè)的頁(yè)面交互稍微復(fù)雜，技術(shù)角度上包含了狀態(tài)欄顏色變換，view滑動(dòng)聯(lián)動(dòng)等問(wèn)題，技術(shù)實(shí)現(xiàn)上采用了Google出的CoordinatorLayout那套組件，由于App的個(gè)人詳情頁(yè)跟微博的相似，這里就拿微博為例來(lái)描述。微博默認(rèn)的效果以及手動(dòng)滑動(dòng)到頂部的效果圖如下。

個(gè)人詳情頁(yè)技術(shù)實(shí)現(xiàn)分析:

先看看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>

整個(gè)結(jié)構(gòu)上分為兩部分，AppBarLayout(里面包含TabLayout)，ViewPager，根節(jié)點(diǎn)是CoordinatorLayout。上下滑動(dòng)會(huì)引起AppBarLayout的聯(lián)動(dòng)，懸浮在頂部，或者是跟著viewPager一起滑動(dòng)以及視差效果之類的。目前我們要實(shí)現(xiàn)的是，在進(jìn)入當(dāng)前頁(yè)面時(shí)，強(qiáng)制讓AppBarLayout滑動(dòng)到頂部，使toolbar懸浮固定不動(dòng)。那么該怎么做呢，一種思路是在onCreate()方法中，發(fā)post任務(wù)，頁(yè)面渲染結(jié)束后，執(zhí)行post任務(wù)，post的任務(wù)是調(diào)用AppBarLayout的API方法，讓AppBarLayout往上滑。

appBarLayout.post(() -> {
  //...具體的滑動(dòng)邏輯
});

操作AppBarLayout滑動(dòng)的是對(duì)應(yīng)的Behavior。在CoordinatorLayout這套組件里面體現(xiàn)的淋漓盡致。感興趣的可以好好分析下CoordinatorLayout是如何完成事件分發(fā)的，如何讓子view相互聯(lián)動(dòng)的。

這里具體的滑動(dòng)邏輯偽代碼為:

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向上滑動(dòng)了mCollapsingHeight的高度，那么這個(gè)高度值是如何計(jì)算出來(lái)的呢。這個(gè)值，實(shí)際上是在最開(kāi)始做個(gè)人詳情頁(yè)這個(gè)需求就已經(jīng)得出的值。

mCollapsingHeight = appBarLayout.getHeight() - toolbar.getHeight() - DisplayUtils.dip2px(46);

這個(gè)值需要結(jié)合頁(yè)面布局來(lái)計(jì)算，我們的頁(yè)面布局兩部分中，最上面的是appBarLayout，規(guī)定的是距離靠近toolbar的高度就產(chǎn)生漸變，toolbar開(kāi)始固定位置，那么就需要按照這個(gè)公式計(jì)算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));
        }
      }
    });
  }
}

個(gè)人詳情頁(yè)相關(guān):

在Github上找到了一個(gè)仿微博個(gè)人詳情頁(yè)的開(kāi)源項(xiàng)目，https://github.com/whisper92/WeiboProfile，技術(shù)實(shí)現(xiàn)上采用的是ScrollView，ListView，部分代碼可以看看。

總結(jié)

以上所述是小編給大家介紹的Android仿微博個(gè)人詳情頁(yè)滾動(dòng)到頂部的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: