android-Tablayout与viewpager实现顶部导航栏的使用

最新推荐文章于 2024-07-18 13:55:43 发布

原创最新推荐文章于 2024-07-18 13:55:43 发布 · 364 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #app #安卓 #移动开发

Android散学专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在XML布局文件中添加TabLayout和ViewPager组件，然后通过Java或Kotlin代码设置适配器并绑定两者。通过设置TabLayout的属性来定制样式，如字体颜色、下划线颜色等。最后，展示了实现页面滑动切换的效果图。

一、首先在xml文件添加tablayout控件和viewpager控件

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        //字体颜色
        app:tabTextColor="@android:color/black"
        //下划线颜色
        app:tabIndicatorColor="@android:color/holo_orange_dark"
        	//选中的文字颜色
       	app:tabSelectedTextColor="@android:color/holo_orange_dark"
        android:layout_height="50dp"/>

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

二、拿到控件

在这里插入图片描述

三、添加几个fragment，给viewpager设置适配器

添加fragment集合
在这里插入图片描述
设置适配器，并且将数据传过来

在这里插入图片描述

四、绑定两个控件，并且在适配器中给tab条目设置title

mian_viewpager.setAdapter(adapter);
        //绑定两个控件
        main_tablayout.setupWithViewPager(mian_viewpager);
        //设置排列方式，目前的方式是平均分配整个条目，不可滚动
        main_tablayout.setTabMode(TabLayout.MODE_FIXED);