自定义带刻度的拖动条(SeekBar)_seekbar 刻度-程序员宅基地

技术标签: 拖动条  SeekBar  android  工具  移动开发  

相信很多朋友都用过SeekBar,但项目中可能根据不同功能有各式各样的显示。今天就自定义一个带刻度的拖动条。

类似设置中字体、显示大小拖动的形式。

话不多说上干货:

 

一、重写SeekBar 组件

package com.lenovo.fonthelp;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Build;

import android.util.AttributeSet;
import android.widget.SeekBar;

public class RulerSeekBar extends SeekBar {

    /**
     * 刻度线画笔
     */
    private Paint mRulerPaint;

    /**
     * 刻度线的个数,等分数等于刻度线的个数加1
     */
    private int mRulerCount = 2;

    /**
     * 每条刻度线的宽度
     */
    private int mRulerWidth = 2;

    /**
     * 刻度线的颜色
     */
    private int mRulerColor = Color.WHITE;

    /**
     * 滑块上面是否要显示刻度线
     */
    private boolean isShowTopOfThumb = false;

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

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

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

    /**
     * 初始化
     */
    private void init() {
        //创建绘制刻度线的画笔
        mRulerPaint = new Paint();
        mRulerPaint.setColor(mRulerColor);
        mRulerPaint.setAntiAlias(true);

        //Api21及以上调用,去掉滑块后面的背景
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setSplitTrack(false);
        }
    }

    /**
     * 重写onDraw方法绘制刻度线
     *
     * @param canvas
     */
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //极限条件校验
        if (getWidth() <= 0 || mRulerCount <= 0) {
            return;
        }

        //获取每一份的长度
        int length = (getWidth() - getPaddingLeft() - getPaddingRight() - mRulerCount * mRulerWidth) / (mRulerCount + 1);

        //计算刻度线的顶部坐标和底部坐标
        int rulerTop = getHeight() / 2 - getMinimumHeight() / 2;
        int rulerBottom = rulerTop + getMinimumHeight();

        //获取滑块的位置信息
        Rect thumbRect = null;
        if (getThumb() != null) {
            thumbRect = getThumb().getBounds();
        }

        //绘制刻度线
        for (int i = 1; i <= mRulerCount; i++) {
            //计算刻度线的左边坐标和右边坐标
            int rulerLeft = i * length + getPaddingLeft();
            int rulerRight = rulerLeft + mRulerWidth;

            //判断是否需要绘制刻度线
            if (!isShowTopOfThumb && thumbRect != null && rulerLeft - getPaddingLeft() > thumbRect.left && rulerRight - getPaddingLeft() < thumbRect.right) {
                continue;
            }

            //进行绘制
            canvas.drawRect(rulerLeft, rulerTop, rulerRight, rulerBottom, mRulerPaint);
        }
    }

    /**
     * 设置刻度线的个数
     *
     * @param mRulerCount
     */
    public void setRulerCount(int mRulerCount) {
        this.mRulerCount = mRulerCount;
        requestLayout();
    }

    /**
     * 设置刻度线的宽度,单位(px)
     *
     * @param mRulerWidth
     */
    public void setRulerWidth(int mRulerWidth) {
        this.mRulerWidth = mRulerWidth;
        requestLayout();
    }

    /**
     * 设置刻度线的颜色
     *
     * @param mRulerColor
     */
    public void setRulerColor(int mRulerColor) {
        this.mRulerColor = mRulerColor;
        if (mRulerPaint != null) {
            mRulerPaint.setColor(mRulerColor);
            requestLayout();
        }
    }

    /**
     * 滑块上面是否需要显示刻度线
     *
     * @param isShowTopOfThumb
     */
    public void setShowTopOfThumb(boolean isShowTopOfThumb) {
        this.isShowTopOfThumb = isShowTopOfThumb;
        requestLayout();
    }
}

二、在布局中直接使用

    <com.lenovo.fonthelp.RulerSeekBar
        android:id="@+id/dpi_seek_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:background="@null"
        android:max="4"
        android:maxHeight="16dp"
        android:minHeight="16dp"
        android:progress="0"
        android:progressDrawable="@drawable/shape_progress_drawable"
        android:thumb="@drawable/shape_thumb_icon"
        android:thumbOffset="0dp" />

三、在需要调用的地方使用

    private RulerSeekBar mFontSeekBar;

    ...
    
    mFontSeekBar = findViewById(R.id.font_seek_bar);

    mFontSeekBar.setRulerCount(2);
    mFontSeekBar.setRulerColor(Color.YELLOW);
    mFontSeekBar.setRulerWidth(5);
    mFontSeekBar.setShowTopOfThumb(false);
    mFontSeekBar.setProgress(1);
    
    mFontSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Log.d(TAG, "onProgressChanged: index = " + progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });



四、附上布局shape 文件

在drawable 文件夹下创建如下文件:

shape_progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#e1e8f0" />
            <size android:height="8dp" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:centerColor="#fc9f3b"
                    android:endColor="#fa8569"
                    android:startColor="#feb987" />
                <size android:height="8dp" />
                <corners android:radius="8dp" />
            </shape>
        </clip>
    </item>
</layer-list>


shape_thumb_icon.xml

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

    <size
        android:width="30dp"
        android:height="30dp" />

    <solid android:color="@android:color/holo_blue_light" />
</shape>

转载请标明出处:

  https://blog.csdn.net/hj_key/article/details/106835434

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hj_key/article/details/106835434

智能推荐

程序员面试题整理分享合集_程序员面试分享-程序员宅基地

文章浏览阅读190次。又到了程序员跳槽的黄金时期,大家是否都在网上搜寻各类面试题,希望扩充自己的技术知识面,为自己接下来的面试提高信心。大家可以关注我的个人公众号,回复“面试”即可获取我个人整理的大量面试资料,包含Android、C、java等等国内各个大厂的面试和笔试题,希望可以对大家有所帮助,预祝大家可以找一个心仪的工作。..._程序员面试分享

《构建高可用Linux服务器》互动网首发-程序员宅基地

文章浏览阅读136次。书名:构建高可用Linux服务器ISBN:9787111359423 作者:余洪春定价:79.00元出版时间:2011年10月出版社:机械工业出版社 订书页面编辑推荐:基于实际生产环境,从Linux虚拟化、集群、服务器故障诊断与排除、系统安全性等多角度阐述构建高可用Linux服务器的最佳实践资深Linux/Unix系统管理专家兼架构师多年一线工作经验结晶,5..._赵克衡

MTK Android Driver :audio para_sph_coeff_default.h-程序员宅基地

文章浏览阅读1k次。http://blog.csdn.net/cbk861110/article/details/1743945331.音频参数集成(具体参数由硬件提供)30.1 ring/key/mic/fmr/speech/sidetone/media/matv增益:\mediatek\custom\k9\cgen\inc\audio_volume_custom_default.h_sph_coeff_default.h

NeoKylin7用户和组管理-程序员宅基地

文章浏览阅读267次。用户和组管理a) 用户分类i. 超级用户: root 拥有系统最高的管理权限uid=0(root) gid=0(root) 组=0(root)ii. 普通用户系统用户: 系统自带的拥有特定功能的用户(编号: 1-999)本地用户: 使用者新建的用户(编号: 1000+)iii. 虚拟用户: 这些用户通常不用于登录系统,只是用于维持某些服务的正常运行;b) 创建用户命令useradd [选项] 用户名 或者 adduser-c comment 指定一段注释性描述-d 目录 指定用户家目.

MySQL数据库实验六 简单数据库应用系统设计与实现-程序员宅基地

文章浏览阅读2.8k次,点赞5次,收藏63次。MySQL数据库实验六 简单数据库应用系统设计与实现。MYSQL实验专栏完结篇...

sock5系列之centos6.5 搭建!(一)-程序员宅基地

文章浏览阅读7.1k次。从本节开始楼主通过从搭建到测试联通性、可用性,线程调用分别发表文章,大神请指点,欢迎讨论。一、首先你得有个虚拟机或者linux系统的机器。(centos)然后执行以下脚本yum install pam-devel openldap-devel openssl-develyum install gcc gcc-c++wget http://downloads.sourceforg

随便推点

GridViewColumn中设置自动填充的列宽-程序员宅基地

文章浏览阅读7.6k次。GridViewColumn本身不能使用*作为宽度的值,但是对于Grid可以,于是我们虚构一个Grid,让他不可见,并绑定Grid与ListView的宽度,使ListView实现因为第一列长度变化而自动填充。下面为代码

HTML字体行间距太大解决办法!_webview加载html代码 p标签行间距过大-程序员宅基地

文章浏览阅读1.1w次。&lt;div class="line-height:行间距px;"&gt; &lt;div&gt; &lt;a&gt;要调整的字体&lt;/a&gt; &lt;/div&gt;&lt;/div&gt;line-height 的值(行间距)可以自己调整到合适。..._webview加载html代码 p标签行间距过大

学习笔记(1):Java爬虫从入门到精通-Xpath工具的使用-程序员宅基地

文章浏览阅读216次。本课程是java大数据系列课程的数据采集部分,通过java爬虫技术从互联网进行在线数据采集,存储。对于本课程学习要求具有一定的java编程基础。通过本课的学习,能够掌握爬虫技术原理,数据采集的原则,数据采集的方式,Jsoup页面分析技术,Httpclient工具的使用等爬虫项目实战。..._java爬虫怎么利用xpath爬虫

python求解二元函数的值_python 求二元函数极值-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏10次。python求解二元函数表达式的值小白上路,将每次学习到的一点点积累在这,便于以后查阅。通过定义函数实现// An highlighted blockvar foo = 'bar';生成一个适合你的列表项目项目项目项目1项目2项目3 计划任务 完成任务创建一个表格一个简单的表格是这么创建的:项目Value电脑$1600手机$12导管$1设定内容居中、居左、居右使用:---------:居中使用:-----_python 求二元函数极值

Python读取文件时出现UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position xx: 解决方案_unicodedecodeerror: 'utf-8' codec can't decode byt-程序员宅基地

文章浏览阅读10w+次,点赞93次,收藏97次。Python在读取文件时with open('article.txt') as f: # 打开新的文本 text_new = f.read() # 读取文本数据出现错误:UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 145: illegal multibyte sequence此..._unicodedecodeerror: 'utf-8' codec can't decode byte 0x80 in position 64: inv

linux设备模型:sysfs(kobject)解析_sysfs_remove_group-程序员宅基地

文章浏览阅读1.1k次。sysfs 是一个最初基于 ramfs 且位于内存的文件系统。它提供导出内核数据结构及其属性,以及它们之间的关联到用户空间的方法。任何 kobject 在系统中注册,就会有一个目录在 sysfs 中被创建。这个目录是作为该 kobject 的父对象所在目录的子目录创建的,以准确地传递内核的对象层次到用户空间。sysfs中的顶层目录代表着内核对象层次的共同祖先;例如:某些对象属于某个子系统。 在与其目录关联的 kernfs_node 对象中内部保存一个指向实现目录的_sysfs_remove_group

推荐文章

热门文章

相关标签