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

那么这种效果是如何实现，实现的方式有很多种，最常见的就是使用Fragment+RadioButton去实现。下面我们来写一个例子

首先我们先在activity_mian.xml定义布局，整个布局的外面是线性布局，上面是帧布局切换不同的Fragment，底下是RadioGroup嵌套的是RadioButton。代码如下所示：

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ffffff"

android:orientation="vertical">

android:id="@+id/frameLayout"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

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">

android:id="@+id/rb_home"

style="@style/MainButtonStyle"

android:drawableTop="@drawable/home_button_selector"

android:text="首页" />

android:id="@+id/rb_type"

style="@style/MainButtonStyle"

android:drawableTop="@drawable/type_button_selector"

android:text="分类" />

android:id="@+id/rb_community"

style="@style/MainButtonStyle"

android:drawableTop="@drawable/community_button_selector"

android:paddingTop="10dp"

android:text="发现" />

android:id="@+id/rb_cart"

style="@style/MainButtonStyle"

android:drawableTop="@drawable/cart_button_selector"

android:text="购物车" />

android:id="@+id/rb_user"

style="@style/MainButtonStyle"

android:drawableTop="@drawable/user_button_selector"

android:text="个人中心" />

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

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

0dp

wrap_content

1

@null

@drawable/bottom_button_text_selector

10sp

center

里面还有一个@drawable/bottom_button_text_selector，这个是设置图片和文字的颜色，在drawable的目录下建bottom_button_text_selector，代码如下所示：

接着我们继续来完善drawable，有【首页】【分类】【发现】【购物车】【个人中心】，写法都是一样的，这里用【首页】来做例子，在drawable目录下建home_button_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 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实现底部导航栏的思路和代码实现就是这样的。

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