以前写过一篇也是Tab切换的文章，当时做安卓一年左右，单纯觉得这样能实现功能，但是没有注意到性能和代码简洁性的问题，文章为 http://blog.csdn.net/nzzl54/article/details/52537320
今天的文章些许借鉴了这篇文章，这里面也介绍了几种Tab切换的设计，有兴趣的可以去看看：
http://blog.csdn.net/u010583599/article/details/52056894
现在有更好的方法来实现Tab的切换，这里我用的是ViewPage+RadioGroup的方法，当然，最快捷的一定是ViewPage+TabLayout的方法，只是TabLayout的切换支持的效果比较少，用RadioGroup我们可以设计一些自定义的图标或者别的花样，这里我打算简单点，设计上图标下文字的Tab，这里给出主要代码。
一、设计点击时的文字颜色切换（放在res文件夹的color文件夹下，如果没有自己建立文件夹）radio_button_text.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/blue" android:state_checked="true"/>
<item android:color="@color/ps_999999"/>
</selector>
radioButton的样式：
<style name="rb_bottom_style">
<item name="android:textSize">@dimen/font_12</item>
<item name="android:textColor">@color/gray_666666</item>
<item name="android:ellipsize">marquee</item>
<item name="android:gravity">center</item>
<item name="android:button">@null</item>
<item name="android:singleLine">true</item>
<item name="android:background">@null</item>
<item name="android:drawablePadding">@dimen/space_5</item>
<item name="android:paddingTop">@dimen/space_5</item>
</style>
二、布局文件
（1）main_botton_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="@+id/flBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="@dimen/space_5"
android:paddingBottom="@dimen/space_5"
android:background="#F7F7F7">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RadioGroup
android:id="@+id/main_radio"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rbtab0"
style="@style/rb_bottom_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:checked="true"
android:drawableTop="@drawable/rb_main_news_selector"
android:text="嘻嘻"
android:textColor="@color/radio_button_text"/>
<RadioButton
android:id="@+id/rbtab1"
style="@style/rb_bottom_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:drawableTop="@drawable/rb_main_news_selector"
android:text="哈哈"
android:textColor="@color/radio_button_text"/>
<RadioButton
android:id="@+id/rbtab2"
style="@style/rb_bottom_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:drawableTop="@drawable/rb_main_news_selector"
android:text="呵呵"
android:textColor="@color/radio_button_text"/>
<RadioButton
android:id="@+id/rbtab3"
style="@style/rb_bottom_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:drawableTop="@drawable/rb_main_news_selector"
android:text="其他"
android:textColor="@color/radio_button_text"/>
</RadioGroup>
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
（2）fragment_test.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white_ffffff">
<LinearLayout
android:id="@+id/layout_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/tv_fragment"
android:padding="@dimen/space_10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试Fragment"
android:textColor="@color/white_ffffff"
android:gravity="center"
android:background="@color/red"/>
</LinearLayout>
</LinearLayout>
(3)activity_main_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white_ffffff">
<include layout="@layout/include_toolbar"/>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/test_slight_blue"/>
<include layout="@layout/main_botton_tab" />
</LinearLayout>
三、代码
（1）Fragment：就展示TextView，布局已在上面给出
/**
* Created by lan.zheng on 2018/3/5.
*
*/
@SuppressLint("ValidFragment")
public class tabTestFragment extends BaseFragment{
private TextView tv_fragment;
private String setText = "";
@SuppressLint("ValidFragment")
public tabTestFragment(String s){
setText = s;
}
private View view;
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_test, container, false);
return view;
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initView();
}
private void initView(){
tv_fragment = (TextView)view.findViewById(R.id.tv_fragment);
tv_fragment.setText(setText);
tv_fragment.setBackgroundColor(getResources().getColor(R.color.test_green));
}
}
（2）Activity：四个Fragement和Viewpage+Radiogroup的用法
/**
* Created by lan.zheng on 2018/3/5.
* tab切换的首页
*/
public class MainTabActivity extends AppCompatActivity {
public Toolbar mToolbar;
public ToolBarManager mToolBarManager;
private ViewPager viewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments = new ArrayList<Fragment>();
/**
* fragment页面
*/
private Fragment fragment0;
private Fragment fragment1;
private Fragment fragment2;
private Fragment fragment3;
/**
* tab切换控制
*/
private RadioGroup main_radio;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_tab);
findView();
initToolBar();
initData();
initTab();
}
private void findView(){
main_radio = (RadioGroup)findViewById(R.id.main_radio);
main_radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rbtab0:
viewPager.setCurrentItem(0);
break;
case R.id.rbtab1:
viewPager.setCurrentItem(1);
break;
case R.id.rbtab2:
viewPager.setCurrentItem(2);
break;
case R.id.rbtab3:
viewPager.setCurrentItem(3);
break;
default:
break;
}
}
});
}
private void initToolBar() {
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolBarManager = new ToolBarManager(mToolbar, this);
mToolBarManager.init()
.showBack(true).setTitle("测试");
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onBackPressed();
}
});
viewPager = (ViewPager)findViewById(R.id.container);
viewPager.setOffscreenPageLimit(4); //防止Fragment被回收
}
private void initData(){
fragment0 = new tabTestFragment("第一个页面");
fragment1 = new tabTestFragment("第二个页面");
fragment2 = new tabTestFragment("第三个页面");
fragment3 = new tabTestFragment("第四个页面");
mFragments.add(fragment0);
mFragments.add(fragment1);
mFragments.add(fragment2);
mFragments.add(fragment3);
mAdapter = new FragmentPagerAdapter( getSupportFragmentManager()) {
@Override
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
};
viewPager.setAdapter(mAdapter);
}
private void initTab(){
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
//当前选中的Fragment 下标
int checkButtonId = 0;
switch (main_radio.getCheckedRadioButtonId()){
case R.id.rbtab0:
checkButtonId = 0;
LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
break;
case R.id.rbtab1:
checkButtonId = 1;
LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
break;
case R.id.rbtab2:
checkButtonId = 2;
LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
break;
case R.id.rbtab3:
checkButtonId = 3;
LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
break;
}
if(arg0 == checkButtonId){
//当一样的时候，不需要改变tab项，原因是在点击的时候已经把页面也定位到了对应的Fragment
return;
}
setCheckButton(arg0);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private void setCheckButton(int position){
switch (position){
case 0:
main_radio.check(R.id.rbtab0);
break;
case 1:
main_radio.check(R.id.rbtab1);
break;
case 2:
main_radio.check(R.id.rbtab2);
break;
case 3:
main_radio.check(R.id.rbtab3);
break;
}
}
}
注意：fragment过多的时候，有可能被回收，因此要写
viewPager.setOffscreenPageLimit(4)
具体可以参考这篇文章，方法很多，可以参考文章
点击打开链接http://blog.csdn.net/nzzl54/article/details/68944000
效果图如下：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
