在App中经常看到这样的tab底部导航栏

那么这种效果是如何实现，实现的方式有很多种，最常见的就是使用Fragment+RadioButton去实现。下面我们来写一个例子
首先我们先在activity_mian.xml定义布局，整个布局的外面是线性布局，上面是帧布局切换不同的Fragment，底下是RadioGroup嵌套的是RadioButton。代码如下所示：

<?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="match_parent"
  android:background="#ffffff"
  android:orientation="vertical">

  <FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />


  <RadioGroup
    android:id="@+id/rg_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/home_bottom_parent_bg"
    android:orientation="horizontal">

    <RadioButton
      android:id="@+id/rb_home"
      style="@style/MainButtonStyle"
      android:drawableTop="@drawable/home_button_selector"
      android:text="首页" />

    <RadioButton
      android:id="@+id/rb_type"
      style="@style/MainButtonStyle"
      android:drawableTop="@drawable/type_button_selector"
      android:text="分类" />

    <RadioButton
      android:id="@+id/rb_community"
      style="@style/MainButtonStyle"
      android:drawableTop="@drawable/community_button_selector"
      android:paddingTop="10dp"
      android:text="发现" />

    <RadioButton
      android:id="@+id/rb_cart"
      style="@style/MainButtonStyle"
      android:drawableTop="@drawable/cart_button_selector"
      android:text="购物车" />

    <RadioButton
      android:id="@+id/rb_user"
      style="@style/MainButtonStyle"
      android:drawableTop="@drawable/user_button_selector"
      android:text="个人中心" />
  </RadioGroup>


</LinearLayout>

注意：上面还有样式和drawable，下面我们一个一个的来完善。

首先来看样式，打开【res】—【values】—【styles】，代码如下所示：

 <style name="MainButtonStyle">
    <!-- Customize your theme here. -->
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_weight">1</item>
    <item name="android:button">@null</item>
    <!--  <item name="android:drawablePadding">3dp</item>-->
    <item name="android:textColor">@drawable/bottom_button_text_selector</item>
    <item name="android:textSize">10sp</item>
    <item name="android:gravity">center</item>
  </style>

里面还有一个<item name="android:textColor">@drawable/bottom_button_text_selector</item>，这个是设置图片和文字的颜色，在drawable的目录下建bottom_button_text_selector，代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:color="#535353" android:state_checked="false"></item>
  <item android:color="#ff4040" android:state_checked="true"></item>


</selector>

接着我们继续来完善drawable，有【首页】【分类】【发现】【购物车】【个人中心】，写法都是一样的，这里用【首页】来做例子，在drawable目录下建home_button_selector，代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:drawable="@drawable/main_home" android:state_checked="false"></item>
  <item android:drawable="@drawable/main_home_press" android:state_checked="true"></item>

</selector>

接下来看MainActivity中的代码，代码如下：

package com.nyl.shoppingmall.app.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.widget.FrameLayout;
import android.widget.RadioGroup;

import com.nyl.shoppingmall.R;
import com.nyl.shoppingmall.base.BaseFragment;
import com.nyl.shoppingmall.community.fragment.CommunityFragment;
import com.nyl.shoppingmall.home.fragment.HomeFragment;
import com.nyl.shoppingmall.shoppingcart.fragment.ShoppingCartFragment;
import com.nyl.shoppingmall.type.fragment.TypeCartFragment;
import com.nyl.shoppingmall.user.fragment.UserCartFragment;

import java.util.ArrayList;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends FragmentActivity{

  @Bind(R.id.frameLayout)
  FrameLayout frameLayout;
  @Bind(R.id.rg_main)
  RadioGroup rgMain;

  //装fragment的实例集合
  private ArrayList<BaseFragment> fragments;

  private int position = 0;

  //缓存Fragment或上次显示的Fragment
  private Fragment tempFragment;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //ButterKnife和当前Activity绑定
    ButterKnife.bind(this);

    //初始化Fragment
    initFragment();
    //设置RadioGroup的监听
    initListener();
  }

  private void initListener() {
    rgMain.check(R.id.rb_home);
    rgMain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
      @Override
      public void onCheckedChanged(RadioGroup radioGroup, int i) {
        switch (i){
          case R.id.rb_home: //首页
            position = 0;
            break;
          case R.id.rb_type: //分类
            position = 1;
            break;
          case R.id.rb_community: //发现
            position = 2;
            break;
          case R.id.rb_cart: //购物车
            position = 3;
            break;
          case R.id.rb_user: //个人中心
            position = 4;
            break;
          default:
            position = 0;
            break;
        }
        //根据位置得到相应的Fragment
        BaseFragment baseFragment = getFragment(position);
        /**
         * 第一个参数: 上次显示的Fragment
         * 第二个参数: 当前正要显示的Fragment
         */
        switchFragment(tempFragment,baseFragment);
      }
    });
  }

  /**
   * 添加的时候按照顺序
   */
  private void initFragment(){
    fragments = new ArrayList<>();
    fragments.add(new HomeFragment());
    fragments.add(new TypeCartFragment());
    fragments.add(new CommunityFragment());
    fragments.add(new ShoppingCartFragment());
    fragments.add(new UserCartFragment());
  }

  /**
   * 根据位置得到对应的 Fragment
   * @param position
   * @return
   */
  private BaseFragment getFragment(int position){
    if(fragments != null && fragments.size()>0){
      BaseFragment baseFragment = fragments.get(position);
      return baseFragment;
    }
    return null;
  }

  /**
   * 切换Fragment
   * @param fragment
   * @param nextFragment
   */
  private void switchFragment(Fragment fragment,BaseFragment nextFragment){
    if (tempFragment != nextFragment){
      tempFragment = nextFragment;
      if (nextFragment != null){
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        //判断nextFragment是否添加成功
        if (!nextFragment.isAdded()){
          //隐藏当前的Fragment
          if (fragment != null){
            transaction.hide(fragment);
          }
          //添加Fragment
          transaction.add(R.id.frameLayout,nextFragment).commit();
        }else {
          //隐藏当前Fragment
          if (fragment != null){
            transaction.hide(fragment);
          }
          transaction.show(nextFragment).commit();
        }
      }
    }
  }
}

首先使用ButterKnife初始化布局控件，然后在onCreate方法中初始化Fragment和绑定RadioGroup的选中改变事件，为了方便初始化Fragment，写了一个initFragment方法，在方法内部创建HomeFragment,TypeCartFragment,CommunityFragment,ShoppingCartFragment,UserCartFragment四个Fragment实例，然后使用一个fragments集合存储这四个实例。接下来写一个switchFragment方法，用于切换显示指定的Fragmetn，当RadioGroup的选中改变时，首先根据选中的位置获取到对应的Fragment，然后将获取到的Fragment传入到switchFragment方法中进行显示。由于每次RadioGroup的选中改变获取到的Fragment都不一样，从而可以实现根据选中的RadioGroup展示不同的Fragment效果，也就是常见的Tab切换效果。

Activity中用到的HomeFragment,TypeCartFragment,CommunityFragment,ShoppingCartFragment,UserCartFragment这四个Fragment的代码比较简单，以HomeFragment为例，代码如下：

package com.nyl.shoppingmall.home.fragment;

import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

import com.nyl.shoppingmall.base.BaseFragment;

/**
 * 首页Fragment
 */
public class HomeFragment extends BaseFragment {

  private final static String TAG = HomeFragment.class.getSimpleName();

  private TextView textView;

  @Override
  public View initView() {
    textView = new TextView(mContext);
    textView.setGravity(Gravity.CENTER);
    textView.setTextSize(25);
    Log.e(TAG,"主页面的Fragment的UI被初始化了");
    return textView;
  }

  @Override
  public void initData() {
    super.initData();
    textView.setText("首页");
    Log.e(TAG,"主页面的Fragment的数据被初始化了");
  }
}

HomeFragment继承自BaseFragment，然后重写父类的initView方法和initData方法，BaseFragment的代码如下：

package com.nyl.shoppingmall.base;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 基类Fragment
 * 首页：HomeFragment
 * 分类：TypeFragment
 * 发现：CommunityFragment
 * 购物车：ShoppingCartFragment
 * 用户中心：UserFragment
 * 等等都要继承该类
 */

public abstract class BaseFragment extends Fragment{

  protected Context mContext;

  /**
   * 当该类被系统创建的时候回调
   * @param savedInstanceState
   */
  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mContext = getActivity();
  }

  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    return initView();
  }

  //抽象类，由孩子实现，实现不同的效果
  public abstract View initView();

  @Override
  public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    initData();
  }

  /**
   * 当子类需要联网请求数据的时候，可以重写该方法，该方法中联网请求
   */
  public void initData() {
  }
}

其余几个Fragment的代码也类似，这里就不再细说了，使用Fragment+RadioButton实现底部导航栏的思路和代码实现就是这样的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# fragment  # 底部导航栏  # fragment实现底部导航  # fragment实现底部菜单  # Android 中使用RadioGroup和Fragment实现底部导航栏的功能  # 性能分析:指如何快速定位SQL问题  # Android自定义ViewPagerIndicator实现炫酷导航栏指示器（ViewPager+F  # Android程序开发之Fragment实现底部导航栏实例代码  # Android实现沉浸式通知栏通知栏背景颜色跟随app导航栏背景颜色而改变  # Android实现底部导航栏功能（选项卡）  # 超简单的几行代码搞定Android底部导航栏功能  # Android 弹出Dialog时隐藏状态栏和底部导航栏的方法  # Android 沉浸式状态栏与隐藏导航栏实例详解  # android 全屏去掉底部虚拟导航栏的方法  # 解决android 显示内容被底部导航栏遮挡的问题  # Android仿今日头条顶部导航栏效果的实例代码  # Android仿网易客户端顶部导航栏效果  # Android Fragment实现顶部、底部导航栏  # 首页  # 购物车  # 所示  # 重写  # 绑定  # 来写  # 的是  # 几个  # 都不  # 目录下  # 第一个  # 都要  # 子类  # 第二个  # 还有一个  # 这四个  # 写了  # 为例  # 可以实现  # 来做 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： googleplay官方入口在哪里_Google Play官方商店快速入口指南  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Laravel如何处理异常和错误？（Handler示例）  Windows Hello人脸识别突然无法使用  如何在IIS中新建站点并配置端口与物理路径？  android nfc常用标签读取总结  详解CentOS6.5 安装 MySQL5.1.71的方法  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  利用JavaScript实现拖拽改变元素大小  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Thinkphp 中 distinct 的用法解析  如何快速搭建高效可靠的建站解决方案？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  浅谈Javascript中的Label语句  黑客如何通过漏洞一步步攻陷网站服务器？  网站建设保证美观性，需要考虑的几点问题！  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  如何续费美橙建站之星域名及服务？  Laravel如何使用Eloquent进行子查询  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  如何在香港免费服务器上快速搭建网站？  如何快速打造个性化非模板自助建站？  JavaScript如何实现错误处理_try...catch如何捕获异常？  如何快速完成中国万网建站详细流程？  网站制作报价单模板图片,小松挖机官方网站报价？  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  如何用美橙互联一键搭建多站合一网站？  iOS正则表达式验证手机号、邮箱、身份证号等  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  简单实现Android验证码  如何生成腾讯云建站专用兑换码？  网站页面设计需要考虑到这些问题  JavaScript中的标签模板是什么_它如何扩展字符串功能  EditPlus中的正则表达式 实战(4)  如何在企业微信快速生成手机电脑官网？  Laravel如何使用.env文件管理环境变量？（最佳实践）  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  利用 Google AI 进行 YouTube 视频 SEO 描述优化  如何用虚拟主机快速搭建网站？详细步骤解析  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  WEB开发之注册页面验证码倒计时代码的实现  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Linux网络带宽限制_tc配置实践解析【教程】  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理