CircleMenu
======================================================
目录
简介
CircleMenu - 这是一个简单的菜单,其中包含环绕成一圈的按钮。它支持两个平台上的左右/上/下 swipe 操作。每个按钮都可以包含子菜单,其中包含其他按钮。子菜单按钮有两种状态:打开和关闭。在关闭状态下,子菜单按钮不可见,父按钮有一个蓝色的指示器。如果子菜单按钮处于打开状态,它们将位于父按钮附近(相对于彼此,它们一个紧邻另一个,顶部有一个指示器)。要更改状态,您应该点击包含子菜单的基本按钮。菜单按钮通过圆形弧线移动,中心位于主菜单的中心。菜单按钮在屏幕上具有静态位置。位置之间的角度是 40 度。通过从静态位置到另一个静态位置的弧线实现了滚动菜单。每次围绕移动的末尾都有一个弹簧/弹跳动画。打开和关闭动画也会移动到静态位置,但是与滚动不同,每个菜单都会跨过几个静态位置(第一个菜单会跨过所有位置到末尾,下一个菜单会跨过所有位置,除了最后一个位置,以此类推)。
需求
- iOS 11.0及以上版本
许可协议
CircleMenu遵循MIT许可协议。有关更多信息,请参阅LICENSE文件。
安装
CocoaPods是Cocoa项目的依赖关系管理器。您可以使用以下命令进行安装
$ gem install cocoapods
使用CocoaPods将CircleMenu集成到Xcode项目中,请在您的Podfile
中指定它
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'
use_frameworks!
pod 'EGOCircleMenu'
然后,运行以下命令
$ pod install
文档
属性
- unfocusedBackgroundColor: UIColor - 按钮在常规状态下的背景颜色。
- focusedBackgroundColor: UIColor - 按钮在按下状态下的背景颜色。
- unfocusedIconColor: UIColor - 按钮在常规状态下的图标颜色。
- focusedIconColor: UIColor - 按钮在按下状态下的图标颜色。
- circleMenuItems: [CircleMenuItemModel] - 该属性包含按钮模型的序列。
方法
- attach(viewController: UIViewController) - 将菜单添加到当前viewController的视图的右下角
限制
一般圆形菜单必须包含3到9个按钮。每个子菜单应包含1到5个按钮。我们根据viewController的一般视图计算菜单框架。这意味着如果您想在屏幕底部安装横幅广告,您会看到菜单按钮位于您的横幅之上。CircleMenuItemModel有初始化器,包括id、图标源以及如果它们存在则包含子菜单的数组。在这种情况下,用户应生成唯一的id,因为按钮菜单的点击识别是通过id实现的。TouchUpInside事件处理程序代理必须遵循CircleMenuDelegate协议并覆盖menuItemSelected(id: Int)方法,其中id是按钮菜单标识符。
圆形菜单使用本机弹簧动画效果。我们使用具有透明背景的UIView来放置所有菜单按钮。但这对使用放置在圆形菜单视图下的视图不会造成问题,因为我们重写了hitTest(:CGPoint,:UIEvent?)方法。我们仅使用6个物理按钮,并进行缓存以提高性能。我们使用Lottie动画来处理汉堡按钮。
汉堡主按钮默认ID为=100
模型
public class CircleMenuItemModel {
public var id: Int?
public var imageSource: UIImage?
public var children: [CircleMenuItemModel]?
public var hasChildren: Bool
public init()
public init(id: Int?, imageSource: UIImage?, children: [CircleMenuItemModel]? = nil)
}
示例
import EGOCircleMenu
class ViewController: UIViewController, CircleMenuDelegate {
var icons = [String]()
let submenuIds = [2,3]
override func viewDidLoad() {
super.viewDidLoad()
icons.append(contentsOf: ["icImage", "icPanorama", "icVideo",
"icPhoto","icTimelapse","icMacro", "icPortrait", "icSeries", "icTimer",
"icSixteenToNine", "icOneToOne", "icHDR"])
let circleMenu = CircleMenu()
circleMenu.attach(to: self)
circleMenu.delegate = self
//here you can customize needed properties
circleMenu.circleMenuItems = createCircleMenuItems(count: 4)
circleMenu.focusedIconColor = UIColor.red
circleMenu.unfocusedIconColor = UIColor.green
circleMenu.focusedBackgroundColor = UIColor.black
circleMenu.unfocusedBackgroundColor = UIColor.yellow
}
func menuItemSelected(id: Int) {
//your click event handler
}
private func createCircleMenuItems(count: Int) -> [CircleMenuItemModel] {
var menuModels = [CircleMenuItemModel]()
for i in 0..<count {
let menuModel = CircleMenuItemModel(id: i, imageSource: UIImage.init(named: icons[i]))
if submenuIds.contains(i){
for j in 9..<12 {
let submenuModel = CircleMenuItemModel(id: j, imageSource: UIImage.init(named: icons[j]))
menuModel.children!.append(submenuModel)
}
}
menuModels.append(menuModel)
}
return menuModels
}
}