android SectorMenuView底部导航扇形菜单的实现代码

这篇文章主要介绍了android SectorMenuView底部导航扇形菜单的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这次分析一个扇形菜单展开的自定义View, 也是我实习期间做的一个印象比较深刻的自定义View, 前后切换了很多种实现思路, 先看看效果展示

效果展示

效果分析

  1. 点击圆形的FloatActionBar, 自身旋转一定的角度
  2. 菜单像波纹一样扩散开来
  3. 显示我们添加的item

实现分析

使用adapter适配器去设置View, 用户可自定义性强, 不过每次使用需要去设置Adapter, 较为繁琐

直接调用ItemView, 将ImageView和TextView写死, 用户操作简单, 但是缺乏可定制性(利他)

本次功能实现采用了方案 2

实现步骤

  1. 与气泡拖拽类似, 新开启一个Window进行自定义View的绘制
  2. 初始化时调用setWillNotDraw(false)方法, 强行启动ViewGroup的绘制
  3. onMeasure中将宽高写死
  4. 绘制背景
    1. 锚点为View的底部中心点
    2. 半径为屏幕宽度一半的平方和的开方(注意这里不是屏幕的一半)
  5. 添加itemView, 在onLayout中去确定其位置
  6. 添加动画效果
  7. 将相关接口暴露给外界

使用方式

 BottomSectorMenuView.Converter(mFab) .setToggleDuration(500, 800) .setAnchorRotationAngle(135f) .addMenuItem(R.drawable.icon_camera, "拍照") { Toast.makeText(this@MainActivity, "拍照", Toast.LENGTH_SHORT).show() } .addMenuItem(R.drawable.icon_photo, "图片") { Toast.makeText(this@MainActivity, "图片", Toast.LENGTH_SHORT).show() } .addMenuItem(R.drawable.icon_text, "文字") { Toast.makeText(this@MainActivity, "文字", Toast.LENGTH_SHORT).show() } .addMenuItem(R.drawable.icon_video, "视频") { Toast.makeText(this@MainActivity, "视频", Toast.LENGTH_SHORT).show() } .addMenuItem(R.drawable.icon_camera_shooting, "摄像") { Toast.makeText(this@MainActivity, "摄像", Toast.LENGTH_SHORT).show() } .apply() 

源码实现

 /** * Email: frankchoochina@gmail.com * Created by FrankChoo on 2017/10/9. * Description: 底部扇形菜单, 通过Adapter添加Item *       1. 调用openMenu打开菜单 *       2. 调用closeMenu关闭菜单 */ public class SectorMenuView extends FrameLayout { // 每个ItemView之间的角度差 private double mAngle; // 圆心坐标 private Point mCenterPoint; // ItemView到圆心的半径 private float mMaxItemRadius; private float mCurItemRadius; // 背景圆的半径 private float mMaxBkgRadius; private float mCurBkgRadius; private Paint mPaint; private SectorMenuAdapter mAdapter; private OnMenuOpenedListener mMenuOpenedListener; private OnMenuClosedListener mMenuClosedListener; public SectorMenuView(Context context) { this(context, null); } public SectorMenuView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SectorMenuView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 初始化画笔 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setDither(true); mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(Color.WHITE); // 设置背景圆绘制的半径 int displayWidth = getResources().getDisplayMetrics().widthPixels; mMaxBkgRadius = (int) Math.sqrt(Math.pow(displayWidth/2, 2.0) + Math.pow(displayWidth/2, 2.0)); // 开启ViewGroup的绘制 setWillNotDraw(false); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 这里直接将宽高写死, 不支持Margin int width = getResources().getDisplayMetrics().widthPixels; int height = (int) Math.sqrt(Math.pow(width / 2, 2.0) + Math.pow(width / 2, 2.0)); setMeasuredDimension(width, height); // 计算半径 int realWidth = width - getPaddingRight() - getPaddingLeft(); int realHeight = height - getPaddingTop() - getPaddingBottom(); mMaxItemRadius = realWidth / 2; // 计算圆心 int centerX = getPaddingLeft() + realWidth / 2; int centerY = getPaddingTop() + realHeight; mCenterPoint = new Point(centerX, centerY); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); for (int i = 0; i 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。

以上就是android SectorMenuView底部导航扇形菜单的实现代码的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动