圆形可滑动菜单（可以动态添加菜单项）

最新推荐文章于 2024-02-02 15:04:20 发布
最新推荐文章于 2024-02-02 15:04:20 发布
阅读量7.1k 收藏 18
点赞数 11
分类专栏： android小例子 Android小例子 文章标签： action Action android Android distance 圆形 菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilu_leo/article/details/8267699
版权

  首先想要说明一下，这个Demo例子是从eoeAndroid上面Download下来的，本文里只是解析，学习一下实现原理。从昨天开始就想分析下，一直拖到今天，不到5点，睡不着了（当然不是因为这个技术问题），就趁着早晨把他写下来吧，多有不足，请多多原谅。

下面开始正题 ，先看下程序运行是图片：



然后你可以拖动圆形菜单外面项到圆形菜单中：



开始正式的代码解析：

主Activity的onCreate：

@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		mNewView = new NewView(getApplicationContext(), 300, 200, 150);
		setContentView(mNewView);
		new Thread(new myThread()).start();
	}

里面自定义了一个NewView类，继承自View，就是我们第一张图显示的内容，然后又起了一个线程： 

class myThread implements Runnable {
		public void run() {
			while (!Thread.currentThread().isInterrupted()) {
				Message message = new Message();
				switch (mNewView.getReturn()) {
				case 1:
					message.what = 0x101;
					break;
				case 2:
					message.what = 0x102;
					break;
				case 3:
					message.what = 0x103;
					break;
				case 4:
					message.what = 0x104;
					break;
				case 5:
					message.what = 0x105;
					break;
				case 6:
					message.what = 0x106;
					break;
				case 7:
					message.what = 0x107;
					break;
				case 8:
					message.what = 0x108;
					break;
				case 9:
					message.what = 0x109;
					break;
				}
				QSA.this.myHandler.sendMessage(message);
				try {
					Thread.sleep(10);
				} catch (InterruptedException e) {
					Thread.currentThread().interrupt();
				}
			}

这个线程就是监听图片有滑动的时候，通过Handler发送一个消息到UI线程，进行相对应的操作： 

Handler myHandler = new Handler() {
		public void handleMessage(Message msg) {
//			newView.getReturn = -1;
			switch (msg.what) {
			case 0x101:
				break;			
			case 0x102:
				break;
			case 0x103:
				mIntent = new Intent(getApplicationContext(), ShowPic.class);
				startActivity(mIntent);
				break;
			case 0x104:
				break;
			case 0x105:
				break;
			case 0x106:
				break;
			case 0x107:
				mIntent = new Intent(getApplicationContext(), RunLed.class);
				startActivity(mIntent);
				break;
			case 0x108:
				break;
			case 0x109:
				break;
			}

			super.handleMessage(msg);
		}
	};

其主要内容在与NewView类，下面我们看下这个类： 
public class NewView extends View {
	//返回值，用于调用者获取newView状态
	protected static int mGetReturn = -1;
	private Paint mPaint = new Paint();
	// stone列表
	private BigStone[] mStones;
	int mode = NONE;
	static final int NONE = 0;
	//拖动
	static final int DRAG = 1;
	//用于双指视图缩放
	static final int ZOOM = 2;
	//存放数据的数组
	private BigStone[] mMenus;
	private BigStone[] mAddMenus = new BigStone[MENUS];
	// 数目
	private static int STONE_COUNT = 5;
	private static int MENUS = 4;
	// 圆心坐标
	private float mPointX = 0, mPointY = 0;
	private int flagwai = 0;
	private int flag = 0;
	// 半径
	private int mRadius = 0;
	// 每两个点间隔的角度
	private int mDegreeDelta;
	private float maxX, maxY, minX, minY;

上面是一些全局变量，都加上了注释，比较好理解。

看它的构造方法：

public NewView(Context context, int px, int py, int radius) {
		super(context);
		//为圆心和半径赋值
		mPointX = px;
		mPointY = py;
		mRadius = radius;

		setBackgroundResource(R.drawable.menubkground);
		//设置菜单项（为两个菜单项赋值）
		setupStones();
		//计算坐标
		computeCoordinates();
	}

先看一下setupStone方法： 

private void setupStones() {
		mStones = new BigStone[STONE_COUNT];
		mMenus = new BigStone[MENUS];
		BigStone stone;
		BigStone menus;
		//初始角度
		int angle = 0;
		//每项之间相隔角度
		mDegreeDelta = 360 / STONE_COUNT;
		//初始圆形菜单外的项
		if (flagwai == 0) {
			for (int i = 0; i < MENUS; i++) {
				menus = new BigStone();
				menus.bitmap = BitmapFactory.decodeResource(getResources(),
						R.drawable.menu6 + i);
				menus.text = String.valueOf(1 + i);
				mMenus[i] = menus;
			}
		}
		//初始化圆形菜单项
		for (int index = 0; index < STONE_COUNT; index++) {
			stone = new BigStone();
			stone.angle = angle;
			stone.bitmap = BitmapFactory.decodeResource(getResources(),
					R.drawable.menu1 + index);
			stone.text = String.valueOf(1 + index);
			//每一项的角度
			angle += mDegreeDelta;

			mStones[index] = stone;
		}
	}

里面该加注释的地方，我都加了注释，比较简单，不多说了，里面用到了一个BigStone的实体类： 

class BigStone {
		// 图片
		Bitmap bitmap;
		// 角度
		int angle;
		// x坐标
		float x;
		// y坐标
		float y;
		String text;
		// 是否可见
		boolean isVisible = true;
	}

用于存储每一项的各个数据。

computeCoordinates，计算每一项的坐标：

private void computeCoordinates() {
		BigStone stone;
		BigStone menus;
		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));
		}
		if (flag == 0) {
			for (int i = 0; i < MENUS; i++) {
				menus = mMenus[i];
				switch (i) {
				case 0:
					menus.x = 300 * 1.8f;
					menus.y = 50;
					break;
				case 1:
					menus.x = 300 * 1.8f + 100;
					menus.y = 50;
					break;
				case 2:
					menus.x = 300 * 1.8f + 200;
					menus.y = 50;
					break;
				case 3:
					menus.x = 300 * 1.8f;
					menus.y = 150;
					break;
					//MENUS设置为4，下面这个应该是多余的
				case 4:
					menus.x = 300 * 1.8f + 10 + 100;
					menus.y = 250;
					break;

				}
			}
		}
	}

设置好各项参数，就应该绘制： 

@Override
	public void onDraw(Canvas canvas) {
		Paint paint = new Paint();
		paint.setAntiAlias(true);
		paint.setColor(Color.WHITE);
		paint.setStyle(Paint.Style.FILL);
		paint.setAlpha(0x30);
		if (change == 0) {
			//绘制中心小圆
			canvas.drawCircle(mPointX, mPointY, mRadius - 80, paint);
		}
		paint.setStyle(Paint.Style.FILL);
		paint.setAntiAlias(true);
		paint.setColor(Color.BLUE);
		paint.setAlpha(0x30);
		if (change == 0) {
			canvas.drawCircle(mPointX, mPointY, mRadius + 41, paint); // 大圆
		}

		if (change == 1) {
			//满足一个条件不绘制圆盘菜单，绘制矩形菜单。
			canvas.drawRect(800, 240, 0, 140, paint);
		}
		//绘制每一个外部菜单项
		for (int i = 0; i < MENUS; i++) {
			if (!mMenus[i].isVisible)
				continue;
			drawMenus(canvas, mMenus[i].bitmap, mMenus[i].x, mMenus[i].y);
		}
		//绘制每一个园内菜单
		for (int index = 0; index < STONE_COUNT; index++) {
			if (!mStones[index].isVisible)
				continue;
			drawInCenter(canvas, mStones[index].bitmap, mStones[index].x,
					mStones[index].y, mStones[index].text);

		}
	}

先绘制小圆，然后是大圆：


绘制菜单项时，调用了drawMenus和drawInCenter方法：

void drawMenus(Canvas canvas, Bitmap b, float x, float y) {
		canvas.drawBitmap(b, x - b.getWidth() / 2, y - b.getHeight() / 2, null); // 图标
	}

	void drawInCenter(Canvas canvas, Bitmap bitmap, float left, float top,
			String text) {
		canvas.drawText(text, left, top, mPaint);
		canvas.drawBitmap(bitmap, left - bitmap.getWidth() / 2,
				top - bitmap.getHeight() / 2, null);
	}

下面就是触发事件的处理： 

@Override
	public boolean dispatchTouchEvent(MotionEvent e) {
		dumpEvent(e);
		switch (e.getAction() & MotionEvent.ACTION_MASK) {
		case MotionEvent.ACTION_DOWN:
			//判断选中的是哪个点
			for (int i = 0; i < STONE_COUNT; i++) {
				if (e.getX() >= mStones[i].x - 20
						&& e.getX() <= mStones[i].x + 40
						&& e.getY() >= mStones[i].y
						&& e.getY() <= mStones[i].y + 40) {

					if (i < 5) {
						mGetReturn = Integer.valueOf(mStones[i].text);
					} else {
						mGetReturn = Integer.valueOf(mStones[i].text) + 5;
					}
					Toast.makeText(getContext(), String.valueOf(mGetReturn),
							Toast.LENGTH_SHORT).show();

				}
			}
			//把mode设为拖动
			mode = DRAG;
			return true;

		case MotionEvent.ACTION_POINTER_DOWN:
			//获取两点间的距离
			oldDist = spacing(e);
			if (oldDist > 100f) {
				mode = ZOOM;
			}
			return true;

		case MotionEvent.ACTION_MOVE:
			//获取最大最小坐标
			getMaxMin(e);
			if (mode == DRAG) {
			} else if (mode == ZOOM) {
				//获取两点间的距离
//				float newDist = spacing(e);
//				if (newDist > 100f) {
//					/*
//					 * if (change == 0) { change = 1;
//					 * 
//					 * resetStonesAngle(e.getX(), e.getY());
//					 * computeCoordinates(); invalidate(); }
//					 */
//				}
			}
			int a = 0;
			for (int i = 0; i < MENUS; i++) {
				if (e.getX() > mMenus[i].x - 40 && e.getX() < mMenus[i].x + 40
						&& e.getY() > mMenus[i].y - 40
						&& e.getY() < mMenus[i].y + 40) {
					mMenus[i].x = e.getX();
					mMenus[i].y = e.getY();
					flag = 1;
					computeCoordinates();
					//重新绘制
					postInvalidate();

					//从外面添加到圆形菜单中
					if (e.getX() < maxX && e.getX() > minX && e.getY() < maxY
							&& e.getY() > minY) {
						if (mMenus[i].isVisible) {
							for (int j = 0; j < MENUS; j++) {
								if (mAddMenus[j] == null && a == 0) {
									mAddMenus[j] = mMenus[i];
									a = 1;
								}
							}
							STONE_COUNT++;
							mDegreeDelta = 360 / STONE_COUNT;
							mStones = new BigStone[STONE_COUNT];
							flagwai = 1;
							int angle = 0;
							BigStone stone;
							for (int index = 0; index < STONE_COUNT; index++) {
								stone = new BigStone();

								if (index < 5) {
									stone.bitmap = BitmapFactory
											.decodeResource(getResources(),
													R.drawable.menu1 + index);
									stone.text = String.valueOf(1 + index);
								} else {
									stone.bitmap = mAddMenus[index - 5].bitmap;
									stone.text = mAddMenus[index - 5].text;
								}
								stone.angle = angle;
								angle += mDegreeDelta;
								mStones[index] = stone;
							}
							//把添加到圆内菜单项中的外部Item设为不可见,是不是可以考虑移除？
							
							mMenus[i].isVisible = false;
						}
					}
					break;
				}
			}

			if (e.getX() < maxX && e.getX() > minX && e.getY() < maxY
					&& e.getY() > minY) {
				if (e.getX() < maxX - 80 && e.getX() > minX + 81
						&& e.getY() < maxY - 80 && e.getY() > minY + 81) {
					mPointX = e.getX();
					mPointY = e.getY();
				}
				//重新设置每个item的角度
				resetStonesAngle(e.getX(), e.getY());
				//重新设置每一个item的坐标
				computeCoordinates();
				//重绘
				invalidate();
			}
			break;

		case MotionEvent.ACTION_UP:
			break;

		case MotionEvent.ACTION_POINTER_UP:
			mode = NONE;
			break;
		}
		return super.dispatchTouchEvent(e);
	}


先看以下事件：

  • MotionEvent.ACTION_DOWN：在第一个点被按下时触发
  • MotionEvent.ACTION_UP:当屏幕上唯一的点被放开时触发
  • MotionEvent.ACTION_POINTER_DOWN:当屏幕上已经有一个点被按住，此时再按下其他点时触发。
  • MotionEvent.ACTION_POINTER_UP:当屏幕上有多个点被按住，松开其中一个点时触发（即非最后一个点被放开时）。
  • MotionEvent.ACTION_MOVE：当有点在屏幕上移动时触发。值得注意的是，由于它的灵敏度很高，而我们的手指又不可能完全静止（即使我们感觉不到移动，但其实我们的手指也在不停地抖动），所以实际的情况是，基本上只要有点在屏幕上，此事件就会一直不停地被触发。

举例子来说：当我们放一个食指到屏幕上时，触发ACTION_DOWN事件；再放一个中指到屏幕上，触发ACTION_POINTER_DOWN事件；此时再把食指或中指放开，都会触发ACTION_POINTER_UP事件；再放开最后一个手指，触发ACTION_UP事件；而同时在整个过程中，ACTION_MOVE事件会一直不停地被触发。

逐个事件分析一下： 

case MotionEvent.ACTION_DOWN:
			//判断选中的是哪个点
			for (int i = 0; i < STONE_COUNT; i++) {
				if (e.getX() >= mStones[i].x - 20
						&& e.getX() <= mStones[i].x + 40
						&& e.getY() >= mStones[i].y
						&& e.getY() <= mStones[i].y + 40) {

					if (i < 5) {
						mGetReturn = Integer.valueOf(mStones[i].text);
					} else {
						mGetReturn = Integer.valueOf(mStones[i].text) + 5;
					}
					Toast.makeText(getContext(), String.valueOf(mGetReturn),
							Toast.LENGTH_SHORT).show();

				}
			}
			//把mode设为拖动
			mode = DRAG;
			return true;

判断点击的是哪一项，然后弹出一个Toast提示。 

case MotionEvent.ACTION_POINTER_DOWN:
			//获取两点间的距离
			oldDist = spacing(e);
			if (oldDist > 100f) {
				mode = ZOOM;
			}
			return true;

多点触发，这里只是算了一下距离，没做什么处理，如有需要，可以添加一些功能代码。里面用到了spacing方法： 

private float spacing(MotionEvent event) {
		float x = event.getX(0) - event.getX(1);
		float y = event.getY(0) - event.getY(1);
		return FloatMath.sqrt(x * x + y * y);
	}

该方法用于获取两点间的距离。

move：

case MotionEvent.ACTION_MOVE:
			//获取最大最小坐标
			getMaxMin(e);
			if (mode == DRAG) {
			} else if (mode == ZOOM) {
				//获取两点间的距离
//				float newDist = spacing(e);
//				if (newDist > 100f) {
//					/*
//					 * if (change == 0) { change = 1;
//					 * 
//					 * resetStonesAngle(e.getX(), e.getY());
//					 * computeCoordinates(); invalidate(); }
//					 */
//				}
			}
			int a = 0;
			for (int i = 0; i < MENUS; i++) {
				if (e.getX() > mMenus[i].x - 40 && e.getX() < mMenus[i].x + 40
						&& e.getY() > mMenus[i].y - 40
						&& e.getY() < mMenus[i].y + 40) {
					mMenus[i].x = e.getX();
					mMenus[i].y = e.getY();
					flag = 1;
					computeCoordinates();
					//重新绘制
					postInvalidate();

					//从外面添加到圆形菜单中
					if (e.getX() < maxX && e.getX() > minX && e.getY() < maxY
							&& e.getY() > minY) {
						if (mMenus[i].isVisible) {
							for (int j = 0; j < MENUS; j++) {
								if (mAddMenus[j] == null && a == 0) {
									mAddMenus[j] = mMenus[i];
									a = 1;
								}
							}
							STONE_COUNT++;
							mDegreeDelta = 360 / STONE_COUNT;
							mStones = new BigStone[STONE_COUNT];
							flagwai = 1;
							int angle = 0;
							BigStone stone;
							for (int index = 0; index < STONE_COUNT; index++) {
								stone = new BigStone();

								if (index < 5) {
									stone.bitmap = BitmapFactory
											.decodeResource(getResources(),
													R.drawable.menu1 + index);
									stone.text = String.valueOf(1 + index);
								} else {
									stone.bitmap = mAddMenus[index - 5].bitmap;
									stone.text = mAddMenus[index - 5].text;
								}
								stone.angle = angle;
								angle += mDegreeDelta;
								mStones[index] = stone;
							}
							//把添加到圆内菜单项中的外部Item设为不可见,是不是可以考虑移除？
							
							mMenus[i].isVisible = false;
						}
					}
					break;
				}
			}

			if (e.getX() < maxX && e.getX() > minX && e.getY() < maxY
					&& e.getY() > minY) {
				if (e.getX() < maxX - 80 && e.getX() > minX + 81
						&& e.getY() < maxY - 80 && e.getY() > minY + 81) {
					mPointX = e.getX();
					mPointY = e.getY();
				}
				//重新设置每个item的角度
				resetStonesAngle(e.getX(), e.getY());
				//重新设置每一个item的坐标
				computeCoordinates();
				//重绘
				invalidate();
			}
			break;

里面就是各种判断，然后重新计算角度、坐标等，最后重新绘制。

里面有getMaxMin方法：

private void getMaxMin(MotionEvent e) {
		float tempx;
		float tempy;
		for (int i = 0; i < STONE_COUNT; i++) {
			for (int j = 0; j < STONE_COUNT; j++) {

				if (mStones[i].x < mStones[j].x) {
					tempx = mStones[i].x;
					mStones[i].x = mStones[j].x;
					mStones[j].x = tempx;
				}
				if (mStones[i].y < mStones[j].y) {
					tempy = mStones[i].y;
					mStones[i].y = mStones[j].y;
					mStones[j].y = tempy;
				}
			}
		}
		maxX = mStones[STONE_COUNT - 1].x;
		minX = mStones[0].x;
		maxY = mStones[STONE_COUNT - 1].y;
		minY = mStones[0].y;
	}

通过重新排序，获取最大最小坐标点。

里面的计算角度方法：

private void resetStonesAngle(float x, float y) {
		int angle = computeCurrentAngle(x, y);
		for (int index = 0; index < STONE_COUNT; index++) {
			mStones[index].angle = angle;
			angle += mDegreeDelta;
		}
	}

	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;
		}
		return degree;
	}

好吧，就先写到这吧，饿了，先吃点东西。一会把代码上传上去，先吃点东西。



最后源代码下载地址：http://download.csdn.net/detail/aomandeshangxiao/4857216


傲慢的上校
关注
  • 11
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
圆形滑动菜单源码.zip
11-03
圆形滑动菜单源码.zip
好看的轮盘菜单组件
01-20
插件描述：利用jquery实现的轮盘菜单组件. 参考示例：http://www.jq22.com/jquery-info5594
圆形菜单，可滑动
04-28
圆形菜单 可滑动 可配置 不知哪个大牛写的，超牛逼！
圆环菜单栏
03-14 793
需求：圆环菜单栏 1.界面显示5个按钮，圆弧排列 2.左右滑动，按钮可以在圆弧轨迹上滚动 3.点击按钮，按钮滚动到中间 4.中间位置按钮放大 思路： 1.先画外圆，按钮位于大圆内部 2.实现滑动的时候按钮按圆环轨迹移动 滑动的时候计算每个按钮的x值，再根据公式计算y的值 因为（x-a）^2 + (y - b)^2 = r^2 所以y = sqrt(r^2 - (x-a)^2) + b 这样滑动的时候可以遍历所有按钮，重新赋值x，y的值 3.还是在滑动的时候计算出每个按钮的角..
html5 动画选项卡菜单,HTML5 SVG超炫环状导航菜单动画特效
weixin_31289551的博客
06-04 717
wheelnav是一款效果非常炫酷的HTML5 SVG环状导航菜单动画特效js插件。该环状导航菜单插件基于Rapha?l.js，可以制作各种带动画特效的饼状菜单、环形菜单和径向菜单等等。该环状导航菜单可以工作在所有的桌面和移动手机的现代浏览器上。它的应用场景有：选项卡导航菜单饼状菜单、环形菜单和径向菜单各类子菜单选项按钮可以当复选框使用还有更多...安装可以通过bower或npm来安装该插件。$ ...
vue实现横向弧形滚动菜单
weixin_42409911的博客
07-16 1827
实现横向弧形滚动 上代码 startDragItem() 鼠标按下的方法， dragItem() 鼠标拖拽的方法， endDragItem() 鼠标抬起的方法， <template> <div class="navigationPage_Fa" @mouseup="endDragItem()" v-if="HeaderName === '首页导航'" > <div class="item_Fa"> <div
ios 圆形旋转菜单_iOS实现滑动弧形菜单的思路与方法
weixin_34039159的博客
12-28 854
前言最近公司的项目中需要用到弧形菜单，起初自定义UICollectionView的layout，但实现出的效果并不符合项目中要求按钮始终垂直于界面、界面始终保持几个按钮等一系列需求(是我水平不够)，后来索性用UIView写了一个弧形可滑动菜单。效果如下:实现思路：1、根据思路可以自己确定到半径与圆心的每个按钮所在的x点，可根据数学公式求得y点2、给按钮添加拖动手势UIPanGestureRecog...
CircleMenu V1.0 环形菜单
11-22
资源介绍 https://blog.csdn.net/newtonsm/article/details/84344588
Unity UGUI自定义树形菜单（TreeView）
热门推荐
神码编程
02-08 2万+
先上几张效果图： 如果你需要的也是这种效果，那你就来对地方了！ 目前，我们这个树形菜单展现出来的功能如下： 1、可以动态配置数据源； 2、点击每个元素的上下文菜单按钮（也就是图中的三角形按钮），可以收缩或展开它的子元素； 3、可以单独判断某一元素的复选框是否被勾选，或者直接获取当前树形菜单中所有被勾选的元素； 4、树形菜单统一控制其下所有子元素按钮的事件...
滑动圆形菜单(Menu)
04-03
滑动圆形菜单(Menu)，这个效果设计的很漂亮的，并且源码的注释非常详细的，很容易使用的一个比较炫的菜单效果。
android漂亮的圆形旋转菜单
07-09
android圆形旋转菜单，友友们我会更新更多的源码和大家分享，希望大家喜欢。..
仿美团、百度外卖左右滑动的选项卡菜单
11-15
仿美团、百度外卖左右滑动的网格选项卡菜单列表
菜单滚动
03-21
NULL 博文链接：https://gang-zai.iteye.com/blog/935064
非常漂亮的环形菜单
05-09
非常漂亮的环形菜单代码，需要的朋友拿去。
jQuery UI可拖拽弹性圆形菜单按钮特效
06-05
jQuery UI可拖拽弹性圆形菜单按钮特效是一款可以通过点击一个圆形按钮来弹出4个子菜单按钮的网页导航菜单动画效果。
jQueryUI可拖拽弹性圆形菜单.zip
07-11
jQuery UI可拖拽弹性圆形菜单是一款可以通过点击一个圆形按钮来弹出4个子菜单按钮。
圆形可转动菜单栏
12-06
圆形自定义的可以转动的自定义菜单栏控件，可扩展性极强，代码简单易懂，集成方便，界面美观便捷
【css js vue】超详细！！实现 tab菜单 动态滑动效果
最新发布
Youweretrouble的博客
02-02 913
最近产品经理给我提了个新需求，希望能实现tab菜单切换时的滑动效果。上面这是我做的效果图，在查找了一些资料之后，发现实现起来并没有特别的麻烦，但是对于我这种CSS学的不是很好的人，前期看起来还是有点懵的，所以写篇文章记录下我最终实现的效果。提示：以下是本篇文章正文内容，下面案例可供参考我讲述的应该是比较详细了，相信大家看了应该也能实现滑动功能。但是有一些内容我感觉写的比较繁琐，比如 每次切换的时候，也许聪明的你能用js函数实现left值的改变。大家一起加油。
android半圆形可滑动菜单
09-04
另外，还有一些开源库可以帮助快速实现半圆形可滑动菜单，如"RevealMenu"、"ArcMenu"和"RadialMenu"等。使用这些库可以节省大量开发时间，并提供丰富的样式和效果选择。 总结而言，Android半圆形可滑动菜单是一种...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值