Android简单的圆盘形菜单

最新推荐文章于 2022-11-02 12:22:08 发布
最新推荐文章于 2022-11-02 12:22:08 发布
阅读量343 收藏
点赞数
分类专栏： java
   今天偶然看到一个圆盘形的菜单，还可以转动，感觉挺有意思，然后想了想，做了个简单的效果。
      思路是这样的，定一个原点和一个半径，圆的四周均匀分布每个菜单。为了方便计算，菜单的坐标用度数表示，然后转化为极坐标计算。
      定某个点为起始点，根据总菜单数确定每个点增加的度数，然后依次确定每个点的度数，也就确定了坐标。

Java代码 复制代码 收藏代码
  1. package chroya.demo.roundspin; 
  2.  
  3. import android.content.Context; 
  4. import android.graphics.Bitmap; 
  5. import android.graphics.BitmapFactory; 
  6. import android.graphics.Canvas; 
  7. import android.graphics.Color; 
  8. import android.graphics.Paint; 
  9. import android.util.Log; 
  10. import android.view.MotionEvent; 
  11. import android.view.View; 
  12.  
  13. /**
  14. * 圆盘式的view
  15. * @author chroya
  16. *
  17. */ 
  18. public class RoundSpinView extends View { 
  19.     private Paint mPaint = new Paint(); 
  20.      
  21.     //stone列表 
  22.     private BigStone[] mStones; 
  23.     //数目 
  24.     private static final int STONE_COUNT = 6; 
  25.      
  26.     //圆心坐标 
  27.     private int mPointX=0, mPointY=0; 
  28.     //半径 
  29.     private int mRadius = 0; 
  30.     //每两个点间隔的角度 
  31.     private int mDegreeDelta; 
  32.  
  33.     public RoundSpinView(Context context, int px, int py, int radius) { 
  34.         super(context); 
  35.         mPaint.setColor(Color.RED); 
  36.         mPaint.setStrokeWidth(2); 
  37.         setBackgroundResource(R.drawable.menubkground); 
  38.          
  39.         mPointX = px; 
  40.         mPointY = py; 
  41.         mRadius = radius; 
  42.          
  43.         setupStones(); 
  44.         computeCoordinates(); 
  45.     } 
  46.      
  47.     /**
  48.      * 初始化每个点
  49.      */ 
  50.     private void setupStones() { 
  51.         mStones = new BigStone[STONE_COUNT]; 
  52.         BigStone stone; 
  53.         int angle = 0; 
  54.         mDegreeDelta = 360/STONE_COUNT; 
  55.          
  56.         for(int index=0; index<STONE_COUNT; index++) { 
  57.             stone = new BigStone(); 
  58.             stone.angle = angle; 
  59.             stone.bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.menu1+index);             
  60.             angle += mDegreeDelta; 
  61.              
  62.             mStones[index] = stone; 
  63.         } 
  64.     } 
  65.      
  66.     /**
  67.      * 重新计算每个点的角度
  68.      */ 
  69.     private void resetStonesAngle(float x, float y) { 
  70.         int angle = computeCurrentAngle(x, y); 
  71.         Log.d("RoundSpinView", "angle:"+angle); 
  72.         for(int index=0; index<STONE_COUNT; index++) {            
  73.             mStones[index].angle = angle;        
  74.             angle += mDegreeDelta; 
  75.         } 
  76.     } 
  77.      
  78.     /**
  79.      * 计算每个点的坐标
  80.      */ 
  81.     private void computeCoordinates() { 
  82.         BigStone stone; 
  83.         for(int index=0; index<STONE_COUNT; index++) { 
  84.             stone = mStones[index]; 
  85.             stone.x = mPointX+ (float)(mRadius * Math.cos(stone.angle*Math.PI/180)); 
  86.             stone.y = mPointY+ (float)(mRadius * Math.sin(stone.angle*Math.PI/180)); 
  87.         } 
  88.     } 
  89.      
  90.     /**
  91.      * 计算第一个点的角度
  92.      * @param x
  93.      * @param y
  94.      * @return
  95.      */ 
  96.     private int computeCurrentAngle(float x, float y) {      
  97.         float distance = (float)Math.sqrt(((x-mPointX)*(x-mPointX) + (y-mPointY)*(y-mPointY))); 
  98.         int degree = (int)(Math.acos((x-mPointX)/distance)*180/Math.PI); 
  99.         if(y < mPointY) { 
  100.             degree = -degree; 
  101.         } 
  102.          
  103.         Log.d("RoundSpinView", "x:"+x+",y:"+y+",degree:"+degree); 
  104.         return degree; 
  105.     } 
  106.      
  107.     @Override 
  108.     public boolean dispatchTouchEvent(MotionEvent event) { 
  109.         resetStonesAngle(event.getX(), event.getY()); 
  110.         computeCoordinates(); 
  111.         invalidate(); 
  112.         return true; 
  113.     } 
  114.      
  115.     @Override 
  116.     public void onDraw(Canvas canvas) { 
  117.         canvas.drawPoint(mPointX, mPointY, mPaint); 
  118.          
  119.         for(int index=0; index<STONE_COUNT; index++) { 
  120.             if(!mStones[index].isVisible) continue; 
  121.             drawInCenter(canvas, mStones[index].bitmap, mStones[index].x, mStones[index].y); 
  122.             //不想有红线，就注掉下面这句 
  123. //          canvas.drawLine(mPointX, mPointY, mStones[index].x, mStones[index].y, mPaint); 
  124.         } 
  125.     } 
  126.      
  127.     /**
  128.      * 把中心点放到中心处
  129.      * @param canvas
  130.      * @param bitmap
  131.      * @param left
  132.      * @param top
  133.      */ 
  134.     void drawInCenter(Canvas canvas, Bitmap bitmap, float left, float top) { 
  135.         canvas.drawPoint(left, top, mPaint); 
  136.         canvas.drawBitmap(bitmap, left-bitmap.getWidth()/2, top-bitmap.getHeight()/2, null); 
  137.     }    
  138.      
  139.     class BigStone { 
  140.          
  141.         //图片 
  142.         Bitmap bitmap; 
  143.          
  144.         //角度 
  145.         int angle; 
  146.          
  147.         //x坐标 
  148.         float x; 
  149.          
  150.         //y坐标 
  151.         float y; 
  152.          
  153.         //是否可见 
  154.         boolean isVisible = true; 
  155.     } 
  156. }  
package chroya.demo.roundspin;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * 圆盘式的view
 * @author chroya
 *
 */
public class RoundSpinView extends View {
	private Paint mPaint = new Paint();
	
	//stone列表
	private BigStone[] mStones;
	//数目
	private static final int STONE_COUNT = 6;
	
	//圆心坐标
	private int mPointX=0, mPointY=0;
	//半径
	private int mRadius = 0;
	//每两个点间隔的角度
	private int mDegreeDelta;

	public RoundSpinView(Context context, int px, int py, int radius) {
		super(context);
		mPaint.setColor(Color.RED);
		mPaint.setStrokeWidth(2);
		setBackgroundResource(R.drawable.menubkground);
		
		mPointX = px;
		mPointY = py;
		mRadius = radius;
		
		setupStones();
		computeCoordinates();
	}
	
	/**
	 * 初始化每个点
	 */
	private void setupStones() {
		mStones = new BigStone[STONE_COUNT];
		BigStone stone;
		int angle = 0;
		mDegreeDelta = 360/STONE_COUNT;
		
		for(int index=0; index<STONE_COUNT; index++) {
			stone = new BigStone();
			stone.angle = angle;
			stone.bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.menu1+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(stone.angle*Math.PI/180));
			stone.y = mPointY+ (float)(mRadius * Math.sin(stone.angle*Math.PI/180));
		}
	}
	
	/**
	 * 计算第一个点的角度
	 * @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;
	}
	
	@Override
	public boolean dispatchTouchEvent(MotionEvent event) {
		resetStonesAngle(event.getX(), event.getY());
		computeCoordinates();
		invalidate();
		return true;
	}
	
	@Override
	public void onDraw(Canvas canvas) {
		canvas.drawPoint(mPointX, mPointY, 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);
			//不想有红线，就注掉下面这句
//			canvas.drawLine(mPointX, mPointY, mStones[index].x, mStones[index].y, mPaint);
		}
	}
	
	/**
	 * 把中心点放到中心处
	 * @param canvas
	 * @param bitmap
	 * @param left
	 * @param top
	 */
	void drawInCenter(Canvas canvas, Bitmap bitmap, float left, float top) {
		canvas.drawPoint(left, top, mPaint);
		canvas.drawBitmap(bitmap, left-bitmap.getWidth()/2, top-bitmap.getHeight()/2, null);
	}	
	
	class BigStone {
		
		//图片
		Bitmap bitmap;
		
		//角度
		int angle;
		
		//x坐标
		float x;
		
		//y坐标
		float y;
		
		//是否可见
		boolean isVisible = true;
	}
}

       代码里注释也很清楚。STONE_COUNT表示菜单的数目，可以设置为1到7，更大的数字需要图片支持，我只放了7张图片。

       如果触摸的点不在圆周上，会自动计算出点到圆心的直线跟圆的交点，然后映射上去。

       5个菜单的效果，画了线的：

       6个菜单的效果：

          Ok，代码也贡献出来。

 

zhuanzi:http://chroya.iteye.com/blog/830682

xinyuetonghua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android圆盘菜单效果
YiRong
04-26 2341
public class TurnplateView extends View implements OnTouchListener { private OnTurnplateListener onTurnplateListener; public void setOnTurnplateListener(OnTurnplateListener onTurnplateListener
Android自定义半圆形圆盘滚动选择器
08-27
Android 自定义半圆形圆盘滚动选择器 Android 自定义半圆形圆盘滚动选择器是一种高级的自定义控件，用于实现半圆形圆盘滚动选择器的效果。该控件可以满足项目中的特效需求，提供了自定义的控件和功能。 知识点： ...
Android圆盘旋转菜单实例.rar
07-10
【Android圆盘旋转菜单实例】是一个专为移动设备设计的创新UI组件，它提供了一种独特的方式来展示菜单选项。这个菜单的设计灵感来源于淘宝客户端的圆形菜单，用户可以通过手势或者点击触发菜单的旋转动画，从而优雅...
Android应用源码之圆盘菜单.zip
最新发布
09-01
"Android应用源码之圆盘菜单.zip"这个压缩包显然包含了实现这种圆盘菜单功能的源代码，对于开发者来说，它是一个宝贵的资源，可以用来学习和借鉴。 首先，我们要理解"源码"的重要性。在编程世界中，源码是程序的...
android 高仿优酷圆盘菜单
09-12
自定义组件，仿优酷圆盘菜单。动画类的编写，修正各种小BUG，提升用户体验。欢迎下载交流学习！
android 自定义控件--（圆盘形菜单控件）
跟踪世界脚步
10-08 895
思路原理： 定一个原点和一个半径，圆的四周均匀分布每个菜单。为了方便计算，菜单的坐标用度数表示，然后转化为极坐标计算。定某个点为起始点，根据总菜单数确定每个点增加的度数，然后依次确定每个点的度数，也就确定了坐标。   源代码： [html] view plaincopy package chroya.demo.roundspin;  
android圆形旋转菜单，可以选择和点击，转动的环形菜单
09-29
请笑纳，这是一个android圆形旋转菜单，可以选择和点击，转动的环形菜单
Android圆形旋转菜单.rar
12-03
Android圆形旋转菜单.rar
圆盘旋转菜单
04-22
NULL 博文链接：https://jykenan.iteye.com/blog/1931867
android 右下角弹出1/4圆盘菜单的效果
12-06
android 右下角弹出1/4圆盘菜单的效果，默认只显示一个加号的图标，点击后动画弹出1/4圆形的两层菜单
圆盘旋转菜单的实现
04-13
圆盘旋转菜单的实现
android椭圆转盘菜单,Android CircleMenu：旋转转盘选择Menu
weixin_35996612的博客
05-26 504
Android CircleMenu：旋转转盘选择MenuAndroid CircleMenu是一个可以自由旋转类似转盘样式的选择Menu。其运行效果如动态图所示： 这在中国建设银行官方的APP中有用到该技术，下图这是中国建设银行官方APP的首页，其中的转盘明显就是一个Android CircleMenu： Android CircleMenu在github上的项目主页是：https://gi...
CircleMenu Android圆形菜单类似抽奖转盘的实现
(:3|❀)我要睡觉了，请帮我关一下灯，谢谢
11-02 1283
如题，一个圆形菜单 / 抽奖转盘的改版
android 自己动手画一个圆形菜单
suyiyang888的专栏
03-24 1185
本文使用画笔Paint来自定义一个半圆形的菜单 如下图： demo下载地址：http://download.csdn.net/detail/suyiyang888/8528707 一、定义类CircleMenu继承View，重写三个构造函数 二、在onLayout(boolean changed, int left, int top, int right,int
android 转盘菜单,Android实现可点击的幸运大转盘
weixin_29483277的博客
05-26 588
之前的项目有一个幸运大转盘的功能，在网上找了很久，都没有合适的方法。这是效果图，实现目标：十二星座的图片可点击切换选中效果，根据选择不同的星座，实现不同的 方法。之前网上的都是带有指针的，或者可点击改变效果，但是并不知道选择的到底是哪个，即虚拟选择。实现该功能的主要代码如下：1、自定义一个布局，存放图片，实现圆形布局。/***** CircleMenuLayout.java** @author w...
Android开发：实现圆形Menu菜单实战教程
"这篇教程主要讲解如何在Android应用中创建一个圆形的Menu菜单，适合Android开发者学习和参考。通过实例代码展示了如何实现这一功能，包括对各个按钮的初始化和点击事件的处理。" 在Android开发中，创建一个独特且...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值