【声明】
欢迎转载，但请保留文章原始出处→_→
生命壹号：http://www.cnblogs.com/smyhvae/
文章来源：http://www.cnblogs.com/smyhvae/p/4463931.html
【正文】
实现APP首页底部Tab的切换已经见过四五种方式了，先来看运行的效果图吧：
今天我们就用RadioGroup的方法来实现以下。
【开发环境】
物理机版本：win 7旗舰版（64位）
IDE版本：Android Studio 1.2 preview
工程文件结构：（本文最后有源码）
- HomeActivity.java:整个首页的界面
- 四个Fragment.java:对应的四个Fragment界面
- drawable文件夹中是对应tab和文字切换的状态
- 剩下的xml文件就是对应的Activity和Fragment的布局文件了。
一、布局文件：
（1）activity_home.xml:HomeActivity的布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity"> <!--tab上方的显示区域-->
<FrameLayout
android:id="@+id/mHomeContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/mHomeRadioGroup"> </FrameLayout> <!--底下的四个tab-->
<RadioGroup
android:id="@+id/mHomeRadioGroup"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:background="@color/tab_bg" > <RadioButton
android:id="@+id/mHomeHomeRb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="@string/home_home"
android:textColor="@drawable/selector_tab_text_color"
android:background="@color/tab_bg"
android:drawableTop="@drawable/selector_tab_home"
/> <RadioButton
android:id="@+id/mHomeFindRb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="@string/home_find"
android:textColor="@drawable/selector_tab_text_color"
android:background="@color/tab_bg"
android:drawableTop="@drawable/selector_tab_find"
/> <RadioButton
android:id="@+id/mHomeSearchRb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="@string/home_search"
android:textColor="@drawable/selector_tab_text_color"
android:background="@color/tab_bg"
android:drawableTop="@drawable/selector_tab_search"
/> <RadioButton
android:id="@+id/mHomeProfileRb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="@string/home_profile"
android:textColor="@drawable/selector_tab_text_color"
android:background="@color/tab_bg"
android:drawableTop="@drawable/selector_tab_profile"
android:checked="true"
/>
</RadioGroup>
</RelativeLayout>
代码有点多，无非就是一个FrameLayout对应的是tab上方的显示区域，然后四个RadioButton凑成一组单选按钮放在RadioGroup当中。
13行：能够保证FrameLayout占据除开Tab之后的剩下的全部空间。
76行：android:checked="true"这个很重要，稍后在java代码中讲。
RadioButton的属性有点多，我们选取就选取第一个RadioButton进行讲解，上面的第一个RadioButton的属性摘抄如下：
<RadioButton
android:id="@+id/mHomeHomeRb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:gravity="center"
android:text="@string/home_home"
android:textColor="@drawable/selector_tab_text_color"
android:background="@color/tab_bg"
android:drawableTop="@drawable/selector_tab_home"
/>
上方代码的解释如下：
05行：weight为1，并且width为0dp，是保证四个tab能均分宽度。
06行：去掉RadioButton的样式，也就是去掉那个小图标，然后radiobutton就只剩下文字了。
07行：让里面的内容居中
08行：显示的文字
10行：设置这个tab的背景色和整个radioGroup的背景色一样，不过，也可以删掉（删掉之后，在我的小米手机手机上的排版会有问题）
10行：在这个tab的上面添加对应的icon图标（很重要，就是有了这个属性，每个tab的图标才会不一样哦）。
（2）fragment_home.xml:fragment的布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HomeFragment"
android:textSize="20sp"/> </LinearLayout>
其他三个fragment的布局文件都一样，代码就不贴出来了，本文最后有源码下载。
（3）selector_tab_home.xml：tab被选中时对应icon的状态
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/tab_home_selected" android:state_pressed="false" android:state_selected="true" />
<item android:drawable="@mipmap/tab_home_selected" android:state_checked="true" android:state_pressed="false" />
<item android:drawable="@mipmap/tab_home_nomal" /> </selector>
06行是默认的状态。
其他三个tab的状态都差不多，代码就不贴出来了，本文最后有源码下载。
（4）selector_tab_text_color.xml：tab中的文字被选中时的状态
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/white" android:state_pressed="false" android:state_selected="true" />
<item android:color="@color/white" android:state_checked="true" android:state_pressed="false" />
<item android:color="@color/black" /> </selector>
06行：默认的文字颜色是黑色，被切换时是白色。
二、Java代码：
（1）HomeActivity.java:
package com.smyhvae.radiogrouptabdemo; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup; import com.smyhvae.radiogrouptabdemo.fragment.FindFagment;
import com.smyhvae.radiogrouptabdemo.fragment.HomeFagment;
import com.smyhvae.radiogrouptabdemo.fragment.ProfileFagment;
import com.smyhvae.radiogrouptabdemo.fragment.SearchFagment; /**
* Created by smyhvae on 2015/4/28.
*
*/ public class HomeActivity extends FragmentActivity {
private FrameLayout mHomeContent;
private RadioGroup mHomeRadioGroup;
private RadioButton mHomeHomeRb;
private RadioButton mHomeFindRb;
private RadioButton mHomeSearchRb;
private RadioButton mHomeProfileRb; static final int NUM_ITEMS = 4;//一共四个fragment @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);
initView();
initData();
} protected void initView() {
mHomeContent = (FrameLayout) findViewById(R.id.mHomeContent); //tab上方的区域
mHomeRadioGroup = (RadioGroup) findViewById(R.id.mHomeRadioGroup); //底部的四个tab
mHomeHomeRb = (RadioButton) findViewById(R.id.mHomeHomeRb);
mHomeFindRb = (RadioButton) findViewById(R.id.mHomeFindRb);
mHomeSearchRb = (RadioButton) findViewById(R.id.mHomeSearchRb);
mHomeProfileRb = (RadioButton) findViewById(R.id.mHomeProfileRb); //监听事件：为底部的RadioGroup绑定状态改变的监听事件
mHomeRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
int index = 0;
switch (checkedId) {
case R.id.mHomeHomeRb:
index = 0;
break;
case R.id.mHomeFindRb:
index = 1;
break;
case R.id.mHomeSearchRb:
index = 2;
break;
case R.id.mHomeProfileRb:
index = 3;
break;
}
//通过fragments这个adapter还有index来替换帧布局中的内容
Fragment fragment = (Fragment) fragments.instantiateItem(mHomeContent, index);
//一开始将帧布局中 的内容设置为第一个
fragments.setPrimaryItem(mHomeContent, 0, fragment);
fragments.finishUpdate(mHomeContent); }
});
} //第一次启动时，我们让mHomeHomeRb这个radiobutton处于选中状态。
// 当然了，在这之前，先要在布局文件中设置其他的某一个radiobutton（只要不是mHomeHomeRb就行）
// 的属性为android:checked="true"，才会出发下面的这个check方法切换到mHomeHomeRb
@Override
protected void onStart() {
super.onStart();
mHomeRadioGroup.check(R.id.mHomeHomeRb);
} //用adapter来管理四个Fragment界面的变化。注意，我这里用的Fragment都是v4包里面的
FragmentStatePagerAdapter fragments = new FragmentStatePagerAdapter(getSupportFragmentManager()) { @Override
public int getCount() {
return NUM_ITEMS;//一共有四个Fragment
} //进行Fragment的初始化
@Override
public Fragment getItem(int i) {
Fragment fragment = null;
switch (i) {
case 0://首页
fragment = new HomeFagment();
break;
case 1://发现
fragment = new FindFagment();
break; case 2://搜索
fragment = new SearchFagment();
break; case 3://我的
fragment = new ProfileFagment();
break;
default:
new HomeFagment();
break;
} return fragment;
}
}; protected void initData() { } }
代码注释已经很详细了。
尤其要注意的是第80行的注释，为了让app第一次启动时，默认就让第一个tab处于选中状态，我们现在activity_home.xml（76行）中让剩下的随便哪个radioButton的属性为checked，然后再重写上方java代码中的onStart方法（86行）。
（2）HomeFragment.java:
package com.smyhvae.radiogrouptabdemo.fragment; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; import com.smyhvae.radiogrouptabdemo.R; /**
* Created by smyh on 2015/4/28.
*/
public class HomeFagment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_home, null);
return view;
} //重写setMenuVisibility方法，不然会出现叠层的现象
@Override
public void setMenuVisibility(boolean menuVisibile) {
super.setMenuVisibility(menuVisibile);
if (this.getView() != null) {
this.getView().setVisibility(menuVisibile ? View.VISIBLE : View.GONE);
}
} }
剩下三个Fragment的java代码是一样的，就不贴出来了，详见本文最后的源码。
【工程文件】