android tab 吸顶

原创

mob64ca12d94299 2024-03-10 06:33:23 ©著作权

文章标签 Android ide 监听器 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d94299的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android Tab 吸顶

在Android开发中，实现Tab吸顶效果是一种常见的需求。通过Tab吸顶，可以让页面中的Tab栏在向上滚动时固定在屏幕顶部，以便用户随时切换不同的标签页内容。本文将介绍如何在Android应用中实现Tab吸顶效果。

实现思路

要实现Tab吸顶效果，我们可以通过自定义布局和滚动监听来实现。具体思路如下：

创建一个包含Tab栏和ViewPager的布局。
使用CoordinatorLayout作为根布局，并在AppBarLayout中包含TabLayout和ViewPager。
添加一个滚动监听器，当ViewPager滚动时，判断TabLayout的位置并固定在屏幕顶部。

代码示例

下面是一个简单的示例，演示如何实现Tab吸顶效果：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="
    xmlns:app="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"/>

    </com.google.android.material.appbar.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"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在Activity或Fragment中，我们还需要添加滚动监听器：

ViewPager viewPager = findViewById(R.id.viewPager);
TabLayout tabLayout = findViewById(R.id.tabLayout);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 判断TabLayout位置并固定
        if (tabLayout.getTop() < 0) {
            tabLayout.offsetTopAndBottom(-tabLayout.getTop());
        }
    }

    @Override
    public void onPageSelected(int position) {}

    @Override
    public void onPageScrollStateChanged(int state) {}
});

示例应用

为了更好地演示Tab吸顶效果，我们可以创建一个包含多个标签页的示例应用。在示例应用中，我们可以使用ViewPager加载不同的Fragment，并在TabLayout中显示对应的标签。

下面是一个简单的示例：

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);
        TabLayout tabLayout = findViewById(R.id.tabLayout);
        
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new Fragment1(), "Tab 1");
        adapter.addFragment(new Fragment2(), "Tab 2");
        adapter.addFragment(new Fragment3(), "Tab 3");
        
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}