Android自定义Switch View控件CySwitch

原创 cheny  2019-01-09 23:05  阅读 252 views 次 评论 2 条
摘要:

Android自带的Switch控件其实挺好看的,但因各版本系统显示效果不太相同,而且就国内UI视觉审核环境来说,该控件很难受宠,往往需要自行定义Switch View以满足项目的需求。本文只作开源库的分享和介绍,希望能给大家带来帮助。

Android自带的Switch控件其实挺好看的,但因各版本系统显示效果不太相同,而且就国内UI视觉审美环境来说,该控件很难受宠,往往需要自行定义Switch View以满足项目的需求。由于该控件实现比较简单,本文只作开源库的分享和介绍,希望能给大家带来帮助。

CySwitch开源库地址:https://github.com/ausboyue/CySwitch

效果演示

效果演示

在项目中使用

  1. Layout XMl 布局中代码示例:
    <cn.icheny.view.CySwitch
        android:id="@+id/cy_switch"
        android:layout_width="120dp"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="25dp"
        app:borderColorChecked="@android:color/holo_green_dark"
        app:borderColorUnchecked="@android:color/holo_blue_light"
        app:borderWidth="0dp"
        app:isChecked="true"
        app:sliderHeight="40dp"
        app:sliderRadius="0dp"
        app:sliderWidth="40dp"
        app:viewRadius="0dp" />
  1. java代码示例:
        CySwitch cy_switch = findViewById(R.id.cy_switch);
        cy_switch.setViewRadius(radius);
        cy_switch.setSliderRadius(radius);
        cy_switch.setBorderWidth(width);
        cy_switch.checkable(true);
        cy_switch.setOnCheckedChangeListener(new CySwitch.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CySwitch switchView, boolean isChecked) {
                Toast.makeText(MainActivity.this, "Switch " + isChecked, Toast.LENGTH_SHORT).show();
            }
        });

属性介绍

属性 描述
isChecked 是否为Checked状态
switchable 是否可以切换
duration 动画时间间隔
viewRadius 控件圆角
borderWidth 边框宽度
borderColorChecked 边框颜色 Checked
borderColorUnchecked 边框颜色 Unchecked
bgColorChecked 背景颜色 Checked
bgColorUnchecked 背景颜色 Unchecked
sliderColorChecked 滑块颜色 Checked
sliderColorUnchecked 滑块颜色 Unchecked
sliderRadius 滑块圆角
sliderWidth 滑块宽
sliderHeight 滑块高

后期会添加切换时的颜色过渡,shadow阴影以及点击水波纹效果,敬请期待。

本文地址:https://www.icheny.cn/archives/1857
关注我们:请关注一下微信公众号:扫描二维码乘月网的公众号,公众号:it_place
版权声明:本文为原创文章,版权归 cheny 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. SSR节点
    SSR节点 【农民】 @回复

    赞一个,学习了