【移动应用开发技术】怎么在android应用中利用Fragment与RadioButton实现一个底部导航栏

【移动应用开发技术】怎么在android应用中利用Fragment与RadioButton实现一个底部导航栏

本篇文章为大家展示了怎么在android应用中利用Fragment与RadioButton实现一个底部导航栏，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。首先我们先在activity_mian.xml定义布局，整个布局的外面是线性布局，上面是帧布局切换不同的Fragment，底下是RadioGroup嵌套的是RadioButton。代码如下所示：<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/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"

android:drawableTop="@drawable/home_button_selector"

android:text="首页"

/>

<RadioButton

android:id="@+id/rb_type"

android:drawableTop="@drawable/type_button_selector"

android:text="分类"

/>

<RadioButton

android:id="@+id/rb_community"

android:drawableTop="@drawable/community_button_selector"

android:paddingTop="10dp"

android:text="发现"

/>

<RadioButton

android:id="@+id/rb_cart"

android:drawableTop="@drawable/cart_button_selector"

android:text="购物车"

/>

<RadioButton

android:id="@+id/rb_user"

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

version="1.0"

encoding="utf-8"?>

<selector

xmlns:android="/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="/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

munity.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