Android顶部导航之TabLayout和ViewPager的组合,setupWithViewPager有点坑

TabLayout是Android Design Support Library的组件,可以很方便的写出顶部导航栏比以前那个什么TabHost好用多了,因为是Design Support Library下的控件,所以使用它要引入相关依赖

   implementation 'com.android.support:design:26.1.0'

注意Android studio 3.0以后,引入依赖关键词变成了implementation
在之前版本的关键词是 compile

本文最终实现的最终效果如下图所示:
这里写图片描述

使用方法

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

####1.找到相应控件

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

####2.创建tab项

        //使用Tablayout的newTab()创建tab
        TabLayout.Tab tab1 = mTabLayout.newTab()
                //设置tab项显示的文字
                .setText("tab1");
        TabLayout.Tab tab2 = mTabLayout.newTab().setText("tab2");
        TabLayout.Tab tab3 = mTabLayout.newTab().setText("tab3");

说明: 创建Tab对象不能通过new 对象的方式,而是使用TabLayout里面的newTab()的方式创建,查看源码就可以知道Tab的构成方法是没有修饰词,也就是默认权限,它所在包以外都没权限访问。

3.将tab项添加到TabLayout中
    mTabLayout.addTab(tab1);
    mTabLayout.addTab(tab2);
    mTabLayout.addTab(tab3);

运行效果如下

这里写图片描述
####4.准备ViewPager数据

  • 使用ViewPager前先要有一个它的适配器
public class TabPageAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    
    public TabPageAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}
  • 向适配器中添加数据
		fragments=new ArrayList<>();
		//将提前写好三个Fragment添加到集合中
        fragments.add(new FirstFragment());
        fragments.add(new SecondFragment());
        fragments.add(new ThirdFragment());
		//创建适配器
        TabPageAdapter pageAdapter = new TabPageAdapter(getSupportFragmentManager(), fragments);
        //设置ViewPager的适配器
        mViewPager.setAdapter(pageAdapter);
       
  • 把TabLayout和ViewPager组合,使用setupWithViewPager可以让TabLayout和ViewPager联动
 mTabLayout.setupWithViewPager(mViewPager);

写到这感觉应可以了吧
这里写图片描述

什么情况,联动效果出来了,但Tab项的字去哪了

查看setupWithViewPager源码发现,在ViewPager适配器不为空的情况下,最终会调用populateFromPagerAdapter()方法

 void populateFromPagerAdapter() {
        removeAllTabs();//移除tab添加的所有tab项

        if (mPagerAdapter != null) 
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {   
               //创建Tab项,把tab显示的标题设置为从获取适配的getPageTitle的内容   
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

            // Make sure we reflect the currently set ViewPager item
            if (mViewPager != null && adapterCount > 0) {
                final int curItem = mViewPager.getCurrentItem();
                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                    selectTab(getTabAt(curItem));
                }
            }
        }
    }

从上面可以看出,我们之前向TabLayout添加的Tab项调用这个方法后都被移除了,它会重新创建新的Tab项,tab显示的文字是从适配器getPageTitle()获取的 。上面我们写适配器的时候没有重写适配器的getPageTitle()方法 ,所以上面效果就是有Tab项但Tab项上没有文字了,解决办法就是重写适配器的getPageTitle()方法

 public class TabPageAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    private String[] tabNames;//tab选项名字


    public TabPageAdapter(FragmentManager fm, List<Fragment> fragments,String[] tabNames) {
        super(fm);
        this.fragments = fragments;
        this.tabNames=tabNames;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
//重写getPageTitle()方法
    @Override
    public CharSequence getPageTitle(int position) {
    //返回tab选项的名字
        return tabNames[position];
    }
}
String[] mTabNames=new String[]{"tab1","tab2","tab3"};
TabPageAdapter pageAdapter = new TabPageAdapter(getSupportFragmentManager(), fragments,mTabNames);

这种方式tab选项不是我们自己创建的,如果想对tab项设置一下属性,通过getTabAt(int index) 方法获取tab对象进行一些设置就可以了

关于TabLayout的属性设置

  • 设置指示器样式(设置颜色和高度)
 app:tabIndicatorColor="#1565C0"
 app:tabIndicatorHeight="4dp" 

这里写图片描述

  • 设置选择时的字体颜色
app:tabSelectedTextColor="#9C27B0"

这里写图片描述

  • 设置TabLayout显示的模式(fixed or scrollable)
    TabLayout默认为fixed模式,将所有tab项都显示出来,占满它的宽度
app:tabMode="fixed"

这里写图片描述
scrollable 模式,如果TabLayout不能将所有tab显示,就可以滚动查看所有tab项

app:tabMode="scrollable"

这里写图片描述

TabLayout的监听事件

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //tab项选中状态时执行
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //tab项取消选中状态时执行
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
               //tab项选中状态再次点击时执行

            }
        });

本文代码下载
  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,你想问关于顶部导航TabLayout和ViewPager的内容。这两个组件通常一起使用,可以实现轻松的页面切换和导航功能。 TabLayout是一个选项卡布局,用于显示多个页面的标题,并且可以通过点击选项卡来切换页面。ViewPager是一个可滑动的布局容器,可以容纳多个子视图,并且可以通过滑动来切换子视图。 在Android中,我们可以通过将TabLayout和ViewPager结合起来使用,来实现多页面的导航和切换。具体的实现方式可以参考以下步骤: 1. 在布局文件中添加TabLayout和ViewPager组件,并将它们进行关联: ``` <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在Activity或Fragment中,创建PagerAdapter适配器,并将其设置给ViewPager: ``` public class MyPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragments = new ArrayList<>(); private final List<String> mFragmentTitles = new ArrayList<>(); public MyPagerAdapter(FragmentManager fm) { super(fm); } public void addFragment(Fragment fragment, String title) { mFragments.add(fragment); mFragmentTitles.add(title); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitles.get(position); } } ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new Fragment1(), "Tab 1"); adapter.addFragment(new Fragment2(), "Tab 2"); adapter.addFragment(new Fragment3(), "Tab 3"); viewPager.setAdapter(adapter); ``` 3. 将TabLayout和ViewPager进行绑定,并设置TabLayout的显示模式: ``` TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(viewPager); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); ``` 通过以上步骤,我们就可以实现一个带有顶部导航TabLayout和可滑动页面切换功能的布局。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值