Tab效果之radiogroup+fragment

最新推荐文章于 2025-05-23 16:49:04 发布

bamboo_2014

最新推荐文章于 2025-05-23 16:49:04 发布

阅读量859

点赞数

CC 4.0 BY-SA版权

分类专栏： android

本文链接：https://blog.youkuaiyun.com/bzy601638015/article/details/29564747

android 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了使用radiogroup和fragment实现tab效果的方法，包括底部radiobutton的选中颜色变化、顶部横线的实现以及fragment的填充。作者通过Java代码动态改变文字颜色，期待读者分享更优解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif;">今天第一次写博客，先上效果图：</span>

实现TAB效果的方式很多，今天我就采用了一种radiogroup+fragment 的方式实现，先说明下，因为本人还没有毕业，这个效果是不是工作中需要的，我不太了解，也希望有不妥之处大家可以指出。

简单的介绍下我实现的思路：

1.底部里面是radiobutton，如果选中要改变颜色的话，其实背景图片改变很简单，但是文字颜色改变的话，我一开始也是给文字设置了android:textColor,给了它一个样式，但是运行报错了呢，后来我就采用了在Java代码中动态的改变字体的颜色，虽然方法有点点土，但是目前想不出来别的什么思路，如果您做过这个效果，有更好的思路，方便提供下

2.上面的横线采用的就是一个view设置高度为1px

3.然后最上面有一个FrameLayout用来填充fragment的

项目的架构如下：

1.接下来，展现一下selector的源代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_question_select" android:state_checked="true"></item>
    <item android:drawable="@drawable/tab_question_select" android:state_pressed="true"></item>
    <item android:drawable="@drawable/tab_question_nor"></item>

</selector>

其余几个类似

2.展现一下布局的源代码：

<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" >

    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/div_view" >
    </FrameLayout>

    <View
        android:id="@+id/div_view"
        android:layout_width="fill_parent"
        android:layout_height="1.0px"
        android:layout_above="@+id/main_radiogroup"
        android:layout_marginBottom="2dip"
        android:background="#ffc9cacb" />

    <RadioGroup
        android:id="@+id/main_radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/tab_rbo_question"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/selector_tab_question"
            android:text="问他"
            android:textColor="@color/tv_checked_bg" />

        <RadioButton
            android:id="@+id/tab_rbo_message"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_message"
            android:gravity="center_horizontal"
            android:text="消息" />

        <RadioButton
            android:id="@+id/tab_rbo_answer"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_answer"
            android:gravity="center_horizontal"
            android:text="我要回答" />

        <RadioButton
            android:id="@+id/tab_rbo_discover"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_discover"
            android:gravity="center_horizontal"
            android:text="发现" />

        <RadioButton
            android:id="@+id/tab_rbo_user"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_user"
            android:gravity="center_horizontal"
            android:text="我" />
    </RadioGroup>

</RelativeLayout>

3.展现一下java里面的源代码：

package com.tab_bamboo.radiogroup;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.Menu;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
/**
 * 
 * @author bamboo
 * 
 */
public class MainActivity extends Activity {
	/** 底部导航 */
	private RadioGroup main_radiogroup;

	private FragmentManager fm;
	private FragmentTransaction ft;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		main_radiogroup = (RadioGroup) this.findViewById(R.id.main_radiogroup);
		fm = getFragmentManager();
		main_radiogroup
				.setOnCheckedChangeListener(new OnCheckedChangeListener() {

					@SuppressLint("ResourceAsColor")
					@Override
					public void onCheckedChanged(RadioGroup group, int checkedId) {
						/** 改变文字的颜色*/
						int length = group.getChildCount();
						for (int i = 0; i < length; i++) {
							RadioButton rgo=(RadioButton) group.getChildAt(i);
							if(rgo.getId() != checkedId)
								rgo.setTextColor(getResources().getColor(R.color.tv_checked_nor));
							else 
								rgo.setTextColor(getResources().getColor(R.color.tv_checked_bg));
						}
						
						switch (checkedId) {
						case R.id.tab_rbo_answer:
							changeAnswer();
							break;
						case R.id.tab_rbo_discover:
							changeDiscover();
							break;
						case R.id.tab_rbo_message:
							changeMessage();
							break;
						case R.id.tab_rbo_question:
							changeQuesion();
							break;
						case R.id.tab_rbo_user:
							changeUser();
							break;
						}
					}
				});
		/** 默认选择第一个*/
		changeQuesion();
	}

	/**
	 * 切换问他
	 */
	private void changeQuesion() {
		ft = fm.beginTransaction();
		TabFragment tab1 = new TabFragment();
		Bundle bundle = new Bundle();
		bundle.putString("name", "问他");
		tab1.setArguments(bundle);
		ft.replace(R.id.frame_container, tab1);
		ft.commit();
	}

	/**
	 * 切换消息
	 */
	private void changeMessage() {
		ft = fm.beginTransaction();
		TabFragment tab1 = new TabFragment();
		Bundle bundle = new Bundle();
		bundle.putString("name", "消息");
		tab1.setArguments(bundle);
		ft.replace(R.id.frame_container, tab1);
		ft.commit();
	}
	/***
	 * 切换登录
	 */
	private void changeUser(){
		ft=fm.beginTransaction();
		TabFragment tab1 = new TabFragment();
		Bundle bundle = new Bundle();
		bundle.putString("name", "用户");
		tab1.setArguments(bundle);
		ft.replace(R.id.frame_container, tab1);
		ft.commit();
	}
	/***
	 * 切换回答
	 */
	private void changeAnswer(){
		ft=fm.beginTransaction();
		TabFragment tab1 = new TabFragment();
		Bundle bundle = new Bundle();
		bundle.putString("name", "回答");
		tab1.setArguments(bundle);
		ft.replace(R.id.frame_container, tab1);
		ft.commit();
	}
	
	/***
	 * 切换回答
	 */
	private void changeDiscover(){
		ft=fm.beginTransaction();
		TabFragment tab1 = new TabFragment();
		Bundle bundle = new Bundle();
		bundle.putString("name", "发现");
		tab1.setArguments(bundle);
		ft.replace(R.id.frame_container, tab1);
		ft.commit();
	}

}

代码下载地址：

点击打开链接