androidSectorMenuView底部导航扇形菜单的实现代码-创新互联

这次分析一个扇形菜单展开的自定义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()