自定义圆盘式view

最新推荐文章于 2020-05-12 16:34:00 发布
最新推荐文章于 2020-05-12 16:34:00 发布
阅读量1k 收藏
点赞数 2
分类专栏： 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mannver/article/details/51224526
版权

//首先大家最关心的就是效果到底是怎样的 ，那么我们就先来看一下效果;

这里写图片描述

实现上面的效果 我们需要自定义的view 那么下面展示的就是自定义view中的实现代码

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PathEffect;
import android.graphics.Rect;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.SimpleOnGestureListener;

/**
 * 圆盘式的view
 * 
 * @author chroya
 * 
 */
public class RoundSpinView extends View {//自定义view
    private Paint mPaint = new Paint();//初始化画笔
    private PaintFlagsDrawFilter pfd;

    private int startMenu;   //菜单的第一张图片的资源id

    // stone列表
    private BigStone[] mStones;
    // 数目
    private static final int STONE_COUNT = 3;

    // 圆心坐标
    private int mPointX = 0, mPointY = 0;
    // 半径
    private int mRadius = 0;
    // 每两个点间隔的角度
    private int mDegreeDelta;

    private int menuRadius; // 菜单的半径

    private int mCur = -1; // 正在被移动的menu;

    private boolean[] quadrantTouched;   //对每个象限触摸情况的记录

    // Touch detection
    private GestureDetector mGestureDetector;

    private onRoundSpinViewListener mListener;  //自定义事件监听器

    private final static int TO_ROTATE_BUTTON = 0;  //旋转按钮；

    private Handler handler = new Handler(){
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case TO_ROTATE_BUTTON:
                float velocity = Float.parseFloat(msg.obj.toString());
                rotateButtons(velocity/75);
                velocity /= 1.0666F;
                new Thread(new FlingRunnable(velocity)).start();
                break;

            default:
                break;
            }
        };
    };

    public interface onRoundSpinViewListener{
        public void onSingleTapUp(int position);  //监听每个菜单的单击事件
    }

    public RoundSpinView(Context context,AttributeSet attrs) {
        super(context,attrs);
        if(attrs!=null){
            TypedArray a = getContext().obtainStyledAttributes(attrs,
                    R.styleable.RoundSpinView);
            startMenu = a.getResourceId(R.styleable.RoundSpinView_menuStart, 0);
        }
        pfd = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG); 
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(2);
        mPaint.setAntiAlias(true); //消除锯齿  
        mPaint.setStyle(Paint.Style.STROKE); //绘制空心圆 
        PathEffect effects = new DashPathEffect(new float[]{5,5,5,5},1);  
        mPaint.setPathEffect(effects);


        quadrantTouched = new boolean[] { false, false, false, false, false };
        mGestureDetector = new GestureDetector(getContext(),
                new MyGestureListener());

        setupStones();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mPointX = this.getMeasuredWidth()/2;
        mPointY = this.getMeasuredHeight()/2;

        //初始化半径和菜单半径
        mRadius = mPointX-mPointX/5;
        menuRadius = (int)(mPointX/5.5);

        computeCoordinates();
    }

    /**
     * 初始化每个点
     */
    private void setupStones() {
        mStones = new BigStone[STONE_COUNT];
        BigStone stone;
        int angle = 270;
        mDegreeDelta = 360 / STONE_COUNT;

        for (int index = 0; index < STONE_COUNT; index++) {
            stone = new BigStone();
            if (angle >= 360) {
                angle -= 360;
            }else if(angle < 0){
                angle += 360;
            }
            stone.angle = angle;
            stone.bitmap = BitmapFactory.decodeResource(getResources(),
                    startMenu + index);
            angle += mDegreeDelta;

            mStones[index] = stone;
        }
    }

    /**
     * 重新计算每个点的角度
     */
    private void resetStonesAngle(float x, float y) {
        int angle = computeCurrentAngle(x, y);
        Log.d("RoundSpinView", "angle:" + angle);
        for (int index = 0; index < STONE_COUNT; index++) {
            mStones[index].angle = angle;
            angle += mDegreeDelta;
        }
    }

    /**
     * 计算每个点的坐标
     */
    private void computeCoordinates() {
        BigStone stone;
        for (int index = 0; index < STONE_COUNT; index++) {
            stone = mStones[index];
            stone.x = mPointX
                    + (float) (mRadius * Math.cos(Math.toRadians(stone.angle)));
            stone.y = mPointY
                    + (float) (mRadius * Math.sin(Math.toRadians(stone.angle)));
        }
    }

    /**
     * 计算某点的角度
     * 
     * @param x
     * @param y
     * @return
     */
    private int computeCurrentAngle(float x, float y) {
        float distance = (float) Math
                .sqrt(((x - mPointX) * (x - mPointX) + (y - mPointY)
                        * (y - mPointY)));
        int degree = (int) (Math.acos((x - mPointX) / distance) * 180 / Math.PI);
        if (y < mPointY) {
            degree = -degree;
        }

        Log.d("RoundSpinView", "x:" + x + ",y:" + y + ",degree:" + degree);
        return degree;
    }

    private double startAngle;

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        // resetStonesAngle(event.getX(), event.getY());
        // computeCoordinates();
        // invalidate();

        int x, y;
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            x = (int) event.getX();
            y = (int) event.getY();
            mCur = getInCircle(x, y);
            if (mCur == -1) {
                startAngle = computeCurrentAngle(x, y);
            }
        } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
            x = (int) event.getX();
            y = (int) event.getY();
            if (mCur != -1) {
                mStones[mCur].x = x;
                mStones[mCur].y = y;
                invalidate();
            } else {
                double currentAngle = computeCurrentAngle(x, y);
                rotateButtons(startAngle - currentAngle);
                startAngle = currentAngle;
            }
        } else if (event.getAction() == MotionEvent.ACTION_UP) {
            x = (int) event.getX();
            y = (int) event.getY();
            if (mCur != -1) {
                computeCoordinates();
                int cur = getInCircle(x, y);
                if (cur != mCur && cur != -1) {
                    int angle = mStones[mCur].angle;
                    mStones[mCur].angle = mStones[cur].angle;
                    mStones[cur].angle = angle;
                }
                computeCoordinates();
                invalidate();
                mCur = -1;
            }
        }

        // set the touched quadrant to true
        quadrantTouched[getQuadrant(event.getX() - mPointX,
                mPointY - event.getY())] = true;
        mGestureDetector.onTouchEvent(event);
        return true;
    }

    private class MyGestureListener extends SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            // get the quadrant of the start and the end of the fling
            int q1 = getQuadrant(e1.getX() - mPointX, mPointY - e1.getY());
            int q2 = getQuadrant(e2.getX() - mPointX, mPointY - e2.getY());

            // the inversed rotations
            if ((q1 == 2 && q2 == 2 && Math.abs(velocityX) < Math
                    .abs(velocityY))
                    || (q1 == 3 && q2 == 3)
                    || (q1 == 1 && q2 == 3)
                    || (q1 == 4 && q2 == 4 && Math.abs(velocityX) > Math
                            .abs(velocityY))
                    || ((q1 == 2 && q2 == 3) || (q1 == 3 && q2 == 2))
                    || ((q1 == 3 && q2 == 4) || (q1 == 4 && q2 == 3))
                    || (q1 == 2 && q2 == 4 && quadrantTouched[3])
                    || (q1 == 4 && q2 == 2 && quadrantTouched[3])) {

                // CircleLayout.this.post(new FlingRunnable(-1
                // * (velocityX + velocityY)));
                new Thread(new FlingRunnable(velocityX+velocityY)).start();
            } else {
                // the normal rotation
                // CircleLayout.this
                // .post(new FlingRunnable(velocityX + velocityY));
                new Thread(new FlingRunnable(-(velocityX+velocityY))).start();
            }

            return true;

        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {

            int cur = getInCircle((int)e.getX(),(int)e.getY());
            if(cur!=-1){
                if(mListener!=null){
                    mListener.onSingleTapUp(cur);
                }
//              Toast.makeText(getContext(), "position:"+cur, 0).show();
                return true;
            }
            return false;
        }

    }

    private class FlingRunnable implements Runnable{

        private float velocity;

        public FlingRunnable(float velocity){
            this.velocity = velocity;
        }

        @Override
        public void run() {
            if(Math.abs(velocity)>=200){
                Message message = Message.obtain();
                message.what = TO_ROTATE_BUTTON;
                message.obj = velocity;
                handler.sendMessage(message);
            }
        }
    }

    /**
     * @return The selected quadrant.
     */
    private static int getQuadrant(double x, double y) {
        if (x >= 0) {
            return y >= 0 ? 1 : 4;
        } else {
        }
        return y >= 0 ? 2 : 3;
    }

    /*
     * 旋转菜单按钮
     */
    private void rotateButtons(double degree) {
        for (int i = 0; i < STONE_COUNT; i++) {
            mStones[i].angle -= degree;
            if (mStones[i].angle < 0) {
                mStones[i].angle += 360;
            }else if(mStones[i].angle >=360){
                mStones[i].angle -= 360;
            }
        }

        computeCoordinates();
        invalidate();
    }

    @Override
    public void onDraw(Canvas canvas) {
        //画一个白色的圆环
        canvas.drawCircle(mPointX, mPointY, mRadius, mPaint);

        //将每个菜单画出来
        for (int index = 0; index < STONE_COUNT; index++) {
            if (!mStones[index].isVisible)
                continue;
            drawInCenter(canvas, mStones[index].bitmap, mStones[index].x,
                    mStones[index].y);
        }
    }

    /**
     * 把中心点放到中心处
     */
    private void drawInCenter(Canvas canvas, Bitmap bitmap, float left,
            float top) {
        Rect dst = new Rect();
        dst.left = (int) (left - menuRadius);
        dst.right = (int) (left + menuRadius);
        dst.top = (int) (top - menuRadius);
        dst.bottom = (int) (top + menuRadius);
        canvas.setDrawFilter(pfd); 
        canvas.drawBitmap(bitmap, null, dst, mPaint);
    }
    private int getInCircle(int x, int y) {
        for (int i = 0; i < STONE_COUNT; i++) {
            BigStone stone = mStones[i];
            int mx = (int) stone.x;
            int my = (int) stone.y;
            if (((x - mx) * (x - mx) + (y - my) * (y - my)) < menuRadius
                    * menuRadius) {
                return i;
            }
        }
        return -1;
    }

    public void setOnRoundSpinViewListener(onRoundSpinViewListener listener){
        this.mListener = listener;
    }

    class BigStone {

        // 图片
        Bitmap bitmap;

        // 角度
        int angle;

        // x坐标
        float x;

        // y坐标
        float y;

        // 是否可见
        boolean isVisible = true;
    }
}

//自定义的view要在布局中 通过包名类名调用 那么我们就来看一下布局中的实现代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
     >
    <com.example.roundspinviewdemo.view.RoundSpinView
        android:id="@+id/rsv_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@drawable/menubkground"
        app:menuStart="@drawable/menu1" />

</LinearLayout>

//主方法中就是调用这个控件 实现一些监听 但是我们只实现一下吐司效果。
主方法中的实现代码

import com.example.roundspinviewdemo.view.RoundSpinView;
import com.example.roundspinviewdemo.view.RoundSpinView.onRoundSpinViewListener;
import android.os.Bundle;
import android.app.Activity;
import android.widget.Toast;
public class MainActivity extends Activity implements onRoundSpinViewListener {

    private RoundSpinView rsv_test;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView(){
        rsv_test = (RoundSpinView)this.findViewById(R.id.rsv_test);
        rsv_test.setOnRoundSpinViewListener(this);
    }

    @Override
    public void onSingleTapUp(int position) {
        switch (position) {
        case 0:
            Toast.makeText(MainActivity.this, "place:0", 0).show();
            break;
        case 1:
            Toast.makeText(MainActivity.this, "place:1", 0).show();
            break;
        case 2:
            Toast.makeText(MainActivity.this, "place:2", 0).show();
            break;
        default:
            break;
        }
    }

}

上面的三段代码就能支撑我们实现上面的效果，最重要的就是自定义View。学会使用自定义view 那么我们的价值就不同了 。

慕七儿
关注
专栏目录
自定义View 圆盘
xieyu1999的博客
11-29 228
布局activity_main.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://sche...
android自定义圆盘方向按钮
06-07
这个新类将成为我们自定义圆盘方向按钮的基础。例如，我们可以将其命名为`CircleDirectionButton`。在这个类中，我们需要重写几个关键方法来实现我们的功能： 1. **构造函数**：初始化成员变量，如圆盘的半径、颜色...
自定义的view实现带刻度的圆盘，并有动画
06-14
类似于miui安全中心圆盘效果
Android 自定义圆盘，方向盘
qq_29194615的博客
04-28 1484
/** * 仿遥控器上下左右ok圆形菜单 * Created by */ public class RoundMenuView extends View { /** * 变量 */ private int coreX;//中心点的坐标X private int coreY;//中心点的坐标Y private List<Ro...
圆盘旋转按钮--自定义view
11-21 514
1.自定义view 2.xml文件引用该view 3.定义第一个按钮图片 ---------------------------------------------------------------------------- package roundspinviewdemo.view; import android.content.Context; import android
自定义逐格走旋转圆盘
WernerZeiss的博客
07-01 560
前言最近在不断学习自定义控件，项目中有个旋转圆盘的需求，需要一个刻度一个刻度的走，网上没发现有符合要求的，遂自己实现一下，先看下效果（录完才发现没有触摸轨迹，，前面旋转的是手滑动的，大家懂哈~） 需求 1，圆盘可控制顺时针与逆时针旋转，圆盘中间需要设置图片 2，旋转需要按一个刻度一个刻度的走，具有跳跃性 3，需要提供顺时针与逆时针旋转的方法，以及可以禁止与开启旋转 实现 首先当然是继承Vie
安卓自定义控件相关-android自定义圆盘方向按钮.rar
07-29
本资源"安卓自定义控件相关-android自定义圆盘方向按钮.rar"主要关注的是如何在Android平台上创建一个自定义的圆盘形状的方向按钮。这个压缩包可能包含了多个文件，包括布局XML、Java源代码以及可能的资源文件，但...
Android自定义View仿IOS圆盘时间选择器
08-31
总之，这个Android自定义View项目展示了如何利用基本的Android绘图API创建一个功能丰富的交互式组件。通过对View的自定义，我们可以实现与iOS类似的界面元素，为用户提供一致的体验。这个教程不仅提供了代码示例，还...
Android自定义View实践--圆盘温度计
07-30
本文将深入探讨如何实现一个圆盘温度计的自定义View，这是一个非常直观且富有挑战性的实例，可以帮助开发者更好地理解Android图形绘制机制。 首先，我们需要了解自定义View的基本步骤。创建自定义View通常涉及以下...
android自定义View（五）打造自己的遥控器菜单
12-14
用自定义View的方式来实现圆形的遥控器菜单。更多关于android自定义的知识可访问:http://blog.sina.com.cn/s/blog_9c4f0e790102vyt3.html
Android使用surfaceView自定义抽奖大转盘
01-05
使用surfaceView自定义抽奖大转盘 话不多说，先上效果图 完整代码地址欢迎start 实现思路以及过程 1、首先了解SurfaceView的基本用法，它跟一般的View不太一样，采用的双缓存机制，可以在子线程中绘制View，不会因为绘制耗时而失去流畅性，这也是选择使用SurfaceView去自定义这个抽奖大转盘的原因，毕竟绘制这个转盘的盘块，奖项的图片和文字以及转动都是靠绘制出来的，是一个比较耗时的绘制过程。 2、使用SurfaceView的一般模板样式 一般会用到的成员变量 private SurfaceHolder mSurfaceHolder; private Canvas
Android实现可点击的幸运大转盘
01-05
之前的项目有一个幸运大转盘的功能，在网上找了很久，都没有合适的方法。 这是效果图，实现目标：十二星座的图片可点击切换选中效果，根据选择不同的星座，实现不同的 方法。之前网上的都是带有指针的，或者可点击改变效果，但是并不知道选择的到底是哪个，即虚拟选择。 实现该功能的主要代码如下： 1、自定义一个布局，存放图片，实现圆形布局。 /** * * * CircleMenuLayout.java * * @author wuxiaosu * */ public class CircleMenuLayout extends ViewGroup { /** * 布局的半
SpinView基本使用1
08-03
1、软件下载3 2、系统要求3 3、软件安装注意3 4、启动软件5 5、开始采集6 1、调节帧率7 2、带宽限制设置8 3、调节曝光9 4、调节增益 11 5、
Android自定义实现圆盘的百分比设置
11-28
通过自定义属性实现控制圆盘的颜色和百分比，
android圆形旋转菜单，而对于移动转换功能支持
weixin_34049032的博客
08-16 119
  LZ该公司最近接手一个项目，需要写一个圆形旋转菜单，和菜单之间的移动换位支持，我本来以为这样的demo如若互联网是非常。想想你妈妈也帮不了我，空旋转，但它不能改变位置，所以LZ我们只能靠自己摸索。   最后LZ参考代码的在线部分。了一个自己定义的view最终实现了这个看似非常吊。却没有实际意义的功能。在此贡献出来给广大码农们共享。   话不多说，先上代码：   自己定义view类...
Android 详解自定义View抽奖转盘
weixin_34349320的博客
09-26 436
前言 由于自己经常使用四川移动掌上营业厅,经常在大转盘抽奖，每次都在使用这个抽奖，突然最近在练习自定义View，而且以前也没有做过这个自定义抽奖转盘，所以就当是练练手，然而百度上随便一搜索就是一大把，各种各样的解决方案。虽然网上的解决方案很多，但是我觉得即使再简单我们也要自己撸一变才能变成自己的东西，因此有了此文。 国际惯例先看运行效果，怕你们跑了： 分析实现步骤： 从上面的效果图我们可以简...
Android自定义View实现饼状图（可点击旋转）
IMAlex233博客
05-12 714
效果图如下： 废话不多说，直接上代码，具体实现请自动动手： package com.example.pieviewdemo; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics
实现可点击的幸运大转盘
兴趣所致
10-20 1931
之前的项目有一个幸运大转盘的功能，在网上找了很久，都没有合适的方法。 这是效果图，实现目标：十二星座的图片可点击切换选中效果，根据选择不同的星座，实现不同的 方法。之前网上的都是带有指针的，或者可点击改变效果，但是并不知道选择的到底是哪个，即虚拟选择。实现该功能的主要代码如下： 1。自定义一个布局，存放图片，实现圆形布局。/** * * * CircleMenuLayout.java *
Android自定义View：仿iOS圆盘时间选择器实现
"这篇教程介绍了如何在Android平台上创建一个自定义的View，模仿iOS的圆盘时间选择器，实现滑动选择时间的功能。" 在Android应用开发中，自定义View是一种常见的需求，它允许开发者根据自己的设计和功能需求创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值