热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义View仿IOS圆盘时间选择器

这篇文章主要介绍了Android自定义View仿IOS圆盘时间选择器,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下

通过自定义view实现仿iOS实现滑动两端的点选择时间的效果

效果图

这里写图片描述

这里写图片描述

自定义的view代码

public class Ring_Slide2 extends View {
 private static final double RADIAN = 180 / Math.PI;
 private int max_progress; // 设置最大进度
 private int cur_progress; //设置锚点1当前进度
 private int cur_progress2; //设置锚点2进度
 private int bottom_color;//设置底色
 private int circle_color; //设置圆的颜色(锚点)
 private int slide_color; //设置滑动过的颜色
 private float ring_width; //圆环的宽度
 private double cur_Angle; //当前锚点1旋转角度
 private double cur_Angle2; //当前锚点2的旋转角度
 private float ring_Radius;//圆环的半径
 private final int[] arrColorCircle = new int[]{0xFFFFde37, 0xFFFFa400};
 private int main_width; //圆的宽度
 private float mWheelCurX, mWheelCurY; //圆的位置
 private float mWheelCurX2, mWheelCurY2; //圆2的位置
 private Paint circle_Paint; //圆环的画笔
 private Paint select_Paint;//选中的画笔
 private Paint dot1; //圆点1
 private Paint dot2; //圆点2
 private Context context;
 private OnSeekBarChangeListener changeListener,changeListener2;
 public Ring_Slide2(Context context) {
  this(context,null);
 }
 public Ring_Slide2(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }
 public Ring_Slide2(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  this.cOntext=context;
  initAttrs(attrs,defStyleAttr);
  initPadding();
  //初始化画笔
  initPaints();
 }
 //初始化属性
 private void initAttrs(AttributeSet attrs, int defStyle){
  TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.Cricle_slide, defStyle, 0);
  max_progress=typedArray.getInt(R.styleable.Cricle_slide_max_progress,720);
  cur_progress=typedArray.getInt(R.styleable.Cricle_slide_cur_progress,420);
  cur_progress2=typedArray.getInt(R.styleable.Cricle_slide_cur_progress2,540);
  if (cur_progress > max_progress) cur_progress = max_progress;
  if (cur_progress2 > max_progress) cur_progress2 = max_progress;
  Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.select_sun_bg2);
  main_width= bitmap.getWidth();
  ring_width=typedArray.getFloat(R.styleable.Cricle_slide_Ring_Width,main_width);
  bottom_color=typedArray.getColor(R.styleable.Cricle_slide_bottom_color,getColor(R.color.select_main_bg_color));
  circle_color=typedArray.getColor(R.styleable.Cricle_slide_circle_color,getColor(R.color.duration));
  slide_color=typedArray.getColor(R.styleable.Cricle_slide_slide_color,getColor(R.color.time));
  typedArray.recycle();
 }
 //初始化边距
 private void initPadding(){
  int paddingLeft = getPaddingLeft();
  int paddingTop = getPaddingTop();
  int paddingRight = getPaddingRight();
  int paddingBottom = getPaddingBottom();
  int paddingStart = 0, paddingEnd = 0;
  if (Build.VERSION.SDK_INT >= 17) {
   paddingStart = getPaddingStart();
   paddingEnd = getPaddingEnd();
  }
  int maxPadding = Math.max(paddingLeft, Math.max(paddingTop,
    Math.max(paddingRight, Math.max(paddingBottom, Math.max(paddingStart, paddingEnd)))));
  setPadding(maxPadding, maxPadding, maxPadding, maxPadding);
 }
 private void initPaints(){
  /*
  圆环的画笔
   */
  circle_Paint=new Paint(Paint.ANTI_ALIAS_FLAG);
  circle_Paint.setAntiAlias(true);
  circle_Paint.setColor(bottom_color);
  circle_Paint.setStyle(Paint.Style.STROKE);
  circle_Paint.setStrokeWidth(ring_width);
  /*
  选中区域的画笔
   */
  select_Paint=new Paint(Paint.ANTI_ALIAS_FLAG);
  select_Paint.setShader(new SweepGradient(0, 0, arrColorCircle, null));
  /*select_Paint.setColor(circle_color);*/
  select_Paint.setAntiAlias(true);
  select_Paint.setStyle(Paint.Style.STROKE);
  select_Paint.setStrokeWidth(ring_width);
  // 画锚点
  dot1 = new Paint(Paint.ANTI_ALIAS_FLAG);
  dot1.setColor(circle_color);
  dot1.setAntiAlias(true);
  dot1.setStyle(Paint.Style.FILL);
  // 画锚点2
  dot2 = new Paint(Paint.ANTI_ALIAS_FLAG);
  dot2.setColor(slide_color);
  dot2.setAntiAlias(true);
  dot2.setStyle(Paint.Style.FILL);
 }
 //获取宽度
 private float getDimen(int dimenId) {
  return getResources().getDimension(dimenId);
 }
 //获取颜色
 @TargetApi(Build.VERSION_CODES.M)
 private int getColor(int colorId) {
  final int version = Build.VERSION.SDK_INT;
  if (version >= 23) {
   return getContext().getColor(colorId);
  } else {
   return ContextCompat.getColor(getContext(), colorId);
  }
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.setalarm_colock_bg);
  int height = bitmap.getHeight()+main_width*2;
  int width = bitmap.getWidth()+main_width*2;
  int min = Math.min(height, width);
  setMeasuredDimension(min,min);
  initposition();
 }
 private void initposition(){
  //转换为360度
  cur_Angle=(double) cur_progress / max_progress*360.0;
  cur_Angle2=(double)cur_progress2 / max_progress*360.0;
  //计算初始化旋转的角度
  double cos = -Math.cos(Math.toRadians(cur_Angle));
  double cos2 = -Math.cos(Math.toRadians(cur_Angle2));
  //根据旋转的角度来确定位置
  MakeCurPosition(cos);
  MakeCurPosition2(cos2);
  //确定圆环的半径
  ring_Radius=(getMeasuredWidth() - getPaddingLeft() - getPaddingRight() - ring_width) / 2;
 }
 private void MakeCurPosition(double cos){
  //根据旋转的角度来确定圆的位置
  //确定x点的坐标
  mWheelCurX = calcXLocationInWheel(cur_Angle, cos);
  //确定y点的坐标
  mWheelCurY=calcYLocationInWheel(cos);
 }
 private void MakeCurPosition2(double cos2){
  //根据旋转的角度来确定圆的位置
  //确定x点的坐标
  mWheelCurX2 = calcXLocationInWheel(cur_Angle2, cos2);
  //确定y点的坐标
  mWheelCurY2=calcYLocationInWheel(cos2);
 }
 //确定x点的坐标
 private float calcXLocationInWheel(double angle,double cos){
  if (angle <180) {
   return (float) (getMeasuredWidth() / 2 + Math.sqrt(1 - cos * cos) * ring_Radius); //Math.sqrt正平分根 9-3
  } else {
   return (float) (getMeasuredWidth() / 2 - Math.sqrt(1 - cos * cos) * ring_Radius);
  }
 }
 //确定y点的坐标
 private float calcYLocationInWheel(double cos) {
  return getMeasuredWidth() / 2 + ring_Radius * (float) cos;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  float left = getPaddingLeft() + ring_width / 2;
  float top = getPaddingTop() + ring_width / 2;
  float right = canvas.getWidth() - getPaddingRight() - ring_width / 2;
  float bottom = canvas.getHeight() - getPaddingBottom() - ring_width / 2;
  float centerX = (left + right) / 2;
  float centerY = (top + bottom) / 2;
  float wheelRadius = (canvas.getWidth() - getPaddingLeft() - getPaddingRight()) / 2 - ring_width / 2;
  canvas.drawCircle(centerX, centerY, wheelRadius, circle_Paint);
  //画选中区域
  // canvas.drawArc(new RectF(left, top, right, bottom), (float) (Math.PI * RADIAN + Math.acos(cur_Angle) * RADIAN), (float) (Math.abs(cur_Angle-cur_Angle2)), false, select_Paint);
  Log.i("TAG","第一个的角度="+cur_Angle);
  Log.i("TAG","第一个的角度2="+cur_Angle2);
  float begin=0; //圆弧的起点位置
  float stop=0;
  if(cur_Angle>180 && cur_Angle>cur_Angle2 ){ //180 -- 360
   begin=(float) (-Math.abs(cur_Angle-360)-90);
   stop=(float) Math.abs(Math.abs(cur_Angle-360)+cur_Angle2);
   Log.i("TAG","begin="+begin);
   Log.i("TAG","stop="+stop);
  }else if(cur_Angle>cur_Angle2){
   begin=(float) cur_Angle-90;
   stop=(float)(360-(cur_Angle-cur_Angle2));
  }else {
    begin=(float) cur_Angle-90;
   stop=(float) Math.abs(cur_Angle-cur_Angle2);
  }
  canvas.drawArc(new RectF(left, top, right, bottom), begin,stop, false, select_Paint);
  //画锚点 画圆
  canvas.drawCircle(mWheelCurX, mWheelCurY, ring_width/2, dot1);
  //画锚点 画圆
  canvas.drawCircle(mWheelCurX2, mWheelCurY2, ring_width/2, dot2);
  Log.i("TAG","锚点1Y"+mWheelCurY+"锚点1X"+mWheelCurX);
  Log.i("TAG","锚点2Y"+mWheelCurY2+"锚点1X"+mWheelCurX2);
 }
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  float x = event.getX();
  float y = event.getY();
  int flag=0;
  //判断是否触控到两个点中的其中某个点
  if(isMovedot2(x,y)){
   flag=2;
  }else if(isMovedot1(x,y)){
   flag=1;
  }
  /* if(isMovedot1(x,y)){
   flag=1;
  }else if(isMovedot2(x,y)){
   flag=2;
  }*/
  if(event.getAction()==MotionEvent.ACTION_MOVE || isMovedot1(x,y) ==true || isMovedot2(x,y)==true ){
   Log.i("TAG","进入X="+x+"进入Y="+y);
   //通过触摸点算出cos角度值
   float cos = calculateCos(x, y);
   // 通过反三角函数获得角度值
   double angle; //获取滑动的角度
   if (x 

自定义stayle样式,在values下新建sttrs.xml文件

 
  //设置最大进度
  
  //设置当前进度
  
  //设置当前进度
  
  //设置底色
  
  //设置圆的颜色
  
  //设置滑动的颜色
  
  //圆环的宽度 (dimension是代表尺寸值)
  
 

以上所述是小编给大家介绍的Android自定义View仿IOS圆盘时间选择器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • Monkey《大话移动——Android与iOS应用测试指南》的预购信息发布啦!
    Monkey《大话移动——Android与iOS应用测试指南》的预购信息已经发布,可以在京东和当当网进行预购。感谢几位大牛给出的书评,并呼吁大家的支持。明天京东的链接也将发布。 ... [详细]
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
author-avatar
十里春风不如你
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有