【声明】

欢迎转载,但请保留文章原始出处→_→

生命壹号:http://www.cnblogs.com/smyhvae/

文章来源:http://www.cnblogs.com/smyhvae/p/4463931.html

【正文】

实现APP首页底部Tab的切换已经见过四五种方式了,先来看运行的效果图吧:

Android自定义控件----RadioGroup实现APP首页底部Tab的切换-LMLPHP

今天我们就用RadioGroup的方法来实现以下。

【开发环境】

物理机版本:win 7旗舰版(64位)

IDE版本:Android Studio 1.2 preview

工程文件结构:(本文最后有源码)

Android自定义控件----RadioGroup实现APP首页底部Tab的切换-LMLPHP

  • 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代码是一样的,就不贴出来了,详见本文最后的源码。

【工程文件】

2015-04-28-RadioGroupTabDemo

04-22 14:35