当前位置:主页 > android教程 > TabLayout ViewPager2简单使用

TabLayout+ViewPager2的简单使用详解

发布:2023-03-05 16:00:01 59


本站收集了一篇相关的编程文章,网友冀弘懿根据主题投稿了本篇教程内容,涉及到TabLayout、ViewPager2、TabLayout ViewPager2简单使用相关内容,已被508网友关注,涉猎到的知识点内容可以在下方电子书获得。

TabLayout ViewPager2简单使用

本文实例为大家分享了TabLayout+ViewPager2简单使用的实现代码,供大家参考,具体内容如下

学习之前我们先看一下显示的效果

这里显示的底部导航栏,如果想实现的顶部导航栏,只需要调整一下TabLayout的位置即可。

1、导入依赖

使用ViewPager2之前需要先导入依赖,这里的依赖可能不是最新的,可以自己查找最新的版本。TabLayout不需要导入。

implementation "androidx.viewpager2:viewpager2:1.0.0"

2、布局





我们只需要控制TabLayout的布局位置,就可以实现它是底部导航还是顶部导航了,需要注意一下viewPager和TabLayout的布局,不要让它们产生重叠。

3、使用方法

viewPager需要为其提供一个适配器,通过setAdapter()方法添加适配器,这个适配器它必须继承自FragmentStateAdapter, 这里一定要用写一个类去继承FragmentStateAdapter,否则会出现奇怪的错误, 适配器中主要完成页面的设置。

class ViewPager2Adapter extends FragmentStateAdapter{

    public ViewPager2Adapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        // 每个页面对应的fragment
        switch (position){
            // 这里我随便写了两个Fragment
            case 0:return new Fragment1();
            case 1:return new Fragment2();
        }

        return null;
    }

    @Override
    public int getItemCount() {
        // 有几个页面就返回几
        return 2;
    }
}

创建一个适配器实例设置为ViewPager2对象。
代码中为TabLayout添加Tab,如果在布局中已经添加就不需要了

for (int i = 0; i < 2; i++) {
    tabLayout.addTab(tabLayout.newTab());
}

上面需要特别注意,是tabLayout.newTab().

最后使用TabLayoutMeditor将TabLayout和ViewPager组合起来。

TabLayoutMediator mediator = new TabLayoutMediator(binding.tabLayout, binding.viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
    @Override
    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        tab.setText(tabs[position]);
    }
});
mediator.attach();

到这里,基本上就可以进行展示了,可以进行滑动切换和点击导航栏切换,下面继续看看其他功能。

5、tabLayout添加一个监听器

监听各个页面之间的切换以做出不同的处理。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    // 页面被选中
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        Log.d(TAG, "onTabSelected: "+tab.getText());
    }
    // 页面切换到其他
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        Log.d(TAG, "onTabUnselected: "+tab.getText());
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

6、自定义tablayout的显示样式

很多时候我们会觉得tabLayout导航栏只能显示文字太单调了,因此想要为其添加其他样式,比如添加图+文字的显示效果,步骤如下:

1、自定义一个底部导航的显示样式,比如图片+文字




    

    

2、我们再定义一个方法,该方法可以根据不同的位置构造返回不同的底部显示样式

private View getViewAtI(int position){
    View view = getLayoutInflater().inflate(R.layout.bottom_layout, null, false);
    ImageView  imageView = view.findViewById(R.id.icon);
    TextView textView = view.findViewById(R.id.text);
    // 这个icons就是一个简单的图片保存的数组,保存如R.drawable.touxiang
    imageView.setImageResource(icons[position]);
    textView.setText(tabs[position]);

    return view;
}

3、在TabLayoutMediator中为每个tab设置不同的CustomView, 就能显示底部视图了。

TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
    @Override
    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        //tab.setText(tabs[position]);
        tab.setCustomView(getViewAtI(position));
    }
});

mediator.attach();

TabLayout还有许多的属性可以设置,这里就不一一的展示了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


参考资料

相关文章

  • 基于Viewpager2实现登录注册引导页面

    发布:2023-03-05

    这篇文章主要为大家详细介绍了基于Viewpager2实现登录注册引导页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Android ViewPager2 使用及自定义指示器视图实现

    发布:2023-03-10

    这篇文章主要为大家介绍了Android ViewPager2 使用及自定义指示器视图实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • Android TabLayout 自定义样式及使用详解

    发布:2023-03-08

    这篇文章主要为大家介绍了Android TabLayout 自定义样式及使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • Android原生TabLayout使用的超全解析(看这篇就够了)

    发布:2023-03-05

    现在很多app都有顶部可左右切换的导航栏,并且还带动画效果,要实现这种导航栏,可以使用Android原生的Tablayout也可以借助第三方框架实现,这篇文章主要给大家介绍了关于Android原生TabLayout使用的相关资料,需要的朋友可以参考下


  • 使用ViewPager2实现简易轮播图效果

    发布:2023-03-04

    这篇文章主要为大家详细介绍了使用ViewPager2实现简易轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


网友讨论