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

关注

原创最新推荐文章于 2026-02-23 00:36:28 发布 403 阅读 AI 写同款· GEO 优化 ›

Android仿今日头条首页的顶部标签栏和底部导航栏 Android仿今日头条首页的顶部标签栏和底部导航栏先是底部导航栏TextView+ImageView+Fragment:效果图:activity_main.xml布局:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res... 阅读详情

一、首先在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);