android selector RadioButton实现Tab功能

最新推荐文章于 2023-06-04 06:00:00 发布

原创最新推荐文章于 2023-06-04 06:00:00 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

android 同时被 2 个专栏收录

128 篇文章

订阅专栏

android xml

1 篇文章

订阅专栏

本文介绍了如何使用RadioButton和Selector XML文件在Android中创建Tab功能。通过为RadioButton设置不同的状态选择器，实现了按钮的选中效果。具体步骤包括创建selector.xml和radiobtn_selector_color.xml文件，将它们作为RadioButton的背景，并在activity_main.xml布局文件中进行配置。需要注意，使用Button无法显示选中状态，而使用RadioButton则可以实现所需功能。

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

研究了好几天都一直有bug，今天终于弄出来了，开心~~

效果图如下：

说下大致思路：

首先利用radiobutton做菜单键，为button设置selector

1.创建xml文件

在res下创建drawable 文件夹，在drawable文件夹下创建selector.xml

selector.xml内容如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/icon_diamond"></item>
    <item android:state_checked="true" android:drawable="@drawable/icon_diamond_press"></item>
</selector>

注： icon_diamond为未选中状态下图片， icon_diamond_press为选中状态下图片

PS:附上selector的一些属性。

android:drawable 放一个drawable资源
android:state_pressed 是否按下，如一个按钮触摸或者点击。
android:state_focused 是否取得焦点，比如用户选择了一个文本框。
android:state_hovered 光标是否悬停，通常与focused state相同，它是4.0的新特性
android:state_selected 被选中，它与focus state并不完全一样，如一个list view 被选中的时候，它里面的各个子组件可能通过方向键，被选中了。
android:state_checkable 组件是否能被check。如：RadioButton是可以被check的。
android:state_checked 被checked了，如：一个RadioButton可以被check了。
android:state_enabled 能够接受触摸或者点击事件
android:state_activated 被激活
android:state_window_focused 应用程序是否在前台，当有通知栏被拉下来或者一个对话框弹出的时候应用程序就不在前台了

为文字设置selector，在drawable文件夹下创建radiobtn_selector_color.xml

radiobtn_selector_color.xml

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

    <item android:state_checked="true" android:color="@android:color/holo_red_light"/>
    <item android:state_checked="false" android:color="@android:color/black"/>
    <item android:color="@android:color/black"/>

</selector>

2.将selector.xml设为RadioButton的背景

页面布局：activity_main.xml

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

    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp">

        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="乐蜂网"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="#000000"
            android:layout_alignParentBottom="true" />

    </RelativeLayout>

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_channel"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#00000000"
            android:button="@null"

            android:checked="true"
            android:drawableTop="@drawable/selector"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="1dp"
            android:text="特卖"
            android:textColor="@drawable/radiobtn_selector_color" />


        <RadioButton
            android:id="@+id/rb_message"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#00000000"
            android:button="@null"

            android:drawableTop="@drawable/selector"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="1dp"
            android:text="商城"
            android:textColor="@drawable/radiobtn_selector_color" />


        <RadioButton
            android:id="@+id/rb_better"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#00000000"
            android:button="@null"

            android:drawableTop="@drawable/selector"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="1dp"
            android:text="购物车"
            android:textColor="@drawable/radiobtn_selector_color"  />


        <RadioButton
            android:id="@+id/rb_setting"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_gravity="bottom"
            android:background="#00000000"
            android:button="@null"

            android:drawableTop="@drawable/selector"
            android:gravity="center_horizontal|bottom"
            android:paddingTop="1dp"
            android:text="我的蜂巢"
            android:textColor="@drawable/radiobtn_selector_color"  />



    </RadioGroup>

    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@id/rg_tab_bar"
        android:background="@color/colorPrimary" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_tab_bar"
        android:layout_below="@id/ly_top_bar" />

这样就可以实现Tab功能，需要的注意的一点是， 使用Button时并不会出现选中状态

四个Fragment，类似于微信的主界面

Fragment1.java

package com.example.demo.myapplication;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MyFragment1 extends Fragment {
    public MyFragment1(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        TextView content = (TextView) view.findViewById(R.id.content);
        content.setText("第一个Fragment");
        return view;
    }
}

MainActivity.java

package com.example.demo.myapplication;

import android.os.Bundle;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener,
        ViewPager.OnPageChangeListener {

    //UI Objects
    private TextView txt_topbar;
    private RadioGroup  rg_tab_bar;
    private RadioButton rb_channel;
    private RadioButton rb_message;
    private RadioButton rb_better;
    private RadioButton rb_setting;
    private ViewPager vpager;

    private MyFragmentPagerAdapter mAdapter;

    //几个代表页面的常量
    public static final int PAGE_ONE = 0;
    public static final int PAGE_TWO = 1;
    public static final int PAGE_THREE = 2;
    public static final int PAGE_FOUR = 3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        bindViews();
        rb_channel.setChecked(true);
    }

    private void bindViews() {
        txt_topbar = (TextView) findViewById(R.id.txt_topbar);
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
        rb_channel = (RadioButton) findViewById(R.id.rb_channel);
        rb_message = (RadioButton) findViewById(R.id.rb_message);
        rb_better = (RadioButton) findViewById(R.id.rb_better);
        rb_setting = (RadioButton) findViewById(R.id.rb_setting);
        rg_tab_bar.setOnCheckedChangeListener(this);

        vpager = (ViewPager) findViewById(R.id.vpager);
        vpager.setAdapter(mAdapter);
        vpager.setCurrentItem(0);
        vpager.addOnPageChangeListener(this);
    }
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.rb_channel:
                vpager.setCurrentItem(PAGE_ONE);
                break;
            case R.id.rb_message:
                vpager.setCurrentItem(PAGE_TWO);
                break;
            case R.id.rb_better:
                vpager.setCurrentItem(PAGE_THREE);
                break;
            case R.id.rb_setting:
                vpager.setCurrentItem(PAGE_FOUR);
                break;
        }
    }
    //重写ViewPager页面切换的处理方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
        if (state == 2) {
            switch (vpager.getCurrentItem()) {
                case PAGE_ONE:
                    rb_channel.setChecked(true);
                    break;
                case PAGE_TWO:
                    rb_message.setChecked(true);
                    break;
                case PAGE_THREE:
                    rb_better.setChecked(true);
                    break;
                case PAGE_FOUR:
                    rb_setting.setChecked(true);
                    break;
            }
        }
    }

}