一、效果图

二、实现思路

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. C++通过HTTP请求Get或Post方式请求Json数据(转)

    原文网址:https://www.cnblogs.com/shike8080/articles/6549339.html #pragma once#include <iostream>#i ...

  2. Swoole学习(一)了解一下Swoole的强大并在Centos安装Swoole及PHP扩展开启

    Swoole是面向生产环境的 PHP 异步网络通信引擎,官网:https://www.swoole.com/ 使 PHP 开发人员可以编写高性能的异步并发 TCP.UDP.Unix Socket.HT ...

  3. CF1155D Beautiful Array(动态规划)

    做法 \(f_{i,0}\)表示以\(i\)结尾未操作时的最大值 \(f_{i,1}\)表示以\(i\)结尾正在操作时的最大值 \(f_{i,2}\)表示以\(i\)结尾已结束操作时的最大值 Code ...

  4. java quartz

     什么是Quartz Quartz是一个完全由Java编写的开源作业调度框架,为在Java应用程序中进行作业调度提供了简单却强大的机制.Quartz允许开发人员根据时间间隔来调度作业.它实现了作业和触 ...

  5. 虚拟机 Ubuntu18.04 tensorflow cpu 版本

    虚拟机 Ubuntu18.04 tensorflow cpu 版本 虚拟机VMware 配置: 20G容量,可扩充 2G内存,可扩充 网络采用NAT模式 平台:win10下的Ubuntu18.04 出 ...

  6. Java实习一

    简单的二元一次方程求解 import java.lang.Math; import java.util.Scanner; public class Solve{ public static void ...

  7. Memcached append 命令

    Memcached append 命令用于向已存在 key(键) 的 value(数据值) 后面追加数据 . 语法: append 命令的基本语法格式如下: append key flags expt ...

  8. python爬虫之下载京东页面图片

    import requests from bs4 import BeautifulSoup import time import re t = 0 #用于给图片命名 for i in range(10 ...

  9. Kafka分布式:ZooKeeper扩展

    [ZooKeeper] 服务注册.服务发现.客户端负载均衡.Offset偏移量分布式存储. kafka使用zookeeper来实现动态的集群扩展,不需要更改客户端(producer和consumer) ...

  10. 分享海量 iOS 及 Mac 开源项目和学习资料

    UI 下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件. SVPullToRefresh - 下拉刷新控件. MJRefresh - 仅需一行代码就可以为UITable ...