android中Fragment+RadioButton实现底部导航栏

在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实现底部导航栏的思路和代码实现就是这样的。

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