选择菜单 0.2.2

选择菜单 0.2.2

×

由Michal Stembera维护。

选择菜单 0.2.2

  • 作者：
  • stemberamichal

选择菜单

CI Status Version License Platform

Layout and color examples

Example video of Orange Accent

内容

示例

要运行示例项目，请克隆仓库，然后首先从Example目录运行pod install。

要求

  • iOS 11.0+
  • Xcode 9.0+
  • Swift 4.0+

安装

CococaPods

CocoaPods 是 Cocoa 项目的依赖管理器。你可以使用以下命令安装它

gem install cocoapods

要使用 CocoaPods 将 SelectionMenu 集成到你的 Xcode 项目中，请在使用 Podfile

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'SelectionMenu'
end

然后，运行以下命令

$ pod install

指定依赖版本也很有用，例如 pod 'SelectionMenu', '~> 0.2.0'，但在首次重大发布之前，API 仍然可能不稳定。

Carthage

Carthage 不再受支持。

Swift Package Manager

Swift Package Manager 不再受支持。

Usage

基本设置

要将 SelectionMenu 添加到你的视图中，只需创建任意实现了 protocol MenuButton 协议的视图。已经有几个默认实现供你使用： LabelMenuButton, UIButton。

override func loadView() {
	super.loadView()
	
	let button = LabelMenuButton(text: "Menu")
	// Here you can do styling of the menu button
	
	let selectionMenu = SelectionMenu(menuButton: button)
	view.addSubview(selectionMenu)
	self.selectionMenu = selectionMenu
	
	// Setup selectionMenu layout as you would for the button
	// Selection menu inserts platform beneath itself 
	// and presents its content there
	// Therefore it needs to be on top
}

菜单内容

关于设置菜单内容，我建议创建一个新的对象实现SelectionMenuDataSource和SelectionMenuDelegate协议。然后您可以定义自己的协议，以便与包含的UIViewController通信。

但另一方面，已经准备了StaticMenuDataSource，它可以让您迅速开始。

// You cannot assign the datasource directly, because it is weak reference and data source would get released immidietaly
// So you have to store it into strong referencing property
self.menuDataSource = StaticMenuDataSource(sections:
            (type: .singleSelection(selected: 0), [.text("A"), .text("B"), .text("C"), .text("D")]),
            (type: .multiSelection(selected: [1, 3]), [.text("I"), .text("II"), .text("III")]),
            (type: .buttonSelection, [.text("😀"), .text("🙂"), .text("😐"), .text("🙁"), .text("😞")])
        )

self.selectionMenu.dataSource = self.menuDataSource

或者您可以使用预定义的SelectionMenu，它会为您创建按钮

let menu = SelectionMenu.orangeAccent
view.addSubview(expandableMenu)
self.menu = menu

样式

您可以使用两个协议SelectionCollectionStyling和SelectionElementStyling来改变整个集合或单个元素的外观。

这两个协议都包含一个单独的方法，在适当的时候被调用以应用必要的样式。

您可以自己实现样式或使用已实现的样式。其中一些符合这两个协议，因此可以一次用于两个属性。

selectionMenu.elementStyle = SelectionElementStyle(
	circular: true,
	selectedFgColor: DayAndNight.darkNavy,
	selectedBgColor: DayAndNight.tangerine,
	deselectedFgColor: DayAndNight.daffodil,
	// I suggest clear background color to be able to differentiate selected elements easier
	deselectedBgColor: .clear)


selectionMenu.collectionStyle = SelectionCollectionStyle(
	circular: true,
	foregroundColor: .black,
	backgroundColor: .white)

您还可以一次使用多个样式，使用组合样式。

selectionMenu.collectionStyle = CompositeStyle(collectionStyles: [collectionStyle, ShadowStyle.dark])

布局

在布局方面，您有多种选择，但首先您必须决定是选择自动布局还是手动布局。

  • 如果您想使用AutomaticMenuLayout，您不需要做任何事情，因为这已经被使用了。
  • 如果您想使用ManualMenuLayout，您必须首先实例化它。
menu.collectionsLayout = ManualMenuLayout(
	// Center of the menu button to center of first collection
	horizontalAlignment: .centerToCenter,
	// Top of the menu button to bottom of first collection
	verticalAlignment: .topToBottom(direction: .up)
)

致谢

许可证

SelectionMenu可在MIT许可证下使用。有关更多信息，请参阅LICENSE文件。