首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在android中创建自定义开关,并在开关的曲目和拇指两侧显示文本?

在Android中创建自定义开关,并在开关的曲目和拇指两侧显示文本,可以通过自定义View和使用一些绘图技巧来实现。以下是一个简单的实现步骤:

  1. 创建一个自定义View,继承自Switch或CompoundButton。
  2. 在自定义View的构造函数中初始化一些属性,例如曲目和拇指的颜色、文本等。
  3. 重写onMeasure方法,设置View的宽度和高度。
  4. 重写onDraw方法,在方法内使用Canvas和Paint进行绘制。
    • 绘制曲目:使用Paint绘制一个长方形,并填充曲目的颜色。
    • 绘制拇指:使用Paint绘制一个圆形,并填充拇指的颜色。
    • 绘制文本:使用Paint绘制开关的文本,可以通过setText方法设置。
  • 重写onTouchEvent方法,处理触摸事件:
    • 判断触摸位置是否在拇指的范围内。
    • 根据触摸事件的类型,更新开关的状态,并重绘View。
  • 在Activity中使用自定义的开关View。

下面是一个简单的示例代码:

代码语言:txt
复制
public class CustomSwitch extends Switch {

    private Paint trackPaint;  // 曲目的画笔
    private Paint thumbPaint;  // 拇指的画笔
    private Paint textPaint;   // 文本的画笔

    private String textOn;     // 开关打开时的文本
    private String textOff;    // 开关关闭时的文本

    public CustomSwitch(Context context) {
        super(context);
        init();
    }

    public CustomSwitch(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomSwitch(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 初始化画笔
        trackPaint = new Paint();
        trackPaint.setColor(Color.GRAY);

        thumbPaint = new Paint();
        thumbPaint.setColor(Color.WHITE);

        textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        textPaint.setTextSize(40);

        // 初始化文本
        textOn = "ON";
        textOff = "OFF";
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 设置View的宽度和高度
        int desiredWidth = 200;
        int desiredHeight = 100;

        int width = resolveSize(desiredWidth, widthMeasureSpec);
        int height = resolveSize(desiredHeight, heightMeasureSpec);

        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制曲目
        RectF trackRect = new RectF(0, getHeight() / 4, getWidth(), getHeight() * 3 / 4);
        canvas.drawRect(trackRect, trackPaint);

        // 绘制拇指
        float thumbRadius = getHeight() / 4;
        float thumbX = isChecked() ? getWidth() - thumbRadius : thumbRadius;
        canvas.drawCircle(thumbX, getHeight() / 2, thumbRadius, thumbPaint);

        // 绘制文本
        String text = isChecked() ? textOn : textOff;
        Rect textBounds = new Rect();
        textPaint.getTextBounds(text, 0, text.length(), textBounds);
        float textX = isChecked() ? getWidth() - thumbRadius * 2 - textBounds.width() : thumbRadius * 2;
        float textY = getHeight() / 2 + textBounds.height() / 2;
        canvas.drawText(text, textX, textY, textPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (event.getX() < getWidth() / 2 && !isChecked()) {
                    setChecked(true);
                    invalidate();
                    return true;
                }
                if (event.getX() > getWidth() / 2 && isChecked()) {
                    setChecked(false);
                    invalidate();
                    return true;
                }
                break;
        }
        return super.onTouchEvent(event);
    }
}

使用CustomSwitch:

代码语言:txt
复制
public class MainActivity extends AppCompatActivity {

    private CustomSwitch customSwitch;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        customSwitch = findViewById(R.id.custom_switch);
        customSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                // 处理开关状态变化事件
            }
        });
    }
}

这是一个简单的自定义开关View的实现示例,你可以根据自己的需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Flutter】自定义滚动开关

**我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序,该程序具有吸引人动画一些属性。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示自定义滚动开关何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关时将更改图标和文本。...*我们将添加textOn是字符串' Yes '表示当开关打开时,文本显示在按钮上;当textOff是字符串' No '意味着当开关关闭时,文本显示在按钮上。

33.4K60

Android widget之CompoundButton

Switch 开关:是一个双状态切换开关小部件,可以在两个选项之间进行选择。用户可以来回拖动“拇指”来选择所选择选项,或者只需轻按以切换,就像复选框一样。...该text 属性控制交换机标签显示文本,而 文本offon文本控制拇指文本。...xml属性 公共方法 作用效果 android:showText setShowText(boolean) 是否显示 打开/关闭 文本 android:textOff setTextOff(CharSequence...) 当开关处于 关闭 状态时使用文本 android:textOn setTextOn(CharSequence) 当开关在 开打 状态时使用文本 android:track setTrackResource...(int) 开关拇指滑动“轨迹” ToggleButton 显示 打开/关闭 状态按钮,默认情况下伴随文本“ON”或“OFF”。

2.3K20
  • 从0开始编写一个开关组件

    一如果CSS文件不加载,按照我“从0开始编写自定义单选按钮复选框”一文方法,你也可以得到一个可以运行持续增强复选框。...例子 这个codepen会在你浏览器显示一个默认复选框,同时也会显示样式化复选框。这个简单示例没有显示你应该支持所有可能状态特性。...我隐藏了复选框,但并没有从DOM或可访问树删除它。我使用::before来生成胶囊形状,使用::after来生成拇指指甲形状。所有大小调整都是以em为单位,因此这些大小会根据周围文本进行缩放。...最主要是调整标签文本,以便在右边留出空间,然后将你::before::after放在右边,适当地设置拇指指甲形状间距。 ? 减少运动 开关动画对某些用户造成问题可能性很低。...你可以看到针对禁用状态不确定状态其他一些调整,以及我在获得焦点/悬停上使用SVG。 ? ? 将Wifi复选框选中并在暗黑模式下运行时,在Firefox67(开发者版本)中所看到开关

    2.4K20

    安卓常用控件

    TextView TextView 是一个用于显示文本控件。它可以用来显示短句、段落或者标题。 属性 android:text: 设置显示文本。...Switch Switch 是一个切换开关控件,用于在开关之间切换状态。 属性 android:textOn: 设置开状态时文本android:textOff: 设置关状态时文本。...自定义控件可以继承已有的控件类( View 或 ViewGroup),然后重写绘制方法事件处理方法。...创建自定义控件基本步骤 继承已有控件: 创建一个类,继承自 View 或 ViewGroup。 重写绘制方法: 在 onDraw 方法定义控件绘制逻辑。...处理事件: 在 onTouchEvent 方法处理用户交互事件。 添加自定义属性: 在 res/values 文件夹定义自定义属性,并在控件解析这些属性。

    12310

    android.support.v7.widget.SwitchCompat

    很久没更新了,学了一大堆新东西,可是都没写完笔记,今天写一个小小控件自定义笔记 SwitchCompat是符合谷歌Material designSelection control组件,与传统Switch...以及ToggleButton不同,v7包这个组件兼容了绝大多数低版本手机,令组件兼容性得到了极大提升。...,看其它大神翻译 属性 作用 showText:true/false 决定是否显示开关按钮上文字 splitTrack: true/false 开关样式 switchMinWidth 开关最小宽度...switchPadding 文字开关最小距离 switchTextAppearance 开关文字样式 thumbTextPadding 文字距两侧距离 thumbTint 开关上按钮颜色 thumbTintMode...按钮样式 track 轨道,类似音乐进度条可滑动 trackTint 轨道颜色 trackTintMode 轨道样式 textOff 设置按钮关闭状态显示文字 textOn 设置按钮打开状态显示文字

    1.8K30

    ToggleButtonSwitch使用大全

    上期学习了CheckBoxRadioButton,那么本期来学习Button另外两个子控件ToggleButtonSwitch,在开发同样比较重要。...一、ToggleButton ToggleButton(开关按钮)是Android系统中比较简单一个组件,是一个具有选中和未选中双状态按钮,并且需要为不同状态设置不同显示文本。...XML属性 相关方法 说明 android:checked setChecked(boolean) 设置该按钮是否被选中 android:textOff 设置当该按钮状态关闭时显示文本 android...setSwitchTextAppearance(Context, int) 设置该开关图标上文本样式 android:textOff setTextOff(CharSequence) 设置该开关状态关闭时显示文本...android:thumb setThumbResource(int) 指定使用自定义Drawable绘制该开关开关按钮 android:track setTrackResource(int) 指定使用自定义

    2.6K50

    最新iOS设计规范五|3大界面要素:控件(Controls)

    当滑块值发生变化时,最小值拇指之间轨道部分会填充颜色。滑块左右位置好可以展示图标,来说明最小值最大值含义。 ? 如有必要,可以自定义滑块外观。...根据设计风格,自定义开关在其关闭打开时背景颜色,可以使开关在APP体验更好。 仅在列表中使用开关开关用在列表,例如可以打开关闭设置列表。...额外提供文本标签描述开关状态是多余,还会使界面混乱不堪。 可以用开关来管理相关界面元素可用性。开关通常会影响屏幕上其他内容。例如,在“设置”打开“飞行模式”开关会禁用其他功能/设置。...若有“清除”按钮,点击它便会立即清空文本字段内容,避免一直点击删除。 适当时候,使用安全文本字段。若需要输入是敏感数据(密码)时,请始终使用安全提示类文本字段。...使用图像按钮在文本字段中提供清晰度功能。可以在文本输入框左侧或右侧显示自定义图标,也可以添加系统提供按钮,例如“书签”按钮。 键盘 根据实际情况,显示适当键盘类型。

    8.5K30

    SwitchButton 开关按钮 多种实现方式

    刚开始接触开关样式按钮是在IOS系统上面,它切换以及滑动十分帅气,深入人心。 所谓开关按钮,就是只有2个状态:onoff,下图就是系统IOS 7上开关按钮效果。...后来,查看开发文档发现,android也有了自己原生态开关控件,并且在4.0版本又优化加入了新类似控件--Switch控件,以及使用起来十分简单ToggleButton,可是它们只是带有切换效果...="" /> 这里     android:textOn=""   表示:选中情况下显示文本 android:textOff=""   表示:未选中情况下显示文本 android:checked...由于DEMO继承CompoundButtonSwitchButton是使用自定义配置,所以如果不了解自定义配置可以看以下文章:android 自定义控件 使用declare-styleable...由于目前对于重写VIEWonDraw方法了解不是很深入,所以这里DEMO几个方法都是查看网络之后加上自己优化注释演变过来,等这一块深入了后在重写写一篇关于这个感受使用说明。

    3.1K70

    android开关按钮

    刚开始接触开关样式按钮是在IOS系统上面,它切换以及滑动十分帅气,深入人心。 所谓开关按钮,就是只有2个状态:onoff,下图就是系统IOS 7上开关按钮效果。...后来,查看开发文档发现,android也有了自己原生态开关控件,并且在4.0版本又优化加入了新类似控件--Switch控件,以及使用起来十分简单ToggleButton,可是它们只是带有切换效果...="" /> 这里     android:textOn=""   表示:选中情况下显示文本 android:textOff=""   表示:未选中情况下显示文本 android:checked...由于DEMO继承CompoundButtonSwitchButton是使用自定义配置,所以如果不了解自定义配置可以看以下文章:android 自定义控件 使用declare-styleable...由于目前对于重写VIEWonDraw方法了解不是很深入,所以这里DEMO几个方法都是查看网络之后加上自己优化注释演变过来,等这一块深入了后在重写写一篇关于这个感受使用说明。

    4K80

    Chrome插件-CSDN助手

    在当前页面跳转选中结果 shift + b 搜索书签,并在新页面打开选中结果 shift + t 搜索并切换标签页 该插件还支持右键菜单,如下图,我们选中一段文本,然后右击,从列表可以选择 CSDN...搜索,然后就可以查询 CSDN 与选中文本相关全部帖子。...上图中预设了几款常用插件,支持自定义开关,支持自定义触发词。...1.2.6.4 自定义插件 ? 支持从本地配置插件,也支持从网络下载插件;可以配置开关、触发词等内容。 1.2.6.5 Json 配置 ? 支持自动格式化开关,支持配置 json 显示主题。...导航条目可以支持自定义图标 logo 部分功能使用方法介绍不清晰, 预设插件 自定义插件 ,这两项使用方式好像没有相关文档介绍。 操作设置入口可以放置在页面右上角,并且固定其位置。

    1.3K20

    Android 自定义Switch开关按钮样式实例详解

    封面 GitHub传送门 1.写在前面 本文主要讲的是在Android原生Switch控件基础上进行样式自定义,内容很简单,但是在实现过程还是遇到了一些问题,在此记录下来,希望对大家能够有所帮助,..." android:state_checked="false" / </selector Switch自定义样式,默认情况下开关按钮滑动轨道高度是一样,并且在xml文件对轨道宽高设置是无效...,如果想要修改轨道高度可以这样做: 轨道高度低于开关按钮高度(效果第一个效果):轨道增加一个透明边框 轨道高度高于开关按钮高度(效果第二个效果):开关按钮增加一个透明边框 轨道宽度会随着开关按钮宽度自动变化...,textOntextOff属性可以分别设置开启关闭文字,别忘了将showText属性设置为true,这样才能显示出来: <Switch android:layout_width="wrap_content...GitHub传送门 总结 以上所述是小编给大家介绍Android 自定义Switch开关按钮样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家

    4.9K30

    Android开发笔记(三十七)按钮类控件

    两者之间区别在于: 1、Button即可显示文本也可显示图形(通过设置背景图),而ImageButton只能显示图形不能显示文本; 2、Button可在文本周围区域显示小图,而ImageButton...无法在某个区域显示小图; 3、ImageButton上图像可按比例进行拉伸,而Button上大图会拉伸变形(因为背景图无法按比例拉伸); 从上面可以看出,Button适应面更广,所以实际开发基本使用...如果不指定就使用系统默认图标;如果要自定义图标就要设置该属性,当然也可以将该属性设置为@null,然后到drawableLeft设置新图标。...textOff : 指定左侧关闭时候文本。 switchPadding : 指定左右两个开关按钮之间距离。 thumbTextPadding : 指定文本左右两边距离。...thumb : 指定开关轨道背景。 track : 指定开关标识图标。 代码中新加方法: setTextOn : 设置右侧开启时候文本

    1.5K30

    自定义View之Switch

    今天我们来聊一下自定义Switch控件,我们先看一看Switch相关属性: 1.Switch相关属性 android:splitTrack:是否设置间隙让滑块与底部图片分隔开来 android:switchMinWidth...:设置开关最小宽度 android:switchPadding:设置滑块内文字间隔 android:switchTextAppearance:设置开关文字外观 android:textOff:按钮没有被选中时显示文字...android:textOn:按钮被选中时显示文字 android:showText:设置on/off时候是否显示文字,如果不显示则textOn,textOff不起作用 android:textStyle...image.png 3.Switch自定义 自定义Switch步骤如下: 定义Switch开关按钮状态 定义一下Switch滑动轨道自定义文字颜色 应用效果展示 3.1定义Switch开关按钮状态...image.png 在style文件定义一个样式叫 SwitchTextColorTheme样式 ?

    2.1K30

    iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

    API提示: 想要了解更多如何在代码定义滑块,可以参考 Sliders 滑块: 由一条水平轨迹一个Thumb(滑块中支持用户水平拖拽圆形控件)组成 左边右边支持使用自定义图片来表述相对最小值与最大值含义...API提示: 想要了解更多如何在代码定义步开关,可以参考UISwitch....4.3.18文本开关按钮展示了两个互斥选项或状态。 ? API提示: 想要了解如何在代码定义文本框,以及在文本框中支持图片按钮,可以参考UITextField....你可以自定义一个文本框,帮助用户更好地理解如何使用它。举个例子,你可以在文本左侧或者右侧加入自定义图形,或者加入系统按钮,书签按钮等。...如果句子太长,用户会需要滚动才能看完,这样体验很糟。使用句子式大写,并在句末加上适当标点符号。 ? 避免在文本详细描述“该按哪个按钮”而导致文本过长。

    13.2K30

    Android 应用开发】Android 无障碍开发简介 ( Android 无障碍开发辅助技术 | 启用 TalkBack 无障碍功能 | TalkBack 无障碍开发 示例 )

    , : TalkBack : 该技术 帮助 盲人 视力障碍者 更容易地使用 Android 设备 ; 语音提示 : 在屏幕上 点击或滑动时 , 自动读取屏幕元素和文本内容 ; 手势控制...: 支持特殊手势 , 滑动 , 双击 , 长按等 ; 自定义配置 : 配置自定义选项 , 音量 , 速度 , 灵敏度等 ; Switch Access : 该技术 帮助 行动不便 用户更容易地使用...Android 设备 ; 外部开关 : 使用外部 IO 设备 , : 鼠标 , 键盘 等外设操作屏幕 ; 映射扫描 : 外部开关映射到屏幕不同区域 ; 自定义设置 : 设置自定义配置 ,... 扫描速度 , 反应时间等 ; Voice Access : 该技术 帮助 不方便使用触摸屏幕 用户 , 更加轻松使用 Android 设备 ; 语音命令 : 用户使用语音控制设备 ,... : 打开应用 , 滑动屏幕 等 ; 自定义命令 : 自定义常用命令 , : 快捷方式 ; 文本转语音 : 将屏幕文本转为语音提示 ; 无障碍模式下 , 使用键盘 , 鼠标 等外设控制焦点 ,

    1.9K20

    Sticky Posts Switch插件教程WordPress为分类添加置顶文章

    当您将新内容发布到您网站时,之前帖子会关闭并最终移动到存档页面。粘性帖子允许您在WordPress添加精选帖子,并在网站主页上以不同方式显示它们。...在本文中,我们晓得博客将向您展示如何在WordPress为类别添加置顶文章。 注意:Sticky Post仅适用于内置帖子类型帖子,不适用于自定义帖子类型。  ...(帖子或自定义帖子类型)选择开关图标的颜色显示开关图标的列自定义顺序仅使用内置WordPress功能星形图标开关立即使用 ajax 将帖子保存为置顶状态可选地,将帖子所有翻译设置为置顶,支持 Polylang... MultilingualPress如何在WordPress为类别添加置顶文章?  ...Sticky Posts Switch插件教程WordPress为分类添加置顶文章  此外还可以选择在主页、帖子存档页面或分类页面(类别标签)上显示粘性帖子位置。

    5.5K20

    一个小灯泡引发大论战:千万粉丝科普up主翻车,伊朗“唐马儒”、李永乐等下场,30万公里导线引百万网友围观

    事情还要从一道“简单”物理题说起: 假设存在一个巨型电路,其中一个电源、一个开关、一个理想灯泡(一有电流就能亮那种),通过2根30万公里长导线连接,灯泡开关之间仅相隔1m距离,就像这样: △图源...电流周围则会产生磁场,其方向通过右手定则得出:大拇指指向电流方向,剩余四指方向就是磁场方向。 而电磁波,也就是同相振荡且互相垂直电场与磁场。...电磁场传播方向是这样定义: 也就是说,根据右手螺旋定则,右手四指指向电场方向,然后往磁场方向握拳,大拇指方向就是电磁场能量传播方向。 这也就是所谓坡印廷矢量方向。...也就是说,绝大部分能量仍然是沿着导线跑完了约500m距离,然后才点亮了灯泡。 不过,也可以明显地看到,在开关闭合之后,灯泡两侧确实立即产生了感应电动势。...在剪断导线之后,他再次按下了开关,示波器捕捉到信号白线所示: 在最初1.6微秒里,示波器图像与电线连通时并没有什么不同;但在1.6微秒之后,电子们终于发现“此路不通”。

    35510

    PhotoBulk for Mac(图像编辑器)

    photobulk mac中文版是简单实用图片批量加水印软件,可以在Mac上批量重命名图像,优化照片,压缩图像文件,添加水印,通过两侧写着 text image 开关就能调节,对于文字字体、大小...简单好用,极大简化了图像编辑。PhotoBulk for Mac(图像编辑器)1、预览编辑水印添加水印预览图像,水印可以是文本、图像、脚本或日期标记,可以自由调整大小位置。...2、批量调整图像大小可以按比例更改所有图像宽度高度,按照最大尺寸更改或直接输入你自定义尺寸。 PhotoBulk会根据你为图像选择新维度来保持宽高比。...5、在转换图像中保存元数据使用PhotoBulk,可以选择将元数据保存在编辑图像。...你可以将任意数量数字添加到照片名称,并在需要时保留原件。7、设置管理器使用PhotoBulk可以创建和批量预设图像编辑设置。保存你最喜欢最常用设置,以便在Mac上更快批量编辑照片。

    55830

    Android 8.0 功能 API(翻译自Google官网)

    这些变更包括: 通知渠道:Android 8.0 引入了通知渠道,其允许您为要显示每种通知类型创建用户可自定义渠道。用户界面将通知渠道称之为通知类别。...如需了解有关如何在 Android 8.0 自动调整 TextView 大小详细信息,请参阅自动调整 TextView 大小。 自适应图标 Android 8.0 引入自适应启动器图标。...您可以自行设置这些值垂直与水平布局属性 来创建取决于文本方向布局行为。 指针捕获 某些应用(例如游戏、远程桌面虚拟化客户端)将大大受益于鼠标指针控制。...Android 8.0 通过改进存储访问框架解决了各个挑战。 自定义文档提供程序 从 Android 8.0 开始,存储访问框架允许自定义文档提供程序为驻留在远程数据源文件创建可寻址文件描述符。...提示文本 Android 8.0 包含可用于与文本可编辑对象提示文本进行交互多个函数: isShowingHintText() setShowingHintText() 函数分别显示设置节点的当前文本内容是否表示节点提示文本

    2.9K30

    Android使用DrawerLayout实现双向侧滑菜单

    前言   在android开发,很多app都有使用侧滑菜单,有的是自定义控件来实现侧滑菜单,但是android给我们提供了DrawerLayout类来实现侧滑菜单,侧滑效果很好,今天我就说说怎么去使用它来实现侧滑菜单...第一个子控件是主布局,就是显示在界面中央位置,然后第二个第三个控件作为左菜单右菜单在两侧隐藏,然后滑动时候慢慢显示出来。...在第二第三个控件属性设置里,需要注意android:layout_gravity属性,这个属性决定了菜单位置是左还是右。...当设置成“start”时候,菜单位于左侧,当设置成“end”时候,菜单位于右侧,所以菜单位置控件顺序没有关系,只属性值有关。   ...用这三个方法基本就可以实现上面的效果了,好了,简单双向侧滑菜单就完成了,不需要使用自定义控件,自定义控件可能有更加丰富动画效果,这就需要大家自己去是实现了。 源码下载点这里。

    1.1K10
    领券