GTSheetMenuView

Language Platform License Version

一个可定制的菜单,以工作表的形式呈现,可以集成到 iOS 项目中。

关于

GTSheetMenuView 是一个 Swift 库,可以集成到 iOS 项目中,允许从屏幕底部以工作表的形式呈现菜单。 它通过可用的公共 API 进行高度定制。 它的实现方式使得 GTSheetMenuView 实例的初始化和配置可以以声明式的方式进行。

适用于基于 UIKit 的项目。

集成 GTSheetMenuView

要将 GTSheetMenuView 集成到您的项目中,请按照以下步骤操作

  1. 将存储库的 URL 复制到 GitHub。
  2. 在 Xcode 中打开您的项目。
  3. 转到菜单 File > Swift Packages > Add Package Dependency...(文件 > Swift 包 > 添加包依赖项...)。
  4. 粘贴 URL,选择出现的包,然后单击“Next”(下一步)。
  5. 在“Rules”(规则)中,保留选择的默认选项(Up to Next Major)(直到下一个主要版本),然后单击“Next”(下一步)。
  6. 选择 GTSheetMenuView 包,然后选择要添加到的 Target(目标); 单击“Finish”(完成)。
  7. 在 Xcode 中,在项目导航器中选择您的项目,然后转到“General”(常规)选项卡。
  8. 在“Frameworks, Libraries, and Embedded Content”(框架、库和嵌入式内容)部分下添加 GTSheetMenuView 框架。

不要忘记在您要使用它的任何地方导入 GTSheetMenuView 模块

import GTSheetMenuView

使用示例

在初始化 GTSheetMenuView 实例之前,创建一个 GTSheetMenuItemInfo 对象集合。 每个对象代表一个项目,您可以提供标题,并且可以选择在初始化时提供副标题和图像

var items = [GTSheetMenuItemInfo]()
items.append(GTSheetMenuItemInfo(title: "Edit", subtitle: nil,image: editImage))
items.append(GTSheetMenuItemInfo(title: "Copy", subtitle: nil, image: copyImage))
items.append(GTSheetMenuItemInfo(title: "Cut", subtitle: nil, image: cutImage))
items.append(GTSheetMenuItemInfo(title: "Share", subtitle: nil, image: shareImage))
items.append(GTSheetMenuItemInfo(title: "Delete", subtitle: nil, image: deleteImage))

这是一个初始化和配置 GTSheetMenuView 菜单的示例。 将被调用的方法的数量取决于您要对菜单执行的自定义。 以下只是一个扩展示例

GTSheetMenuView.addSheetMenuView(to: self.view)
    .set(items: items)
    .setTitle("My sheet menu")
    .setTitleFont(to: UIFont(name: "Futura", size: 19)!)
    .setSheetViewCornerRadius(15)
    .showItemImageBeforeTitle(false)
    .centerItemContent()
    .setSheetViewHorizontalPadding(leadingPadding: 10, trailingPadding: 10, forHorizontalSizeClass: .regular, verticalSizeClass: .regular)
    .setSheetViewHorizontalPadding(leadingPadding: 10, trailingPadding: 10, forHorizontalSizeClass: .regular, verticalSizeClass: .compact)
    .setItemSelectionColor(.lightGray)
    .setTitleFontForAllItems(UIFont(name: "AvenirNext-Regular", size: 17)!)
    .setTitleAlignmentForAllItems(.left)
    .setItemTitleLabelHeight(36.0)
    .setMinimumHeightForAllItems(60)
    .setItemTitleTextColor(at: 4, color: .red)
    .onDismiss {
        print("Sheet menu was dismissed!")
    }
    .onItemSelection({ (itemIndex) in
        print("Did tap at index \(itemIndex)")
        // Perform further actions...
    })
    .showAnimated()

GTSheetMenuView Sample

还有更多公共方法可以使用; 请参阅下一部分。

默认情况下,点击叠加视图时会关闭菜单。 您可以通过调用以下方法来禁用它

.disableSheetMenuDismissalOnOverlayTap()

要手动关闭菜单,请调用以下类方法

GTSheetMenuView.hideAnimated(from:duration:)

初始化的 GTSheetMenuView 实例可以选择分配给一个变量

var menu = GTSheetMenuView.addSheetMenuView(to: self.view)
    ...
    ...

要获取与特定索引匹配的 GTSheetMenuItemInfo 对象,请通过菜单对象使用 getItemInfo(at:) 实例方法

let info = menu.getItemInfo(at: 1)

要获取特定索引的项目视图作为 GTSheetMenuItemView 对象,请通过菜单对象调用 getItemView(at:) 实例方法

let itemView = menu.getItemView(at: 1)

通过 itemView,可以访问项目视图的 titlesubtitle 标签以及 imageView

请查看下一个可用的公共 API。 它包含各种允许实现高度定制的方法。

公共 API

// -- Class Methods

// Create and add a sheet menu view to a view. 
addSheetMenuView(to:)

// Hide and remove a sheet menu view instance animated.
hideAnimated(from:duration:)



// -- Instance Methods

// -- Appearance & Disappearance --

// It prepares a `GTSheetMenuView` for appearance by configuring any
// internal subviews and setting the necessary autolayout constraints,
// and then it presents it animated.
showAnimated(duration:completion:)


// Implement additional actions once the sheet menu view has been dismissed.
onDismiss(_:)



// -- Sheet View Width & Horizontal Padding --

// Provide a fixed width for the sheet view that will apply to all size class combinations.
setSheetViewWidth(_:)


// Provide a fixed width value for a given combination of horizontal and
// vertical size classes.
setSheetViewWidth(_:forHorizontalSizeClass:verticalSizeClass:)


// Provide leading and trailing padding values for all size class combinations.
setSheetViewHorizontalPadding(leadingPadding:trailingPadding:)


// Set the leading and trailing pardding values for specific size class combinations.
setSheetViewHorizontalPadding(leadingPadding:trailingPadding:forHorizontalSizeClass:verticalSizeClass:)



// -- Sheet View General --

// Set the background color of the menu view.
setMenuViewBackgroundColor(_:)


// Set the corner radius of the sheetview.
setSheetViewCornerRadius(_:)


// Update the menu items container view default insets.
updateItemsContainerInsets(_:)


// Specify whether the imageview of the menu items should be
// displayed before or after the title.
showItemImageBeforeTitle(_:)


// Hide the separators shown among menu items.
hideSeparators()


// Align menu item content centered horizontally.
centerItemContent()



// -- Sheet View Title --

// Set the sheet menu title.
setTitle(_:)


// Set the sheet menu title's text color.
setTitleTextColor(to:)


// Set the sheet menu title's font.
setTitleFont(to:)


// Set the sheet menu title's text alignment.
setTitleTextAlignment(_:)



// -- Items Title --

// Set the title font for all menu items.
setTitleFontForAllItems(_:)


// Set the title font for the menu item at the given index.
setItemTitleFont(at:font:)


// Set the title text color for all menu items.
setTitleTextColorForAllItems(_:)


// Set the title text color for the menu item at the given index.
setItemTitleTextColor(at:color:)


// Set title text alignment for all menu items.
setTitleAlignmentForAllItems(_:)


// Set title text alignment for the menu item at the given index.
setItemTitleAlignment(at:alignment:)


// Set the height of the title label for all items.
setItemTitleLabelHeight(_:)


// -- Items ImageView --

// Set the size (width and height) of the image view for all items.
setItemImageViewSize(_:)


// Set the content mode of the imageview for all items.
setItemImageViewContentMode(_:)



// -- Items Height --

// Set the minimum desired height for all menu items.
setMinimumHeightForAllItems(_:)


// Set the minimum desired height for the item at the given index.
setMinimumItemHeight(at:height:)



// -- Subtitle --

// Specify the text color of the subtitle for all items.
setSubtitleTextColor(_:)


// Specify the text color of the subtitle for the item at the given index.
setSubtitleTextColor(at:color:)


// Set the font of the subtitle for all items.
setSubtitleFontForAllItems(_:)


// Set the subtitle font for the item at the given index.
setSubtitleFont(at:font:)


// Set the alignment of the subtitle for all items.
setSubtitleAlignmentForAllItems(_:)


// Set the subtitle text alignment for the item at the given index.
setSubtitleAlignment(at:alignment:)



// -- Overlay --

// Set a custom background color for the overlay view.
setOverlayColor(_:)


// Disable dismissing the sheet menu view by tapping on the overlay view.
disableSheetMenuDismissalOnOverlayTap()



// -- Set Menu Items --

// Provide the items to display as a collection of `GTSheetMenuItemInfo` elements.
set(items:)



// -- Get Item & Item View --

// Get the menu item view at the given index.
getItemView(at:)


// Get the menu item at the given index as a `GTSheetMenuViewInfo` object.
getItemInfo(at:)



// -- Item Selection --

// Perform an action upon an item's selection.
onItemSelection(_:)


// Set the selection color shown when an item is tapped.
setItemSelectionColor(_:)

备注

版本

当前最新版本是 1.0.2。

许可证

GTSheetMenuView 在 MIT 许可证下获得许可。