一、效果图

二、实现思路

1.控件继承自View
2.重写两个方法onDraw() 绘制页面和 onTouch() 添加监听
3.onDraw(Canvas ca)中
    a.new Canvas(new Bitmap:backgroundImage) :backgroundCanvas 并设置控件背景
    b.new paint 设置渐变(LinearGradient),向backgroundCanvas 中绘制滑动条(drawLine),绘制滑动条左边的圆角和右边的圆角(drawCircle),绘制滑动条上大圆环的渐变颜色的外环(drawCircle),给paint取消渐变setShader(null),绘制白色的内环(drawCircle)和滑动条上的小白点(drawLine)
    c. 使用paint向backgroundCanvas 中 绘制“低”“风险指数”“高”的文案(drawText)
    d.new Canvas(new Bitmap:fullImage) :canvas.drawBitmap(backgroundImage)
    e.绘制推荐文字(drawText),和倒立水滴图片(drawBitmap)
    f.根据我的id,填充不同的颜色和水滴图片(drawBitmap),绘制我的(drawText)
    g.绘制滑动条上的圆形滑块图片(drawBitmap),和风险指数图标,文案(drawText),绘制滑块第一层外光圈,和第二次外光圈 ,的半径(drawCircle)和透明度(paint.setAlpha),随着动画执行进度变化而变化
    h. ca.drawBitmap(fullImage)
小结:先创建一个图片backgroundImage,然后将其包装成backgroundCanvas,在backgroundCanvas上绘制背景图像,然后new 一个图片fullImage,包装成 canvas ,再将背景图片backgroundImage绘制到canvas上,再在canvas上绘制滑块文案动画等,最后将fullImage 绘制到onDraw提供的父canvas ca上
 
4.onTouch()
    a.MotionEvent.ACTION_DOWN和MotionEvent.ACTION_MOVE
      计算出drawX的位置(控件left边< drawX< 控件的Right 边),drawX用于绘制滑块和风险指数。同时调用calculateGroupSelected(event);计算当前滑动位置X最近的9个点是哪个点,用于实现松手后滑块自动移动到最近的小圆圈上
    b. MotionEvent.ACTION_UP
      计算出drawX的位置(控件left边< drawX< 控件的Right 边),drawX用于绘制滑块和风险指数。同时调用calculateGroupSelected(event);计算当前滑动位置X最近的9个点是哪个点(groupSelected),用于实现松手后滑块自动移动到最近的小圆圈上
    通过ValueAnimator(drawX,groupSelected)实现松手后滑块自动移动到最近的小圆圈上的动画
    当上边动画结束后启动绘制滑块第一层外光圈,和第二次外光圈 的 波纹动画
 
5.calculateGroupSelected算法如图
 

自定义控件-滑动条SeekBar的更多相关文章

  1. Android开发手记(11) 滑动条SeekBar

    安卓滑动条的操作特别简单,通过getProgress()可以获得SeekBar的位置,通过setProgress(int progress)可以设置SeekBar的位置.要想动态获取用户对SeekBa ...

  2. Android自定义Seekbar滑动条,Pop提示跟随滑动按钮一起滑动

    由于项目需要做出此效果,自定义写了一个. 效果图 思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attr ...

  3. 【Android】5.8 滑动条(SeekBar)

    分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 滑动条也叫拖动条(用户可拖动改变滑动条的值),比如可让用户调节音量大小.调节屏幕亮度.调节歌曲或视频当前播放的位置 ...

  4. Android模仿三星手机系统滑动条滑动时滑块变大的特效

    使用三星手机的过程中发现三星手机系统自带的滑动条有一个特效.比方调节亮度的滑动条.在滑动滑块的过程中,滑块会变大.功能非常小可是体验却非常好,于是决定做一个这种效果出来.好了废话不多说了,以下開始实现 ...

  5. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  6. Android 拖动条/滑动条控件、星级评分控件

    ProgressBar有2个子控件: SeekBar   拖动条控件 RatingBar   星级评分控件 1.拖动条控件 <SeekBar android:layout_width=" ...

  7. 【JavaScript吉光片羽】--- 滑动条

    灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条d ...

  8. MFC 滑动条的重绘

    MFC自带的滑动条的样子是这样的. 比较难看,所以需要重绘下,重绘后的样子是这样的. 代码如下: CustomSliderCtr.h #pragma once // CCustomSliderCtr ...

  9. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

随机推荐

  1. 2 安装企业wiki:confluence

    jira sudo /etc/init.d/jira start 启动 jiarsudo /etc/init.d/jira stop 停止 jiar 方法一:$ sudo /etc/init.d/co ...

  2. python 数据分析----numpy

    NumPy是高性能科学计算和数据分析的基础包.它是pandas等其他各种工具的基础. NumPy的主要功能: ndarray,一个多维数组结构,高效且节省空间 无需循环对整组数据进行快速运算的数学函数 ...

  3. ionic android - Unable to start the daemon process. Could not reserve enough space for 2097152KB object heap

    Unzipping C:\Users\app\.gradle\wrapper\dists\gradle-4.1-all\bzyivzo6n839fup2jbap0tjew\gradle-4.1-all ...

  4. 20145302张薇《Java程序设计》第三周学习总结

    20145302张薇<Java程序设计>第三周学习总结 教材学习内容总结 第四章 定义类 一个原始码中有多少类就会有多少.class文档. 标准类 使用java.util.scanner让 ...

  5. 20145322第四周JAVA程序设计基础学习总结

    20145322 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 一.继承共同行为 何谓继承 1 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再 ...

  6. 20145230熊佳炜《逆向及BOF基础实践》

    20145230熊佳炜<逆向及BOF基础实践> 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序同时包含另一个代码片段,getShell,会返回一个可用Shell. ...

  7. libevent库介绍--事件和数据缓冲

    首先在学习libevent库的使用前,我们还要从基本的了解开始,已经熟悉了epoll以及reactor,然后从event_base学习,依次学习事件event.数据缓冲Bufferevent和数据封装 ...

  8. JAVA链接数据库

    链接:http://www.cnblogs.com/centor/p/6142775.html 开发工具: MyEclipse MySQL JDBC驱动:mysql-connector-java-5. ...

  9. [BZOJ1058]报表统计

    Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...

  10. 提高ubuntu系统性能的小技巧

    在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用swap分区!系统的swappiness设定值,对如何使用swap分区是有着很大的联系,并不是当swappiness=0的时候就不使用 ...