溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
個人詳情頁滑動到頂部
最近產品提了個新需求，需要實現點擊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"
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仿微博個人詳情頁滾動到頂部的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
