使用RadioButton+Fragment实现微信底部标签菜单

前言

以前都是使用TabHost组件来实现底部标签导航，由于其可定制性较差，所以实现起来比较麻烦。今天来介绍一种使用RadioButton+Fragment轻松实现微信底部标签菜单的效果，先上图：





现在分步讲解整个实现过程：

1、布局代码

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
   <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
   </FrameLayout>

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="bottom" >

    <RadioGroup 
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <RadioButton 
            android:id="@+id/message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/bg_drawable"
            android:text="消息"
            android:checked="true"
            android:button="@null"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/ic_launcher"
            />
         <RadioButton 
            android:id="@+id/friend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/bg_drawable"
            android:text="好友"
            android:button="@null"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/ic_launcher"
            />
          <RadioButton 
             android:id="@+id/setting"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/bg_drawable"
            android:text="设置"
            android:button="@null"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/ic_launcher"
            />
     </RadioGroup>
     </LinearLayout>
</LinearLayout>

布局文件比较简单，但有几个属性需要拿出来重点介绍下：

android:drawableTop：该属性来自于TextView（派生出了Button、RadioButton），真的太强大了，可以直接在文本内容上部添加一个图片，只要一个属性轻松解决底部图标设置的问题。当然他的兄弟属性还有：drawableBottom、drawableStart/drawableEnd、drawableLeft/drawableRight，都是在文本的某个位置设置一张图。

android:button="@null":该属性可以隐藏掉单选按钮左边默认的圆形按钮，从而让我们的一组单选按钮看起来化身为了“普通按钮”，但是这组按钮，当你check选中了某个按钮的时候，其他按钮自动变为unchecked状态，所以这个时候可以通过为他们设置background属性来改变选中状态的按钮背景，如下是我在drawable文件夹设置的bg_drawable内容：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"    android:drawable="@drawable/dark"></item>
<item android:state_checked="false"    android:drawable="@drawable/light"></item>
</selector>

2、单选按钮对应的Fragment

3个单选按钮对应的3个Fragment都很简单，都只包含一个简单的文本框。实际开发当中以具体业务为准，本文只是讲解功能。

MessageFragment的布局文件：

<?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:orientation="vertical"
android:gravity="center"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
/>
</LinearLayout>

MessageFragment.java文件：

package com.example.radiobuttontabdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MessageFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view =inflater.inflate(R.layout.message_fragment, container, false);
return view;
}
}

FriendFragment、SettingFragment的布局文件以及java代码类似。

3、MainActivity.java

代码很简单，注释讲解也很详细，具体代码见下：

package com.example.radiobuttontabdemo;

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

public class MainActivity extends FragmentActivity {
private RadioGroup radioGroup;
private MessageFragment messageFragment;
private FriendFragment friendFragment;
private SettingFragment settingFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//		 默认在内容区显示消息Fragment
setTabSelection(0);

radioGroup=(RadioGroup) findViewById(R.id.rg);
//		为radioGroup设置了选中状态改变的监听器
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

@Override
public void onCheckedChanged(RadioGroup arg0, int id) {
// TODO Auto-generated method stub
switch (id) {
case R.id.message:
setTabSelection(0);
break;
case R.id.friend:
setTabSelection(1);
break;
case R.id.setting:
setTabSelection(2);
break;
default:
break;
}
}
});
}
/**
* 根据传入的index参数来设置选中的tab页。
*
* @param index
*            每个tab页对应的下标。0表示消息，1表示好友，2表示设置
*/
private void setTabSelection(int index) {
// 开启一个Fragment事务
FragmentTransaction transaction =getSupportFragmentManager().beginTransaction();
// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
hideFragment(transaction);
switch (index) {
// 点击消息tab
case 0:
if (messageFragment == null) {
// 如果MessageFragment为空，则创建一个并添加到界面上
messageFragment = new MessageFragment();
transaction.add(R.id.content, messageFragment);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(messageFragment);
}
break;
// 点击好友tab
case 1:
if (friendFragment == null) {
// 如果friendFragment为空，则创建一个并添加到界面上
friendFragment = new FriendFragment();
transaction.add(R.id.content, friendFragment);
} else {
// 如果friendFragment不为空，则直接将它显示出来
transaction.show(friendFragment);
}
break;
// 点击设置tab
case 2:
if (settingFragment == null) {
// 如果settingFragment为空，则创建一个并添加到界面上
settingFragment = new SettingFragment();
transaction.add(R.id.content, settingFragment);
} else {
// 如果settingFragment不为空，则直接将它显示出来
transaction.show(settingFragment);
}
break;

}
transaction.commit();
}
/**
* 将所有的Fragment都置为隐藏状态。
*
* @param transaction
*            用于对Fragment执行操作的事务
*/
private void hideFragment(FragmentTransaction transaction) {
if (messageFragment != null) {
transaction.hide(messageFragment);
}
if (friendFragment != null) {
transaction.hide(friendFragment);
}
if (settingFragment != null) {
transaction.hide(settingFragment);
}
}

}

好了，整篇文章的讲解就到这里了，使用RadioButton+Fragment实现微信底部标签菜单真的不难，梳理清思路，很好理解。