Android中仿IOS圆盘时间选择器

最新推荐文章于 2022-08-09 16:07:37 发布
最新推荐文章于 2022-08-09 16:07:37 发布
阅读量1k 收藏
点赞数
分类专栏： UI 文章标签： 自定义时间选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/android_gjw/article/details/62036647
版权

通过自定义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 < 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);
                }
            }else if(flag==2){
                cur_Angle2=angle;
                cur_progress2=getSelectedValue(cur_Angle2);
                MakeCurPosition2(cos);
                if (changeListener2 != null) {
                    changeListener2.onChanged(this, cur_progress2);
                }
            }
            invalidate();
            return true;
        }else {
            return super.onTouchEvent(event);
        }
    }

    private  boolean isMovedot1(float x,float y){
        float dot1x = Math.abs(mWheelCurX - x);
        float dot1y = Math.abs(mWheelCurY - y);
        if(dot1x<30 && dot1y<30){
            return true;
        }else{
            return false;
        }
    }
    private boolean isMovedot2(float x,float y){
        float dot1x = Math.abs(mWheelCurX2 - x);
        float dot1y = Math.abs(mWheelCurY2 - y);
        if(dot1x<30 && dot1y<30){
            return true;
        }else{
            return false;
        }
    }

    //拿到切斜角的cos值
    private float calculateCos(float x, float y){
        float width = x - getWidth() / 2;
        float height = y - getHeight() / 2;
        float slope = (float) Math.sqrt(width * width + height * height);
        return height / slope;
    }

    private int getSelectedValue(double mCurAngle) {  //角度转进度
        return Math.round(max_progress * ((float) mCurAngle / 360));  //四舍五入
    }

    public void setOnSeekBarChangeListener(OnSeekBarChangeListener listener) {
        changeListener = listener;
    }
    public void setOnSeekBarChangeListener2(OnSeekBarChangeListener listener) {
        changeListener2 = listener;
    }
    public void initRadian(int pro1,int pro2){
        this.cur_progress=pro1;
        this.cur_progress2=pro2;
        invalidate();
    }

    public interface OnSeekBarChangeListener {
        void onChanged(Ring_Slide2 seekbar, int curValue);
    }
}

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

 <declare-styleable name="Cricle_slide">
        //设置最大进度
        <attr name="max_progress" format="integer"></attr>
        //设置当前进度
        <attr name="cur_progress" format="integer"></attr>
        //设置当前进度
        <attr name="cur_progress2" format="integer"></attr>
        //设置底色
        <attr name="bottom_color" format="color"></attr>
        //设置圆的颜色
        <attr name="circle_color" format="color"></attr>
        //设置滑动的颜色
        <attr name="slide_color" format="color"></attr>
        //圆环的宽度  （dimension是代表尺寸值）
        <attr name="Ring_Width" format="dimension"></attr>

    </declare-styleable>

《Kotlin语法基础到实战开发》系列课程视频

http://edu.csdn.net/course/detail/6409?locationNum=7&fps=1&ref=srch&loc=1

http://edu.csdn.net/course/play/6409/123752

Android_gjw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Android 仿iOS的时间选择器Picker控件，有时间选择和选项选择，并支持一二三级联动效果 源码
10-10
仿iOS的PickerView控件，有时间选择和选项选择并支持一二三级联动效果 ——TimePopupWindow 时间选择器，支持年月日时分，年月日，时分等格式 ——OptionsPopupWindow 选项选择器，支持一，二，三级选项选择，并且可以设置是否联动
android 高仿ios时间选择器,Android仿ios时间日期选择器
weixin_39588252的博客
05-25 190
private void currentPicke(final EditText editText) {editText.setInputType(InputType.TYPE_NULL);final ArrayListoptions1Items = new ArrayList<>();options1Items.add("卖方");options1Items.add("买方");fi...
仿iOS时间环形的时间选择器
鲨鱼不会飞的博客
06-28 1008
仿iOS健康时间选择器
android 开发 时间选择器TimePicker的使用
qq_29247839的博客
08-09 6358
我知道现在github上有很多功能强大的各色选择器，但是Android其实是自带一些时间选择器的。在不需要太复杂的ui开发下可以选择使用这些系统自带的。
Android 类似Ios的时间滚轮控件
NewActivity的博客
03-19 4364
仿IOS时间选择器
Android仿IOS10圆盘时间选择器
08-27
主要为大家详细介绍了Android仿IOS10圆盘时间选择器，自定义圆盘时间选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android自定义View仿IOS圆盘时间选择器
08-31
主要介绍了Android自定义View仿IOS圆盘时间选择器,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
Android仿ios时间选择器
05-28
忘了是哪位大神写的了，n年看到就存下了，如今自己用到，在原来基础上做了下优化和修改，使得时间选择器最终只能滚动到当今的日期并做了相应的联动，我只修改了yyyy-MM-dd这一种格式，其他格式如有需要照葫芦画瓢...
android 高仿ios时间选择器,不一样的Android选择器，简单方便，地址日期时间都好用！...
weixin_31819459的博客
05-25 1192
前言Android开发有不少情况下会用到Picker，例如选择地址、日期、时间。原生Picker和仿iOS的Picker都是上下或左右滑动到固定区域来选择选项：显示数量少，如果当前选项距离需要的选项比较远就得滑很多次；滑动不好控制，一不小心就滑过了需要往相反方向慢慢滑回来，很烦人。ZBLibrary中的GridPicker每页显示多行多列，大大增加了显示数量；将滑动选择改为点击选择，大大提高了操...
Android仿iOS时间选择器
Star_cmx的博客
04-03 1510
话不多说，直接上代码 package com.cybeye.module.xingzuo.view; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import ...
android时间选择器仿iOS自定义直接调用
09-12
android源码，可直接调用，有三种效果，时间选择器，仿iOS样式；导入自己的工程后记得改自定义时间选择器控件的对应包名；
Android自定义半圆形圆盘滚动选择器
01-20
前段时间公司项目要求做一个特效的滑动选择器，效果如下图的样子：    功能要求：两边的半圆形转盘可以转动，转盘上的图标也一起滚动，蓝红色图标指着的小图标变成高亮选中状态。 第一眼看到这个需求就想到这个必须要用自定义控件来做才行，于是产生了这样的思路： 半圆形的滚动的转盘自定义view继承viewgroup，重写滑动事件，自定义圆盘上图片的摆放角度，至于蓝色和红色箭头图标指向的选中状态可以用坐标数组绘制一个区域来判断是否有符合条件的图标滚动到了这个位置，如果有的话就将这个图标所在的控件透明度设置为1，如果没到这个位置就设置为非选中状态0.5透明度 ，思路这样定下来了，预计可以行得通，
android仿IOS时间选择控件
08-27
android仿IOS时间选择控件，点击按钮，弹出时间选择对话框进行选择！
android 高仿ios时间选择器,Android自定义View仿IOS圆盘时间选择器
weixin_35985162的博客
05-25 358
通过自定义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; //设置锚点...
Android 圆形时间选择控件
05-27
Android代码自定义View实现圆形选择时间控件，主要通过拖拽方式选择，选中部分可以跟随手指滑动而选择移动到相应的位置，就像钟表的指针一样
安卓仿IOS自定义时间选择器
09-12
你的时间选择器还是再用巨丑的PickNumber吗?这是一个仿照IOS的时间选择器。原先也是参考网上的demo，自己优化了很多，界面更美观，更实用。
仿IOS控件之ActionSheet样式
06-23
两种方式实现ActionSheet底部弹出菜单效果. blog地址： http://blog.csdn.net/qiaoidea/article/details/46417747
Android switch仿iOS美化
最新发布
03-28
在Android开发中，可以使用Switch控件来实现类似iOS的美化效果。下面是一种实现方式： 1. 首先，在XML布局文件中添加Switch控件： ```xml android:id="@+id/switch_button" android:layout_width="wrap_content...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值