使用 AppBarLayout 和 ViewPager 实现 CoordinatorLayout 的回顶部功能

Android

2023-09-27 14:45:54

使用 CoordinatorLayout、AppBarLayout 和 ViewPager 实现 Android 中的回顶部功能

什么是 CoordinatorLayout？

CoordinatorLayout 是 Android 中的一个强大布局，它允许您协调多个子视图之间的交互。它提供了许多有用的功能，包括处理滚动、定位和调整子视图。

什么是 AppBarLayout？

AppBarLayout 是 CoordinatorLayout 的一个子类，用于创建具有折叠栏行为的布局。它可以根据滚动、滑动或其他交互而折叠。

什么是 ViewPager？

ViewPager 是另一个 CoordinatorLayout 的子类，它允许您在多个页面之间滑动。它可以与 AppBarLayout 一起使用，以实现滑动到顶部折叠栏的效果。

实现回顶部功能

要使用 AppBarLayout 和 ViewPager 实现 CoordinatorLayout 的回顶部功能，请按照以下步骤操作：

创建 CoordinatorLayout 布局

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 其他布局组件 -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

添加 AppBarLayout

<androidx.coordinatorlayout.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlways">

    <!-- 标题栏或工具栏 -->

</androidx.coordinatorlayout.widget.AppBarLayout>

添加 ViewPager

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

添加回顶部按钮

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_scroll_to_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_arrow_upward" />

处理按钮点击事件

findViewById(R.id.fab_scroll_to_top).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        ViewPager viewPager = findViewById(R.id.viewpager);
        viewPager.setCurrentItem(0);
    }
});

定制回顶部行为

您可以通过调整 AppBarLayout 的布局标志来自定义回顶部行为：

scroll：折叠栏随着内容滚动
enterAlways：折叠栏始终可见，即使内容未滚动
exitUntilCollapsed：折叠栏在向下滚动时折叠
snap：折叠栏在达到一定阈值时折叠或展开

示例代码

以下是一个完整的示例代码，展示了如何使用 AppBarLayout 和 ViewPager 实现 CoordinatorLayout 的回顶部功能：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlways">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="CoordinatorLayout 回顶部" />

    </androidx.coordinatorlayout.widget.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_scroll_to_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_arrow_upward" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyPagerAdapter());

        findViewById(R.id.fab_scroll_to_top).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager.setCurrentItem(0);
            }
        });
    }
}