Android-底部菜单Tabs 三种实现方式（ViewPager,Fragment,ViewPage+Fragment）

最新推荐文章于 2025-05-23 16:49:04 发布
最新推荐文章于 2025-05-23 16:49:04 发布
阅读量5.7k 收藏 11
点赞数 3
CC 4.0 BY-SA版权
文章标签： Android 底部菜单 Tab Fragment Viewpager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LABLENET/article/details/48541669
本文详细介绍了如何在Android应用中使用Fragment和ViewPage实现底部导航栏，包括基本思路、布局实现、业务实现及Demo下载。推荐使用Fragment + ViewPage的方式，因其层次清晰、业务处理方便。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.回顾

    在写文章来记录自己的学习的时候，没有录制 gif 效果图，感觉整个人都不好了，还好 通过摸索可以在ubuntu 下 制作gif 动态图 ，从而可以分享给大家了；


2.重点

  （1）ViewPage 实现 底部菜单 tab 

  （2）Fragment 实现 底部菜单 tab 

  （3）Fragment+ViewPage 实现底部菜单

  （4）TabHost 实现 底部菜单 （不推荐）

3.底部菜单实现

    实现可以点击切换页面 ， 滑动切换页面 ；

   3.1 效果图

                                                           

             （1）ViewPage 实现                          （2）Fragment实现                   （3）ViewPage+Fragment实现

 

  3.2 基本思路

     (1)ViewPage实现

  1. Viewpage实现的是可以点击切换页面和滑动页面切换Tab 的效果，类似与微信（没有过度效果） ；
  2. ViewPage中的每个页面为布局文件（layout）, 不是 Activity 或Fragment ；
  3. 每个页面的业务处理 交给 business 类实现 ，后在 Viewpage实现类中初始化；
  4. business类实现，将传入的当前View对象，进行业务交互控制；

    (2)Fragment 实现

  1. 实现了点击切换的效果，没有滑动切换效果 ，类似与手机 QQ ；
  2. 通过 FragmentManager实现 控制 Fragment ，四个 页面对应四个 Fragment ;
  3. 通过 FragmentTransaction 来添加和移除Fragment 进行控制 ，不要忘记了 commit ;
  4. 每个页面的业务交互 都在 Fragment里进行处理；

    (3)Fragment+viewpage实现

  1. 实现里点击切换页面和 滑动页面切换tab , 和viewpage实现一样
  2. 这种实现方式和viewpage+layout布局实现基本一样 ，不过是将加载布局文件和业务操作 交给了 Fragment 来处理；
  3. 需要实现 FragmentPagerAdapter

    (4)Tabhost实现

         点击打开链接

  3.3 布局和ViewPage业务实现

     (1) 实现页面布局

          顶部显示 实现：

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


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="无线"
        android:textColor="@android:color/white"
        android:textSize="20dp"
        android:gravity="center"
        android:background="@android:color/holo_blue_dark"/>


</LinearLayout>

     底部菜单实现：

    底部 为 四个 LinearLayout 实现 布局；

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@android:color/background_light"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/linear_shouye"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <!-- 通过设置 ImageButton  android:clickable="false" 属性 ; 使其 没有点击的属性,不和 LinearLayout抢占点击事件 -->

        <ImageButton
            android:id="@+id/img_shouye"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_deal_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_xinxi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/img_xinxi"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_more_off" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="信息"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_gongju"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/img_gongju"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_user_off" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="工具"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linner_wo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/img_wo"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@android:color/transparent"
            android:clickable="false"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_menu_poi_off" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </LinearLayout>

</LinearLayout>

       主页面实现：

       使用 include 实现；

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

   
    <include layout="@layout/top"/>
    
    
    <!-- 
    这里 使用 weight , 设置为 1 ,高度设置为 0dp后 就填充了 页面的剩余部分
     -->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_tabs"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:background="#e9e9e9"
        android:layout_weight="1"
        >
        
        
    </android.support.v4.view.ViewPager>
    
    
    <include layout="@layout/buttom"/>
</LinearLayout>


     (2)实现 业务

         1）给Viewpage设置 OnpageChangeListener 的时候 ，也可以使用 SimpleOnPageChangeListener 实现；

         2）这里的ViewPage 加载的是 4个布局文件 ，故 在 对 四个布局文件 实现业务交互的时候 需要 在 business 里处理 ，business 是 自己定义的类， 将当前布局的view对象 传入 实现；

package com.example.tabsdemo;

import java.util.ArrayList;
import java.util.List;

import com.example.Business.PageFourBusiness;
import com.example.Business.PageOneBusiness;
import com.example.Business.PageThreeBusiness;
import com.example.Business.PageTwoBusiness;
import com.example.adapter.TabsPageAdapter;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;


/**
 * 使用说明:
 * (1) 实现 top.xml
 * (2) 实现 buttom.xml
 * (3) 实现 Acitvity.xml 页面
 * (4) tab 和 ViewPage 业务 在此类 实现
 * (5) 子页面 业务实现 在 com.example.Business
 * (7) 基本思路
 *  通过 ViewPage 实现页面可滑动 和 tab 可以点击切换页面;
 *  子页面业务实现 在Business 里 实现 ,通过 子页面的View来操作 该页面业务;
 *  当然 也可以在ViewPage 的监听事件里实现 (单独的将 ViewPage的切换页面的监听事件写成一个类实现) ;
 *  
 * @author yuan
 *
 */

public class PagerViewTagsActivity extends Activity implements OnClickListener {

	private ViewPager vp_tabs;
	private LinearLayout linear_shouye, linear_xinxi, linear_wo, linear_gongju;

	private ImageButton img_shouye, img_xinxi, img_wo, img_gongju;

	private View one_page, two_page, three_page, four_page;

	private List<View> views;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_pagerview_tabs);
		views = new ArrayList<View>();
		// 初始化
		InitView();

	}

	private void InitView() {
		// 初始化工作
		vp_tabs = (ViewPager) findViewById(R.id.vp_tabs);
		linear_shouye = (LinearLayout) findViewById(R.id.linear_shouye);
		linear_gongju = (LinearLayout) findViewById(R.id.linear_gongju);
		linear_wo = (LinearLayout) findViewById(R.id.linner_wo);
		linear_xinxi = (LinearLayout) findViewById(R.id.linear_xinxi);

		img_gongju = (ImageButton) findViewById(R.id.img_gongju);
		img_shouye = (ImageButton) findViewById(R.id.img_shouye);
		img_wo = (ImageButton) findViewById(R.id.img_wo);
		img_xinxi = (ImageButton) findViewById(R.id.img_xinxi);

		// 初始化 view 数据
		one_page = View.inflate(this, R.layout.vp_onepage, null);
		two_page = View.inflate(this, R.layout.vp_twopage, null);
		three_page = View.inflate(this, R.layout.vp_threepage, null);
		four_page = View.inflate(this, R.layout.vp_fourpage, null);

		views.add(one_page);
		views.add(two_page);
		views.add(three_page);
		views.add(four_page);

		// 设置 adapter
		TabsPageAdapter pageAdapter = new TabsPageAdapter(views);
		vp_tabs.setAdapter(pageAdapter);

		// 设置tab 点击事件
        linear_gongju.setOnClickListener(this);
        linear_shouye.setOnClickListener(this);
        linear_wo.setOnClickListener(this);
        linear_xinxi.setOnClickListener(this);
        
        //设置ViewPage 切换效果
        vp_tabs.setOnPageChangeListener(new vp_tabsOnChangeListener());
        
        //子页面 初始化 工作
        InitItemPage();
	}

	/**
	 * 初始化
	 * Item 事件处理
	 */
	private void InitItemPage() {
	   
		//初始化 view Item 中的事件
		
		//第一个页面事件
		PageOneBusiness onePageBusiness=new PageOneBusiness(this,one_page);
		onePageBusiness.OpBusinessInit();
		
		//第二个页面事件
		PageTwoBusiness pageTwoBusiness=new PageTwoBusiness(this,two_page);
		pageTwoBusiness.OpBusinessInit();
		
		//第三个页面事件
		PageThreeBusiness pageThreeBusiness=new PageThreeBusiness(this,three_page);
		pageThreeBusiness.OpBusinessInit();
		
		//第四个页面事件
		PageFourBusiness pageFourBusiness=new PageFourBusiness(this,four_page);
		pageFourBusiness.OpBusinessInit();
		
	}

    /**
     * Tags 的 点击事件
     */
	@Override
	public void onClick(View v) {
		// tabs 点击事件
		ResetTabsImg();
		switch (v.getId()) {
		case R.id.linear_shouye:
			SetTabsSelectedImg(0);
			break;
		case R.id.linear_gongju:
			SetTabsSelectedImg(2);
			break;
		case R.id.linner_wo:
			SetTabsSelectedImg(3);
			break;
		case R.id.linear_xinxi:
			SetTabsSelectedImg(1);
			break;
		}

	}

	/**
	 * (1)实现选中后的 tabs的img
	 * (2)切换 viewpager item
	 * @param i
	 */
	private void SetTabsSelectedImg(int i) {

		switch (i) {
		case 0:
			img_shouye.setImageResource(R.drawable.ic_menu_deal_on);
			break;
		case 1:
			img_xinxi.setImageResource(R.drawable.ic_menu_more_on);
			break;
		case 2:
			img_gongju.setImageResource(R.drawable.ic_menu_user_on);
			break;
		case 3:
			img_wo.setImageResource(R.drawable.ic_menu_poi_on);
			break;
		}
		
		//切换 viewpage item
		vp_tabs.setCurrentItem(i);

	}

	/**
	 * 将 tabs 的 图片设置 默认颜色
	 */
	private void ResetTabsImg() {
		// 重置tab 图片
		img_gongju.setImageResource(R.drawable.ic_menu_user_off);
		img_shouye.setImageResource(R.drawable.ic_menu_deal_off);
		img_wo.setImageResource(R.drawable.ic_menu_poi_off);
		img_xinxi.setImageResource(R.drawable.ic_menu_more_off);
	}
	
	
	/**
	 * ViewPage 切换 监听事件
	 * @author yuan
	 *
	 */
	class vp_tabsOnChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// 
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public void onPageSelected(int arg0) {
			//设置 tab 背景
			ResetTabsImg();
			SetTabsSelectedImg(arg0);
		}
		
	}

}


    (3)PageAdapter 实现

package com.example.adapter;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class TabsPageAdapter extends PagerAdapter {

	
	private List<View> views;
	
	public TabsPageAdapter(List<View> views) {
		this.views = views;
	}

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		
		container.addView(views.get(position));
		
		return views.get(position);
	}
	
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		
		container.removeView(views.get(position));
		
	}
	
	@Override
	public int getCount() {
		
		return views.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0==arg1;
	}

}


4.demo 下载

http://download.youkuaiyun.com/detail/lablenet/9116507


5.总结 

   这四种实现方式 ，我推荐实现 Fragment+viewpager实现 ，因为 层次清晰，业务处理方便 ；在Fragment 进行业务逻辑实现 和 Activity 基本一样，同时 Fragment 还有 生命周期 ，方便控制；最后Fragment 方便和 Activity 进行传参交互；


原小明
关注
Android---TabLayout+ViewPager+Fragment使用
weixin_44173424的博客
05-02 2131
TabLayout+ViewPager+Fragment使用 在布局文件中添加TabLayout和ViewPager控件 <com.google.android.material.tabs.TabLayout android:id="@+id/tabLay" android:layout_width="match_parent" android:layout_height="40dp"/> <
ViewPager2 + Fragment + TabLayout 的使用实现类似微信的底部导航栏（kotlin）
weixin_45829525的博客
07-05 2207
文章目录效果实现方案ViewPager2 + Fragment 的使用TabLayout 的使用 效果 实现方案 ViewPager2 + Fragment 的使用 本文实现上述效果采用的方案为：ViewPager2 + Fragment + TabLayout，总体布局为在一个 Activity 中嵌入 ViewPager2 与 TabLayout 两个控件，再使用 ViewPager2 对 3 个 Fragment进行管理，最后对 TabLayout 中的 item 和对应的 Fragment 之间进
Android 底部菜单
03-14
这款Android的案例，对于已经正在学Android的朋友有很大的提升。
(转)android底部菜单应用
lhs286266503的专栏
11-14 966
在android中实现菜单功能有多种方法。 Options Menu：用户按下menu Button时显示的菜单。 Context Menu：用户长时间按下屏幕，所显示出来的菜单也称为上下文菜单。 Submenu：子菜单。 但是有时候这些内置的菜单并不能满足我们功能，这就需要自己自定义一种菜单。接下来我说的这种就是通过TabHost与RadioGroup结合完成的菜单。
深入理解Android Tab之radiogroup+fragment实现
最新发布
weixin_35899324的博客
05-23 758
Fragment代表应用程序用户界面中的一块功能区域。它拥有自己的布局和行为，可以看作是一个mini activity。Fragment的使用可以让应用界面更加模块化，易于管理。它不是直接运行在Activity上，而是必须嵌入到Activity中使用。Fragment可以存在于一个活动的用户界面中，并且可以从一个Activity中附加或分离。这意味着可以根据用户的交互来动态地修改屏幕上的内容。Android允许开发者对底部导航栏进行高度定制，包括图标、文字、背景以及选中状态的动画效果。
Android 底部菜单栏实现
weixin_33736048的博客
01-28 232
2019独角兽企业重金招聘Python工程师标准>>> ...
Android美工坊--底部菜单栏实现
技术积累、分享成果
04-09 954
 虽然网上有很多底部菜单栏的实现方式，但是实现方式各种各样，很多也不符合自己的口味，所以还是总结下底部菜单栏的实现方式，以便以后方便查询使用 实现方式一：通过TabWidget实现 这种方式主要是在布局中将TabWidget标签嵌套在RelativeLayout中，并且在TabWidget标签中中设置 android:layout_alignParentBottom="tru
Android底部菜单的实现
weixin_30633405的博客
09-29 114
前言：以前制作菜单使用TabHost，但是android 3.0以上就被废弃了,google已经不建议使这个类了。ActionBar也是菜单，不过在头部，算是导航了 ===本文就介绍怎么制作底部菜单=== 1、底部菜单就是一张图片加一个文本，点击的时候改变颜色，先自定义个类MenuButton public class MenuButton extends RelativeLayo...
TabLayout+ViewPager+Fragment实现切页展示
热门推荐
yourzeromax的博客
08-27 6万+
写在前面 目前大多数的APP都采用的是几个Tab标签以及多个界面滑动的形式来提供多层次的交互体验，最为常用的做法就是采用TabLayout+ViewPager+Fragment的方式，最近在公司项目中遇到类似的界面，也看了各个论坛很多份博客，但是发现都没有完全把这种方法的坑填完，因此写下这篇博客，一方面是对知识的总结，另一方面也能让其他开发者们少走一些弯路，博客内容主要分为四个方面： T...
Android Material Design 系列之 TabLayout + ViewPager + Fragment 使用详解
一名互联网时代苟且偷生的 Android码农
06-20 4969
前言 本文是 Material Design 系列第三篇：TabLayout + ViewPager + Fragment 基本使用，Material Design 所有控件属于高级 UI，所以 Material Design 控件是中高级工程师必备技能。现在市面上很多主流界面效果都是采用 Material Design 风格控件完成。希望博主 Material Design 系列文章对各位初学者有所帮助，也为自己学习做详细笔记。 一、TabLayout 方法介绍 1、addTab（TabLayout.T
Android--TabLayout+ViewPager+Fragment实现切页展示
超宇的博客
04-23 1591
一、TabLayout+ViewPager+Fragment方法的思路： 创建存储多个Fragment实例的列表 创建PagerAdapter实例并关联到Viewpager中 将ViewPager关联到Tablayout中 根据需求改写Tablayout属性 二、使用方法 1、引入 //TabLayout+ViewPager implementation 'com.and...
Android--底部菜单栏实现
04-04
NULL 博文链接：https://android-zhang.iteye.com/blog/1485829
Android 底部菜单栏
QianQing_mio的博客
03-26 1420
Android 底部菜单栏Activity的布局新建一些Fragment准备小图标文字的变化图标文字组合布局Activity里面的代码 工具： Android studio *环境： compileSdkVersion 28 com.android.tools.build:gradle:3.3.2 * 简介：使用到了FragmentTabHost实现底部导航，实现图标选中与未被选中的变化，更改了开...
Android底部菜单栏
唇边的一抹微笑
08-15 920
来自：http://www.189works.com/article-80374-1.html 通过TabWidget实现 这种方式主要是在布局中将TabWidget标签嵌套在RelativeLayout中，并且在TabWidget标签中中设置 android:layout_alignParentBottom="true" 另外，下划线和选项卡之间的线去除的方法时在TabWidget标签中
Android开发系列三：Android中怎么实现底部菜单栏
kingOU0727的专栏
10-08 996
Android开发中有的时候需要把菜单显示在屏幕的底部，但是Android本身没有提供这样的控件，因此需要自己写代码来实现，网上Google一下有关这个主题的网页，最终都是从这篇《android实现底部菜单栏》文复制过去的(源代码在这里)，但是如果你把这篇文里的代码全部复制过去，你会发现在模拟器里看不到底部的菜单栏，问题出在哪儿呢？仔细检查一下/res/layout/main.xml这个文件里...
Android底部和标签导航栏—TabLayout+Fragment
程序病毒小队的博客
02-07 7507
介绍Google官方在2014年Google I/O上推出了全新的设计语言——Material Design。一并推出了一系列实现Material Design效果的控件库——Android Design Support Library。其中，有TabLayout, NavigationView,Floating labels for editing text,Floating Action But
Android开发之TabLayout实现顶部菜单
weixin_34122604的博客
03-31 613
在Android开发中，经常要使用顶部菜单，如网易新闻、今日头条等，实现顶部菜单以前是ViewPager配合PagerTabStrip来实现，但Android 5.0以后，推荐大家使用MD中的TabLayout来实现，很简单哦~~ 开发环境：Android Studio 开发步骤 1、在 build.gr...
Android之底部菜单栏的实现
家驹六月天的博客
01-14 1万+
在我们的项目中，基本上都会用到底部菜单栏，通过点击不同的底部菜单导航到不同的Fragment，布局采用的是RadioButton+Fragment,先看与一下效果（如下图）   因为手机没有录屏，所有不能展示效果，但总算是实现了 代码也很简单，还不到百行，废话少说，上代码和详细的步骤 （1）第一步：UI布局，底层一个Radiogroup和四个RadioButton，中间一个Fragme...
掌握Tab+Viewpage+Fragment实现高效Android导航
以上知识点详细阐释了Android中使用Tab+ViewPager+Fragment实现导航的核心概念、组件结构、代码实现以及性能优化的策略。开发者在实际开发过程中，可以结合具体需求对这些知识点进行深化和应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值