最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Android自定义View仿IOS圆盘时间选择器
时间:2017-06-27 编辑:简简单单 来源:一聚教程网
通过自定义view实现仿iOS实现滑动两端的点选择时间的效果
效果图
自定义的view代码
代码如下 | 复制代码 |
publicclassRing_Slide2extendsView { privatestaticfinaldoubleRADIAN =180/ Math.PI; privateintmax_progress;// 设置最大进度 privateintcur_progress;//设置锚点1当前进度 privateintcur_progress2;//设置锚点2进度 privateintbottom_color;//设置底色 privateintcircle_color;//设置圆的颜色(锚点) privateintslide_color;//设置滑动过的颜色 privatefloatring_width;//圆环的宽度 privatedoublecur_Angle;//当前锚点1旋转角度 privatedoublecur_Angle2;//当前锚点2的旋转角度 privatefloatring_Radius;//圆环的半径 privatefinalint[] arrColorCircle =newint[]{0xFFFFde37,0xFFFFa400}; privateintmain_width;//圆的宽度 privatefloatmWheelCurX, mWheelCurY;//圆的位置 privatefloatmWheelCurX2, mWheelCurY2;//圆2的位置 privatePaint circle_Paint;//圆环的画笔 privatePaint select_Paint;//选中的画笔 privatePaint dot1;//圆点1 privatePaint dot2;//圆点2 privateContext context; privateOnSeekBarChangeListener changeListener,changeListener2; publicRing_Slide2(Context context) { this(context,null); } publicRing_Slide2(Context context, AttributeSet attrs) { this(context, attrs,0); } publicRing_Slide2(Context context, AttributeSet attrs,intdefStyleAttr) { super(context, attrs, defStyleAttr); this.context=context; initAttrs(attrs,defStyleAttr); initPadding(); //初始化画笔 initPaints(); } //初始化属性 privatevoidinitAttrs(AttributeSet attrs,intdefStyle){ 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(); } //初始化边距 privatevoidinitPadding(){ intpaddingLeft = getPaddingLeft(); intpaddingTop = getPaddingTop(); intpaddingRight = getPaddingRight(); intpaddingBottom = getPaddingBottom(); intpaddingStart =0, paddingEnd =0; if(Build.VERSION.SDK_INT >=17) { paddingStart = getPaddingStart(); paddingEnd = getPaddingEnd(); } intmaxPadding = Math.max(paddingLeft, Math.max(paddingTop, Math.max(paddingRight, Math.max(paddingBottom, Math.max(paddingStart, paddingEnd))))); setPadding(maxPadding, maxPadding, maxPadding, maxPadding); } privatevoidinitPaints(){ /* 圆环的画笔 */ 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角度值 floatcos = calculateCos(x, y); // 通过反三角函数获得角度值 doubleangle;//获取滑动的角度 if(x < getWidth() /2) {// 滑动超过180度 angle = Math.PI * RADIAN + Math.acos(cos) * RADIAN;//通过计算得到滑动的角度值 }else{// 没有超过180度 angle = Math.PI * RADIAN - Math.acos(cos) * RADIAN;//PI 周长比直径 返回弧角度的余弦值 } if(flag==1){ cur_Angle=angle; cur_progress=getSelectedValue(cur_Angle); MakeCurPosition(cos); if(changeListener !=null) { changeListener.onChanged(this, cur_progress); } }elseif(flag==2){ cur_Angle2=angle; cur_progress2=getSelectedValue(cur_Angle2); MakeCurPosition2(cos); if(changeListener2 !=null) { changeListener2.onChanged(this, cur_progress2); } } invalidate(); returntrue; }else{ returnsuper.onTouchEvent(event); } } privatebooleanisMovedot1(floatx,floaty){ floatdot1x = Math.abs(mWheelCurX - x); floatdot1y = Math.abs(mWheelCurY - y); if(dot1x<30&& dot1y<30){ returntrue; }else{ returnfalse; } } privatebooleanisMovedot2(floatx,floaty){ floatdot1x = Math.abs(mWheelCurX2 - x); floatdot1y = Math.abs(mWheelCurY2 - y); if(dot1x<30&& dot1y<30){ returntrue; }else{ returnfalse; } } //拿到切斜角的cos值 privatefloatcalculateCos(floatx,floaty){ floatwidth = x - getWidth() /2; floatheight = y - getHeight() /2; floatslope = (float) Math.sqrt(width * width + height * height); returnheight / slope; } privateintgetSelectedValue(doublemCurAngle) {//角度转进度 returnMath.round(max_progress * ((float) mCurAngle /360));//四舍五入 } publicvoidsetOnSeekBarChangeListener(OnSeekBarChangeListener listener) { changeListener = listener; } publicvoidsetOnSeekBarChangeListener2(OnSeekBarChangeListener listener) { changeListener2 = listener; } publicvoidinitRadian(intpro1,intpro2){ this.cur_progress=pro1; this.cur_progress2=pro2; invalidate(); } publicinterfaceOnSeekBarChangeListener { voidonChanged(Ring_Slide2 seekbar,intcurValue); } } |
自定义stayle样式,在values下新建sttrs.xml文件
代码如下 | 复制代码 |
//设置最大进度 //设置当前进度 //设置当前进度 //设置底色 //设置圆的颜色 //设置滑动的颜色 //圆环的宽度 (dimension是代表尺寸值) |
-
上一个: 蚂蚁红包卡如何购买/办理
-
下一个: OPPO R11后盖怎么打开
相关文章
- sora软件价格介绍 02-22
- sora官网入口地址一览 02-22
- Sora生成的视频使用教程 02-22
- 《梦幻西游》元宵灯谜线索答案大全2024 02-22
- 《原神》有朋自远方来第一天通关攻略 02-22
- 《苏醒之路》四个结局达成攻略 02-22