欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)

程序员文章站 2022-03-08 16:05:52
有没有觉得微信左右滑动切换页面的功能很酷?今天小黑利用TabLayout + ViewPager带你盘他!...

简单实现

添加依赖

在build.gradle(Module:app)文件中的dependency中添加

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

定义布局文件

很简单的,一个TabLayout和一个ViewPager,
注意:TabLayout不要选成自带的那个TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>

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

</LinearLayout>

创建Fragment

我就直接随便新建了两个,连接上XML布局文件就行

public class FragmentOne extends Fragment {

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

        return view;
    }
}

实例化FragmentPagerAdapter

这里我是直接实例化了FragmentPagerAdapter ,你也可以自己写一个类继承FragmentPagerAdapter 来写一个自己的Adapter

		List<Fragment> fragments = new ArrayList<>();
        fragments.add(new FragmentOne());
        fragments.add(new FragmentTwo());
		FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }
        };

实现ViewPager

这里我们已经实例化了FragmentPagerAdapter,那么就差设置到ViewPager上去了
到了这里我们已经是实现了可以左右滑动页面的功能了

viewPager.setAdapter(adapter);

关联TabLayout并设置标签

同样很简单,一行代码就可以把ViewPager和TabLayout关联上

tabLayout.setupWithViewPager(viewPager);

ViewPager和TabLayout关联上以后,是没有便签的,所以这里我们需要给它设置标签
这里如果你有很多的标签的话,可以考虑用for循环和数组的方式添加,但是一定要注意TabAt不能越界,否则会报错

tabLayout.getTabAt(0).setText("第一页");
tabLayout.getTabAt(1).setText("第二页");

至此,一个简单的(很丑的)可以左右滑动、有标签的就实现了!

TabLayout美化

作为一枚精致的程序猿,怎么能忍受得了做出来的东西不好看?盘它!

滚动的便签

app:tabMode=“fixed” 默认情况下是不滚动(不需要滚动的情况下就直接省略不写了)
app:tabMode=“scrollable” 可以滚动
XML布局文件中设置

app:tabMode="scrollable"

Java后台中设置

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

添加小图标

TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)
这个和设置标签是一样的,只是把.setText()换成了setIcon()

tabLayout.getTabAt(0).setIcon(R.mipmap.baoma);
tabLayout.getTabAt(1).setIcon(R.mipmap.benchi);

小图标和标签的相对位置

tabInlineLabe:小图标和便签是否在同一条线上
默认情况(设置为false)
TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)
设置为true
TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)
XML布局设置

app:tabInlineLabel="true"

Java后台设置

tabLayout.setInlineLabel(true);

TabLayout的字体美化

TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)
tabTextColor:字体默认的颜色
tabSelectedTextColor:字体选中时的颜色
XML布局设置

app:tabTextColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"

Java后台设置

//第一个是默认颜色,第二个是选中时的颜色
tabLayout.setTabTextColors(Color.RED,Color.YELLOW);

TabLayout的下划线美化

TabLayout + ViewPager实现仿微信左右滑动切换页面功能详解(含TabLayout美化)
tabIndicatorHeight:下划线的宽度
tabIndicatorFullWidth:下划线是否充满tab的宽度(这里设置成false的话,下划线的长度就会和便签长度一样)
tabIndicatorColor:下划线颜色
tabIndicatorGravity:下划线的位置
XML布局设置

	app:tabIndicatorHeight="10dp"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorColor="@color/colorPrimaryDark"
    app:tabIndicatorGravity="top"

Java后台设置

		tabLayout.setSelectedTabIndicatorHeight(10);
        tabLayout.setTabIndicatorFullWidth(false);
        tabLayout.setSelectedTabIndicatorColor(Color.GREEN);
        tabLayout.setSelectedTabIndicatorGravity(TabLayout.GRAVITY_CENTER);

本文地址:https://blog.csdn.net/qq_44720366/article/details/107403345