Android原生实现分段选择

六年前写的一个控件,一直没有时间总结,趁年底不怎么忙,整理一下之前写过的组件。供大家一起参考学习。废话不多说,先上图。

一、效果图

实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的background样式实现,radioGroup嵌套radiobutton已经实现单选互斥,故直接监听其选中监听处理数据就好。

dp_0.5:就是0.5dp的意思,自行替换成自己的值。

dp_15:代表15dp

二、布局代码

采用的是RadioGroup嵌套RadioButton的方式。

  <!-- 日期标题 -->
        <RadioGroup
            android:id="@+id/rg_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/dp_24"
            android:layout_marginTop="@dimen/dp_15"
            android:orientation="horizontal"
            android:padding="1dp">

            <RadioButton
                android:id="@+id/rb_date_day"
                android:layout_width="@dimen/dp_34"
                android:layout_height="@dimen/dp_17"
                android:background="@drawable/day_checked"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:text="今日"
                android:textColor="@color/white"
                android:textSize="@dimen/sp_10" />

            <RadioButton
                android:id="@+id/rb_date_week"
                android:layout_width="@dimen/dp_34"
                android:layout_height="@dimen/dp_17"
                android:button="@null"
                android:background="@drawable/week_checked"
                android:text="本周"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="@dimen/sp_10" />

            <RadioButton
                android:id="@+id/rb_date_month"
                android:layout_width="@dimen/dp_34"
                android:layout_height="@dimen/dp_17"
                android:gravity="center"
                android:background="@drawable/month_checked"
                android:button="@null"
                android:text="本月"
                android:textColor="@color/white"
                android:textSize="@dimen/sp_10" />
        </RadioGroup>

三、样式代码

a.day_checked样式

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

a.1 day_chart_seleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff2775de" />
    <stroke
        android:width="@dimen/dp_0.5"
        android:color="#2775DE" />
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp" />
</shape>

a.2 day_chart_unseleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#06103A" />
    <stroke
        android:width="@dimen/dp_0.5"
        android:color="#2775DE" />
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp" />
</shape>

b.week_checked样式

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

b.2 week_chart_seleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff2775de" />
    <stroke
        android:width="@dimen/dp_0.5"
        android:color="#2775DE" />
    <corners android:radius="@dimen/dp_0" />
</shape>

b.3 week_chart_unseleced样式

这个样式要特别做下说说明,因为"本周"那个控件位于组件的中部,所以边框样式会出现跟左右两边叠加的现象,从而造成边框过粗的视觉。为了解决这个问题,我采用的是layer-list层级布局,通过颜色覆盖的方式,影藏掉 "本周"那个控件的左右边框,来解决这一问题。下面是实现代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#06103A" />
            <stroke
                android:width="@dimen/dp_0.5"
                android:color="#2775DE" />
            <corners android:radius="@dimen/dp_0" />
        </shape>
    </item>
    <item
        android:bottom="@dimen/dp_0.5"
        android:top="@dimen/dp_0.5">
        <shape>
            <stroke
                android:width="@dimen/dp_0.5"
                android:color="#06103A" />
        </shape>
    </item>
</layer-list>

c. month_checked样式

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

c.1 month_chart_seleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ff2775de" />
    <stroke
        android:width="@dimen/dp_0.5"
        android:color="#2775DE" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="5dp" />
</shape>

c.2 month_chart_unseleced样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#06103A" />
    <stroke
        android:width="@dimen/dp_0.5"
        android:color="#2775DE" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="5dp" />
</shape>

四、java代码

由于使用了databinding双向绑定,故就不演示findviewbyid,如果没有使用databinding,自行去实现就好,只需在onCreate()中调用就好。想了下还是加上findviewbyid方式,就怕遇到啥都不懂的新手抱怨。

方法一 //findviewbyid调用方式:
 
 findviewbyid(R.id.rg_gender).setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int id) {
                switch (id) {
                    case R.id.rb_date_day:
                        Log.d("RadioGroup", "===天===");
                        break;
                    case R.id.rb_date_week:
                        Log.d("RadioGroup", "===周===");
                        break;
                    case R.id.rb_date_month:
                        Log.d("RadioGroup", "===月===");
                        break;
                }
            }
        });



方法二
//databindig调用方式
//绑定数据
        mDataBinding.rgDate.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int id) {
                switch (id) {
                    case R.id.rb_date_day:
                        Log.d("RadioGroup", "===天===");
                        break;
                    case R.id.rb_date_week:
                        Log.d("RadioGroup", "===周===");
                        break;
                    case R.id.rb_date_month:
                        Log.d("RadioGroup", "===月===");
                        break;
                }
            }
        });

给予新手的寄语

对于新手来讲,开发总会遇到各种各样的问题,逐个解决就好,注意沟通协调。

相关推荐
闲暇部落17 分钟前
‌Kotlin中的?.和!!主要区别
android·开发语言·kotlin
诸神黄昏EX2 小时前
Android 分区相关介绍
android
大白要努力!3 小时前
android 使用SQLiteOpenHelper 如何优化数据库的性能
android·数据库·oracle
Estar.Lee3 小时前
时间操作[取当前北京时间]免费API接口教程
android·网络·后端·网络协议·tcp/ip
Winston Wood4 小时前
Perfetto学习大全
android·性能优化·perfetto
Dnelic-6 小时前
【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录
android·junit·单元测试·android studio·自学笔记
Eastsea.Chen9 小时前
MTK Android12 user版本MtkLogger
android·framework
长亭外的少年16 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
建群新人小猿19 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神20 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri