CKCircleMenuView 0.4.0

CKCircleMenuView 0.4.0

×

测试已测试✗
语言语言 Objective-CObjective C
许可协议 MIT
发布时间最后发布2017年9月

由 Christian Klaproth 维护。

CKCircleMenuView 0.4.0

好吧，它是一个圆形菜单。有点类似。适用于 iOS。

想法是保持 UI 简洁明了，并在需要时向用户展示按钮。以下截图是从我在此仓库中提供的演示应用中捕获的。只需克隆此仓库，然后在 CircleViewDemo 文件夹中调用 pod install。圆形菜单通过 UILongPressGesture 打开。只要用户按下手指，菜单就会保持打开状态。通过拖动按钮并松开手指来选择按钮。

 

以下动画显示了深度效果（对不起，gif 质量不佳，您必须在本演示应用中查看！）您可以选择绘制柔和的阴影，当按钮被激活时，它会略微变形。同时，按钮会稍微缩小，从而产生极强的 3D 效果。

如果您不想将菜单从任何地方弹出（您的用户必须知道在哪里长按才能看到菜单），但想要提供一个菜单按钮，可以使用 CKCircleMenuView 中的 tap 模式。一旦打开，菜单会保持打开状态，直到用户选择一个选项或在其他地方点击其它地方关闭菜单。

circlemenutapmode

CKCircleMenuView 旨在易于集成和使用。打开菜单和响应用户的选择与使用 UIAlertView (已弃用) UIAlertController 一样简单。

功能

在展示菜单之前，有一些选项可以调整。

  • 按钮数量（可以是图像数组或动态参数列表的图像）
  • 按钮的正常颜色
  • 按钮的活动颜色（或称为悬停颜色）
  • 按钮的边框颜色
  • 按钮放置用到的角度（默认 = 180 度）
  • 角度中心的方位（默认 = CircleMenuDirectionUp）
  • 按钮对齐半径（默认 = 65）
  • 按钮半径（宽度的一半，默认 = 39）
  • 按钮边框宽度（默认 = 2）
  • 按钮动画之间的延迟（默认 = 0.0 毫秒）
  • 使用阴影和缩放实现深度效果（默认 = NO）
  • tap 模式（默认 = NO）
  • line 模式（默认 = NO）
  • 使用提供按钮图像作为 alpha 遮罩的 tint 模式，就像 UIButtonType.System 一样（默认 = NO）
  • background blur 模式忽略背景颜色，并使用 UIVisualEffectsView 作为按钮的背景（默认 = NO）

安装

Swift

如果您在Swift项目中使用CKCircleMenuView，请将以下行添加到您的Objective-C桥接头文件中。

#import <CKCircleMenuView/CKCircleMenuView.h>

在您想要使用CKCircleMenuView的Swift类中，添加以下导入语句。

import CKCircleMenuView

使用方法

请查看本存储库中包含的示例应用程序，以查看如何使用CKCircleMenuView的完整工作示例。

基本上，您需要做的是：在Storyboard中为应触发CKCircleMenuView的视图添加一个长按手势识别器，并将其连接到视图控制器中的操作方法。或者，如果您想在点击模式下使用菜单，请添加一个UIButton并将其触摸-up-inside事件连接到视图控制器中的操作方法。您需要实现一些功能。

  • 确定触发事件的位置（即可视按钮的框架中心或您视图中的长按手势的位置）。这将作为CKCircleMenuView的起点（中心）。
let tPoint = CGPoint(x: button.frame.midX, y: button.frame.midY)
  • 创建一个图像数组，该数组将用于填充菜单中的按钮（例如，在viewDidLoad中，如果菜单的内容不是动态的）。
var circleMenuImageArray = Array<UIImage>()

override func viewDidLoad() {
  super.viewDidLoad()

  // ...
  self.circleMenuImageArray.append(UIImage(named: "InfoChartButton")!)
  self.circleMenuImageArray.append(UIImage(named: "CircleChartButton")!)
  self.circleMenuImageArray.append(UIImage(named: "BarChartButton")!)
  self.circleMenuImageArray.append(UIImage(named: "RealtimeButton")!)
  self.circleMenuImageArray.append(UIImage(named: "LineChartButton")!)
}
  • 创建一个包含菜单配置参数的字典。
var tOptions = Dictionary<String, AnyObject>()
tOptions[CIRCLE_MENU_OPENING_DELAY] = 0.1 as AnyObject
tOptions[CIRCLE_MENU_MAX_ANGLE] = 180.0 as AnyObject
tOptions[CIRCLE_MENU_RADIUS] = 105.0 as AnyObject
tOptions[CIRCLE_MENU_DIRECTION] = Int(CircleMenuDirectionUp.rawValue) as AnyObject
tOptions[CIRCLE_MENU_BUTTON_BACKGROUND_NORMAL] = UIColor.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.4)
tOptions[CIRCLE_MENU_BUTTON_BACKGROUND_ACTIVE] = UIColor.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.8)
tOptions[CIRCLE_MENU_BUTTON_BORDER] = UIColor.white
tOptions[CIRCLE_MENU_DEPTH] = 2.0 as AnyObject
tOptions[CIRCLE_MENU_BUTTON_RADIUS] = 35.0 as AnyObject
tOptions[CIRCLE_MENU_BUTTON_BORDER_WIDTH] = 2.0 as AnyObject
tOptions[CIRCLE_MENU_TAP_MODE] = true as AnyObject
tOptions[CIRCLE_MENU_LINE_MODE] = false as AnyObject
tOptions[CIRCLE_MENU_BUTTON_TINT] = false as AnyObject
tOptions[CIRCLE_MENU_BACKGROUND_BLUR] = false as AnyObject
tOptions[CIRCLE_MENU_BUTTON_TITLE_VISIBLE] = true as AnyObject
tOptions[CIRCLE_MENU_BUTTON_TITLE_FONT_SIZE] = 11.0 as AnyObject
  • 按以下方式显示菜单（不要忘记将CKCircleMenuDelegate作为协议添加）。
self.circleMenuView = CKCircleMenuView(atOrigin: tPoint, usingOptions: tOptions, withImageArray: self.circleMenuImageArray)
self.view.addSubview(self.circleMenuView!)
self.circleMenuView!.delegate = self
self.circleMenuView!.openMenu()
  • 可选：您可以传递一个字符串数组作为第四个参数。这些标题将在相应的图标下方（数组的相同索引）显示。有关如何使用标题的示例，请参阅示例应用程序。注意，这些标题可能只能由最多约8个字符组成，因为按钮的边界空间有限。
  • 实现CKCircleMenuDelegate协议的方法以响应菜单事件。
// MARK: Circle Menu Delegate

func circleMenuActivatedButton(with anIndex: Int32) {
  // ...
}

func circleMenuOpened() {
  // ...
}

func circleMenuClosed() {
  // ...
}

作者

Christian Klaproth，@JaNd3r

许可

CKCircleMenuView受MIT许可协议的约束。有关更多信息，请参阅LICENSE文件。