ViewPager2+TabLayout

这篇具有很好参考价值的文章主要介绍了ViewPager2+TabLayout。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ViewPager2最显著的特点是基于RecyclerView实现,RecyclerView是目前Android端最成熟的AdapterView解决方案,这带来诸多好处:
1、抛弃传统的PagerAdapter,统一了Adapter的API/
2、通过LinearLayoutManager可以实现类似抖音的纵向滑动
3、支持DiffUitl,可以通过diff实现局部刷新
4、支持RTL(right-to-left)布局,对于一些有出海需求的APP非常有用
5、支持ItemDecorator

一、ViewPager2和ViewPager的对比:
1、ViewPager2内部实现是RecyclerView,所以ViewPager2的性能更高。
2、ViewPager2可以实现竖向滑动,ViewPager只能横向滑动。
3、ViewPager2只有一个adapter,FragmentStateAdapter继承自RecyclerView.Adapter。
而ViewPager有两个adapter,FragmentStatePagerAdapter和FragmentPagerAdapter,均是继承PagerAdapter。FragmentStatePagerAdapter和FragmentPagerAdapter两者的区别是FragmentStatePagerAdapter不可以缓存,FragmentPagerAdapter可以缓存。
4、ViewPager2模式实现了懒加载,默认不进行预加载。内部是通过Lifecycle 对 Fragment 的生命周期进行管理。ViewPager会进行预加载,懒加载需要我们自己去实现。


ViewPager2+TabLayout

 

效果图:

ViewPager2+TabLayout

 MainActivity

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager2 viewPager2;

    private int activeColor = Color.parseColor("#ff678f");
    private int normalColor = Color.parseColor("#666666");

    private int activeSize = 20;
    private int normalSize = 14;

    private ArrayList<Fragment> fragments;
    private TabLayoutMediator mediator;

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

        tabLayout = findViewById(R.id.tab_layout);
        viewPager2 = findViewById(R.id.view_pager);

        final String[] tabs = new String[]{"关注", "推荐", "最新0", "最新1", "最新2", "最新3", "最新4", "最新5", "最新6"};

        //禁用预加载
        viewPager2.setOffscreenPageLimit(ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT);
        //Adapter
        viewPager2.setAdapter(new FragmentStateAdapter(getSupportFragmentManager(), getLifecycle()) {
            @NonNull
            @Override
            public Fragment createFragment(int position) {
                //FragmentStateAdapter内部自己会管理已实例化的fragment对象。
                // 所以不需要考虑复用的问题
                return TestFragment.newInstance(tabs[position]);
            }

            @Override
            public int getItemCount() {
                return tabs.length;
            }
        });
        //viewPager 页面切换监听监听
        viewPager2.registerOnPageChangeCallback(changeCallback);

        mediator = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                //这里可以自定义TabView
                TextView tabView = new TextView(MainActivity.this);

                int[][] states = new int[2][];
                states[0] = new int[]{android.R.attr.state_selected};
                states[1] = new int[]{};

                int[] colors = new int[]{activeColor, normalColor};
                ColorStateList colorStateList = new ColorStateList(states, colors);
                tabView.setText(tabs[position]);
                tabView.setTextSize(normalSize);
                tabView.setTextColor(colorStateList);

                tab.setCustomView(tabView);
            }
        });
        //要执行这一句才是真正将两者绑定起来
        mediator.attach();
    }

    private ViewPager2.OnPageChangeCallback changeCallback = new ViewPager2.OnPageChangeCallback() {
        @Override
        public void onPageSelected(int position) {
            //可以来设置选中时tab的大小
            int tabCount = tabLayout.getTabCount();
            for (int i = 0; i < tabCount; i++) {
                TabLayout.Tab tab = tabLayout.getTabAt(i);
                TextView tabView = (TextView) tab.getCustomView();
                if (tab.getPosition() == position) {
                    tabView.setTextSize(activeSize);
                    tabView.setTypeface(Typeface.DEFAULT_BOLD);
                } else {
                    tabView.setTextSize(normalSize);
                    tabView.setTypeface(Typeface.DEFAULT);
                }
            }
        }
    };

    @Override
    protected void onDestroy() {
        mediator.detach();
        viewPager2.unregisterOnPageChangeCallback(changeCallback);
        super.onDestroy();
    }
}

activity_main关键代码

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabGravity="center"
        app:tabIndicatorColor="#ff678f"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#ff678f"
        app:tabTextColor="#333333"
        app:tabUnboundedRipple="true" />

    <!-- ViewPager2内置了RecyclerView
         所以需要通过orientation来设置页面切换方向-->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" />
  •         tabIndicatorColor  指示器颜色
  •         tabIndicatorHeight 指示器高度
  •         tabIndicatorFullWidth  设置为false 则指示器跟文本宽度一致
  •         tabUnboundedRipple 设置为true点击时会有一个水波纹效果
  •         tabGravity 可设置center或fill;center指的是居中显示,fill指的是沾满全屏。
  •         tabMode 可设置fixed和 scrollable;fixed:指的是固定tab;scrollable指的是tab可滑动。
  •         tabTextColor tab文字颜色
  •         tabSelectedTextColor 选中时的tab颜色

viewPager2可以通过设置android:orientation属性来设置切换方向,支持上下、左右切换。

TestFragment

 对应tab页面的实现效果在Fragment中进行实现。

public class TestFragment extends Fragment {

    private View rootView;

    public static TestFragment newInstance(String text) {

        Bundle args = new Bundle();
        args.putString("text", text);
        TestFragment fragment = new TestFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_test, container, false);
        return rootView;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        TextView textView = rootView.findViewById(R.id.text_view);
        String text = getArguments() != null ? getArguments().getString("text") : null;
        textView.setText(text);
    }
}

几个注意的点!!

  • ViewPager2获取当前fragment,通过mFragmentManager.findFragmentByTag(XXX); tag前面需要拼接“f”

看下源码tag怎么设置的,调用链如下:

FragmentStateAdapter-》onBindViewHolder-》placeFragmentInViewHolder方法
mFragmentManager.beginTransaction()
                    .add(fragment, "f" + holder.getItemId())
                    .setMaxLifecycle(fragment, STARTED)
                    .commitNow();
  • ViewPager.setOffscreenPageLimit()设置预加载与缓存

(1)ViewPager 会预加载几页
(2)ViewPager 会缓存 2*n+1 页(n为设置的值)

如设置为n=1,预加载页数1页,缓存页数3页。如果当前在第一页,会预加载第二页,滑倒第二页,会预加载第三页,当滑倒第三页,第一页会销毁,第四页会加载。文章来源地址https://www.toymoban.com/news/detail-418091.html

到了这里,关于ViewPager2+TabLayout的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Android基础面试题】ViewPager与ViewPager2的区别

    ViewPager和ViewPager2是Android中用于实现滑动页面切换的控件。它们的主要区别如下: 实现方式 ViewPager2的内部实现是RecyclerView,而ViewPager是通过继承自ViewGroup实现的。因此,ViewPager2的性能更高。 滑动方向 ViewPager2可以实现横向和竖向滑动,而ViewPager只能横向滑动。 Adapter:View

    2024年02月11日
    浏览(45)
  • Android ViewPager2 + Fragment 联动

    本篇主要介绍一下 ViewPager2 + Fragment , 上篇中简单使用了ViewPager2 实现了一个图片的滑动效果, 那图片视图可以滑动, ViewPager2也可以滑动 Fragment 概述 ViewPager2 官方对它的描述就是 以可滑动的格式显示视图或 Fragment 也就说明提供了滑动Fragment的实现 并且还很简单, 下面来看看吧

    2023年04月08日
    浏览(44)
  • Android修行手册 - 使用ViewPager2实现画廊效果

    Unity3D特效百例 案例项目实战源码 Android-Unity实战问题汇总 游戏脚本-辅助自动化 Android控件全解手册 再战Android系列 Scratch编程案例 软考全系列 Unity3D学习专栏 蓝桥系列 ChatGPT和AIGC 专注于 Android/Unity 和各种游戏开发技巧,以及 各种资源分享 (网站、工具、素材、源码、游戏等

    2024年02月22日
    浏览(45)
  • 【Android】使用ViewPager2实现轮播图效果,手动/自动轮播图

    这里使用Gilde进行加载图片:Glide 使用Gilde可以加载网络图片还可以提高图片加载性能。 接下来新建一个子布局item_image,加载viewPage2的子布局。 ViewPage2就是使用recyclerView实现的,所以这里使用方法其实类似。 这里直接继承RecyclerView.Adapter即可,代码很简单不必多说。 创建一个

    2024年02月03日
    浏览(49)
  • Android kotlin 实现仿蜜源ViewPager和指示器对应上面TabLayout功能

    在 app 的 build.gradle 在添加以下代码 1、 TabLayout : implementation \\\'com.google.android.material:material:1.1.0\\\' 2、 implementation \\\'com.github.li-xiaojun:StateLayout:1.3.4\\\' //allprojects {…增加:maven { url ‘https://jitpack.io’ }…} 3、 implementation \\\'com.github.CymChad:BaseRecyclerViewAdapterHelper:3.0.6\\\' ,这个里面带的适配

    2024年02月09日
    浏览(74)
  • Android开发:利用Android Studio自带的底部导航栏和ViewPager+TabLayout创建顶部导航栏

    目录 效果图 底部导航栏 ​编辑 顶部导航栏 底部导航栏首个Fragment代码 适配器代码 顶部导航栏首个Fragment代码  顶部导航栏另外三个Fragment代码  ​编辑 顶部导航栏四个Fragment的XML 补充 学Android开发开始实操,第一步肯定要把大致布局搞定。做这个布局用到的知识难点有fr

    2024年02月03日
    浏览(60)
  • Android 使用ViewPager2+ExoPlayer+VideoCache 实现仿抖音视频翻页播放

    1. 实现效果    效果图中,视频没有铺满 是因为使用了ExoPlayer的RESIZE_MODE_FIT模式, 虽然使用RESIZE_MODE_FILL模式可以填充整个父布局,但是本Demo中使用的视频源本身就不适合全屏,会把视频拉伸,效果不好。 抖音上的视频源应该都有严格的宽高尺寸,才能做到全屏有很好的效

    2023年04月09日
    浏览(41)
  • Android---TabLayout

    目录 TabLayout TabItem ​编辑 演示效果的xml TabLayout 在开发中一般作为选项卡使用,常与 ViewPager2 和 Fragment 结合起来使用。     常用属性:      app:tabBackground 设置 TabLayout 的背景色,改变整个TabLayout 的颜色;      app:tabTextColor 设置未被选中时文字的颜色;      app:tabSele

    2023年04月08日
    浏览(40)
  • TabLayout去除点击时的波纹效果

    需求:去除com.google.android.material.tabs.TabLayout手指点击时产生的波纹效果 解决办法: xml中增加 注意:Java/kotlin代码中不要设置这两个属性了。

    2024年01月15日
    浏览(47)
  • com.google.android.material.tabs.TabLayout

        ViewPagerScrollAdapter 

    2024年02月21日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包