RadioButton使用(一)实现底部带指示条的Tab选项卡

最新推荐文章于 2025-06-12 11:21:32 发布

原创最新推荐文章于 2025-06-12 11:21:32 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#radio button #tab组件

Android 同时被 2 个专栏收录

26 篇文章

订阅专栏

实用小功能

18 篇文章

订阅专栏

本文介绍了如何使用RadioButton替代ViewPager实现底部带指示条的Tab选项卡。通过RadioButton的互斥特性，实现简洁的代码和清晰的逻辑。示例代码包括XML布局和Fragment，展示了一个可扩展到多个选项卡的解决方案。

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

在对之前的项目中做重构时候发现一个界面的tab选项卡，之前一直用着看是不能滑动的，但是在代码中发现是用viewpager实现的后面强制把滑动给禁掉了，代码显示有点多也很乱。既然问了领导需求没有滑动只能点击，那么就没有必要再用viewpager去实现了。重构后采用RadioButton，主要利用RadioButton的“互斥”特性实现这样代码量少，逻辑清晰，也便于其他开发阅读理解。
由于这个demo是直接临时从项目中抽出来的，所以稍微有点乱，不过代码量不多，有需要的可以自己回头再整理下，废话不多说看看最后实现的效果图：
这里写图片描述

直接上代码

package com.radiobuttontab;

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.RadioButton;

/**
 * Created by nanfeilong on 2017/8/6
 * RadioButton 选项卡
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private RadioButton tab1, tab2, tab3;
    private View mViewPagerLine;//选项卡下面的红色线条控件
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;
    private int width;
    private FrameLayout.LayoutParams params;
    private DisplayMetrics metric;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tab1 = (RadioButton) findViewById(R.id.tab1);
        tab2 = (RadioButton)findViewById(R.id.tab2);
        tab3 = (RadioButton) findViewById(R.id.tab3);
        mViewPagerLine = findViewById(R.id.imformation_viewpager_line);//选项卡下面的红色线条
        params = (android.widget.FrameLayout.LayoutParams) mViewPagerLine.getLayoutParams();
        initFragment();
    }

    private void initFragment() {
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        width=getScreenWidth()/3;
        setMetric();
        tab1.setOnClickListener(this);
        tab2.setOnClickListener(this);
        tab3.setOnClickListener(this);
    }

    /**
     * 初始选项卡红色线条位置
     */
    private void setMetric() {
            tab1.setChecked(true);
            selectedTab(0);
    }
    /**
     * 切换fragment
     * @param type
     */
    private void selectedTab(int type){
        setLine(type);
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        switch (type){
            case 0:
                fragmentTransaction.replace(R.id.tips_content,fragment1);
                break;
            case 1:
                fragmentTransaction.replace(R.id.tips_content,fragment2);
                break;
            case 2:
                fragmentTransaction.replace(R.id.tips_content,fragment3);
                break;
            default:
                break;
        }
        fragmentTransaction.commit();

    }

    /**
     * 点击选项卡 对应下面的红色线条位置
     * @param i
     */
    private void setLine(int i) {
        switch (i){
            case 0:
                params.setMargins(width * 0, 0, 0, 0);
                break;
            case 1:
                params.setMargins(width* 1, 0, 0, 0);
                break;
            case 2:
                params.setMargins(width * 2, 0, 0, 0);
                break;
        }
        params.width = width;
        mViewPagerLine.setLayoutParams(params);
    }

    private int getScreenWidth(){
        if(metric==null)
            metric = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metric);
        return metric.widthPixels;
    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.tab1:
                selectedTab(0);
                break;
            case R.id.tab2:
                selectedTab(1);
                break;
            case R.id.tab3:
                selectedTab(2);
                break;
        }
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    tools:context="com.radiobuttontab.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="48dp">

        <RadioGroup
            android:id="@+id/tab_rg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/tab1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:text="tab1"
                android:textColor="#333333"
                android:textSize="16sp" />

            <View
                android:layout_width="0.5dp"
                android:layout_height="match_parent"
                android:background="#cccccc" />

            <RadioButton
                android:id="@+id/tab2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:text="tab2"
                android:textColor="#333333"
                android:textSize="16sp" />

            <View
                android:layout_width="0.5dp"
                android:layout_height="match_parent"
                android:background="#cccccc" />

            <RadioButton
                android:id="@+id/tab3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:button="@null"
                android:gravity="center"
                android:text="tab3"
                android:textColor="#333333"
                android:textSize="16sp" />
        </RadioGroup>


        <View
            android:id="@+id/imformation_viewpager_line"
            android:layout_width="0dp"
            android:layout_height="3dp"
            android:layout_gravity="bottom"
            android:background="#ff944d"
            android:gravity="center_horizontal" />
    </FrameLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#cccccc"
        android:gravity="center_horizontal" />

    <RelativeLayout
        android:id="@+id/tips_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content" >
    </RelativeLayout>

</LinearLayout>

需要注意的是这里的点击事件我直接用的是onClick，其实RadioButton也有专门的事件监听可以去实现CompoundButton.OnCheckedChangeListener接口，然后重写onCheckedChanged(CompoundButton buttonView, boolean isChecked)方法，其中第一个参数很好理解，就是点击的那个view，至于第二个则是当点击此radiobutton，是否是选中状态传一个boolean，true表示点击后为选中状态。至于用哪个根据自己实际需求，这里为了简单我才用了onClick。效果是一样的。

然后是里面的三个对应的Fragment，由于都是差不多一样的这里我给出一个和对应的xml布局

package com.radiobuttontab;

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


/**
 * Created by nanfeilong on 2017/6/27 0027.
 * 秘籍下的 教育资讯
 */

public class Fragment1 extends Fragment {

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

fragment_tips1.xml 中测试只放了一个button

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

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_gravity="center"

        android:layout_height="wrap_content"
        android:text="1111" />
</LinearLayout>