UMagicDropDown

一个优雅而神奇的下拉菜单

⚠️ Cocoapods & Carthage 弃用通知: 从 1.2.0 之后的版本将不再通过 Cocoapods 和 Carthage 提供分发支持，仅支持 Swift Package Manager！

UIMagicDropDown 是一个简单但功能强大的下拉选择元素解决方案。易于使用和集成，您可以通过主题功能制作自己的设计。

特性

设置任何类型的条目。
用于与选择交互的协议函数。
配置所有部分的颜色、文本对齐方式、圆角和阴影、字体类型和大小。
通过代码或 Interface Builder 使用。

要求

iOS +9.0

安装

CocoaPods

您可以使用 CocoaPods 通过将其添加到您的 Podfile 中来安装 UIMagicDropDown

platform :ios, '9.0'
use_frameworks!
pod 'UIMagicDropDown'

首先，导入模块 😅

import UIMagicDropDown

Carthage

将以下行放入您的 Cartfile 中

git "https://github.com/CodeNationDev/UIMagicDropDown.git" ~> 1.1.0

然后，运行

$ carthage update

使用示例

通过代码

首先，您必须使用 UIMagicDropdownData 结构创建条目，该结构接收一个字符串（在下拉菜单中显示的标签）和一个 Any 元素，这是选择条目时发送的对象。

let items:[UIMagicDropdownData] = [
            UIMagicDropdownData(label: "Steve Jobs", value: 33),
            UIMagicDropdownData(label: "Johnny Ive", value: ["Johnny Ive": 44]),
            UIMagicDropdownData(label: "Phil Schiller",value: "Phil Schiller"),
            UIMagicDropdownData(label: "Craig Fedherighi", value: "Craig Fedherighi"),
            UIMagicDropdownData(label: "Steve Wozniak", value: "Steve Wozniak"),
        ]

然后，创建对象实例，并通过构造函数传递条目

dropDown = UIMagicDropdown(items: items)

将 dropDown 添加到您的视图，并设置其约束

view.addSubview(dropDown!)

dropDown?.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
            dropDown!.topAnchor.constraint(equalTo: view.topAnchor, constant: 100.0),
            dropDown!.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 80.0),
            dropDown!.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -80.0)
])

现在，运行您的项目，看看您的第一个 MagicDropDown 在您的应用程序中。

主题！

您很可能需要自定义此元素的外观，为此，我们开发了一个主题系统，以提供几乎所有自定义的可能性。

您可以使用以下结构定义主题对象

单击展开并显示代码

public struct MagicDropDownConfig {
    public var colors: Colors?
    public var fonts: Fonts?
    public var layers: Layers?
    public var shadow: Shadow?
    public var texts: Texts?
    //MARK: - Colors
    public struct Colors{
        public var dropDownBoxBackgroundColor: UIColor?
        public var dropDownTableBackgroundColor: UIColor?
        public var borderColor: UIColor?
        public var tableBorderColor: UIColor?
        public var hintTextColor: UIColor?
        public var itemSelectedColor: UIColor?
        public var itemUnselectedColor: UIColor?
        public var itemSelectedTextColor: UIColor?
        public var itemUnselectedTextColor: UIColor?
        public var separatorTintColor: UIColor?
        public var accessoryTintColor: UIColor?

        public init(){}
    }
    public struct Fonts {
        //MARK: - Fonts
        public var hintFont: UIFont?
        public var itemFont: UIFont?

        public init(){}
    }
    //MARK: - Layers
    public struct Layers {
        public var boxCornerRadius: CGFloat?
        public var tableCornerRadius: CGFloat?
        public init(){}
    }

    public struct Shadow {
        public var shadowOpacity: Float?
        public var shadowOffset: CGSize?
        public var shadowRadius: CGFloat?
        public var shadowColor: UIColor?
        public init() {}
    }

    public struct Texts {
        public var boxTextAlignment:NSTextAlignment?
        public var tableTextAlignmrnt:NSTextAlignment?
        public init(){}
    }

    public init(){}
}

哇，那太大了... 但没关系，这很简单，一切都是可选的，您只需要提供用于自定义的部分……或者全部，如果您需要定义一个全新的体验。

为了让您更容易完成这项工作，这里有三个示例，您可以执行此操作。

靛蓝主题

var indigo: MagicDropDownConfig? = {
        var theme = MagicDropDownConfig()
        let colors:MagicDropDownConfig.Colors = {
            var colors = MagicDropDownConfig.Colors()
            colors.accessoryTintColor = UIColor(named: "Lochmara")
            colors.borderColor = UIColor(named: "Lochmara")
            colors.hintTextColor = UIColor(named: "Lochmara")
            colors.dropDownBoxBackgroundColor = UIColor(named: "BlueWood")
            colors.separatorTintColor = UIColor(named: "Lochmara")
            colors.itemSelectedColor = UIColor(named: "Lochmara")
            colors.itemUnselectedColor = UIColor(named: "BlueWood")
            colors.itemSelectedTextColor = UIColor(named: "Bluewood")
            colors.itemUnselectedTextColor = UIColor(named: "Lochmara")
            colors.tableBorderColor = UIColor(named: "Lochmara")
            return colors
        }()
        let fonts:MagicDropDownConfig.Fonts = {
            var fonts = MagicDropDownConfig.Fonts()
            fonts.itemFont = .systemFont(ofSize: 17)
            fonts.hintFont = .systemFont(ofSize: 17)
            return fonts
        }()
        let layers:MagicDropDownConfig.Layers =  {
            var layers = MagicDropDownConfig.Layers()
            layers.boxCornerRadius = 5.0
            layers.tableCornerRadius = 5.0
            return layers
        }()

        let texts:MagicDropDownConfig.Texts = {
            var texts = MagicDropDownConfig.Texts()
            texts.boxTextAlignment = .center
            texts.tableTextAlignmrnt = .center
            return texts
        }()

        theme.colors = colors
        theme.fonts = fonts
        theme.layers = layers
        theme.texts = texts
        return theme
    }()

玉米主题

var corn: MagicDropDownConfig? = {
        var theme = MagicDropDownConfig()
        let colors:MagicDropDownConfig.Colors = {
            var colors = MagicDropDownConfig.Colors()
            colors.accessoryTintColor = UIColor(named: "Corn")
            colors.borderColor = UIColor(named: "Corn")
            colors.hintTextColor = UIColor(named: "Corn")
            colors.dropDownBoxBackgroundColor = UIColor(named: "CornTint05")
            colors.separatorTintColor = UIColor(named: "Corn")
            colors.itemSelectedColor = UIColor(named: "Corn")
            colors.itemUnselectedColor = UIColor(named: "CornTint05")
            colors.itemSelectedTextColor = UIColor(named: "CornTint05")
            colors.itemUnselectedTextColor = UIColor(named: "Corn")
            colors.tableBorderColor = UIColor(named: "Corn")
            return colors
        }()
        let fonts:MagicDropDownConfig.Fonts = {
            var fonts = MagicDropDownConfig.Fonts()
            fonts.itemFont = .systemFont(ofSize: 17)
            fonts.hintFont = .systemFont(ofSize: 17)
            return fonts
        }()
        let layers:MagicDropDownConfig.Layers =  {
            var layers = MagicDropDownConfig.Layers()
            layers.boxCornerRadius = 8.0
            layers.tableCornerRadius = 8.0
            return layers
        }()

        theme.colors = colors
        theme.fonts = fonts
        theme.layers = layers
        return theme
    }()

风暴主题

var storm: MagicDropDownConfig? = {
           var theme = MagicDropDownConfig()
           let colors:MagicDropDownConfig.Colors = {
               var colors = MagicDropDownConfig.Colors()
            colors.accessoryTintColor = .darkGray
               colors.borderColor = .darkGray
               colors.hintTextColor = .darkGray
               colors.dropDownBoxBackgroundColor = .systemGray5
               colors.separatorTintColor = .darkGray
               colors.itemSelectedColor = .darkGray
               colors.itemUnselectedColor = .systemGray5
            colors.itemSelectedTextColor = .systemGray5
               colors.itemUnselectedTextColor = .darkGray
               colors.tableBorderColor = .darkGray
               return colors
           }()
           let fonts:MagicDropDownConfig.Fonts = {
               var fonts = MagicDropDownConfig.Fonts()
               fonts.itemFont = .systemFont(ofSize: 17)
               fonts.hintFont = .systemFont(ofSize: 17)
               return fonts
           }()
           let layers:MagicDropDownConfig.Layers =  {
               var layers = MagicDropDownConfig.Layers()
               layers.boxCornerRadius = 24.5
               layers.tableCornerRadius = 24.5
               return layers
           }()
           let shadow:MagicDropDownConfig.Shadow = {
               var shadow = MagicDropDownConfig.Shadow()
               shadow.shadowColor = UIColor.lightGray
               shadow.shadowOffset = .zero
               shadow.shadowOpacity = 0.5
               shadow.shadowRadius = 7.0
               return shadow
           }()

           theme.colors = colors
           theme.fonts = fonts
           theme.layers = layers
           theme.shadow = shadow
           return theme
       }()

冲击主题

 var punch: MagicDropDownConfig? = {
        var theme = MagicDropDownConfig()
        let colors:MagicDropDownConfig.Colors = {
            var colors = MagicDropDownConfig.Colors()
            colors.accessoryTintColor = UIColor(named: "Punch")
            colors.borderColor = UIColor(named: "Punch")
            colors.hintTextColor = UIColor(named: "Punch")
            colors.dropDownBoxBackgroundColor = UIColor(named: "PunchTint05")
            colors.separatorTintColor = UIColor(named: "Punch")
            colors.itemSelectedColor = UIColor(named: "Punch")
            colors.itemUnselectedColor = UIColor(named: "PunchTint05")
            colors.itemSelectedTextColor = UIColor(named: "PunchTint05")
            colors.itemUnselectedTextColor = UIColor(named: "Punch")
            colors.tableBorderColor = UIColor(named: "Punch")
            return colors
        }()
        let fonts:MagicDropDownConfig.Fonts = {
            var fonts = MagicDropDownConfig.Fonts()
            fonts.itemFont = .systemFont(ofSize: 17)
            fonts.hintFont = .systemFont(ofSize: 17)
            return fonts
        }()
        let layers:MagicDropDownConfig.Layers =  {
            var layers = MagicDropDownConfig.Layers()
            layers.boxCornerRadius = 12.0
            layers.tableCornerRadius = 12.0
            return layers
        }()
        let shadow:MagicDropDownConfig.Shadow = {
            var shadow = MagicDropDownConfig.Shadow()
            shadow.shadowColor = UIColor.lightGray
            shadow.shadowOffset = .zero
            shadow.shadowOpacity = 0.5
            shadow.shadowRadius = 7.0
            return shadow
        }()

        theme.colors = colors
        theme.fonts = fonts
        theme.layers = layers
        theme.shadow = shadow
        return theme
    }()

无论如何，您可以在示例项目中找到这些主题和实现。定义好主题后，您可以通过构造函数提供它，或者使用 UIMagicDropdown 类的公共变量 “theme”。 ```swift dropDown.theme = indigo ```

最后，结果...

你能看到吗？是的！！ 我的 DropDown 不会推送它下面的视图。你知道怎么做吗？看看这个... 请先阅读下一节，了解如何实现委托协议，设置委托对象并了解可用函数，然后查看以下主题

在协议中，您有此函数

func dropdownExpanded (_ sender: UIMagicDropdown)

当视图中的任何下拉菜单展开时，都会调用此函数并将实例作为 “sender” 变量发送。我们使用此实例来提升下拉视图，并避免推送其下的其余视图。看一下下面的例子

 func dropdownExpanded(_ sender: UIMagicDropdown) {
        view.bringSubviewToFront(sender)
    }

现在，在你的设计中尝试一下！！

捕获选择

为了获取屏幕上每个元素的选择，您可以使用一个包含三个函数的协议，但请关注第一个函数

public protocol UIMagicDropDownDelegate: class {
    func dropDownSelected (_ item: UIMagicDropdownData, _ sender: UIMagicDropdown)
    func dropdownExpanded (_ sender: UIMagicDropdown)
    func dropdownCompressed (_ sender: UIMagicDropdown)
}

您当然知道，您只需要在您的类中实现 UIMagicDropDownDelegate 协议并符合第一个函数（这是唯一必需的）。确保在您的类中实现 UIMagicDropDownDelegate 后，使用 ‘self’ 设置委托。

dropDown.dropDownDelegate = self

当任何 dropDown 获取新的选择时，此函数会为您提供选定元素的关联对象以及进行选择的 dropdown 对象的实例。

extension ViewController: UIMagicDropDownDelegate { func dropDownSelected(_ item: UIMagicDropdownData, _ sender: UIMagicDropdown) { //Do Something } }

以编程方式设置条目选择

通常，您可能需要在第一次预先选择任何条目（或更改依赖于最后一个条目的下一个下拉菜单的选择）。为此，您可以使用 itemSelected 变量。

dropDown.itemSelected = 2

通过 Interface Builder (BETA)

1- 在您的控制器中添加一个 UIView。 2- 选择 identity inspector 并设置自定义类 UIMagicDropdown 3- 定义所有约束，减少底部，以允许视图向下增长，而不会导致其下所有其他视图中的移动。是的，这会导致约束错误。忽略它，但请小心所有其他视图。

请看下图

然后，其他一切都以与代码使用相同的方式进行。

元数据

David Martin Saiz – @deividmarshall – YourEmail@example.com

在 MIT 许可证下分发。有关更多信息，请参见 LICENSE。

https://github.com/yourname/github-link

版本历史

1.2.0
- 删除 dropdown_arrow 图像资源
- 将箭头添加为 "V" 铜版字体
- 修改主题结构：删除 images 子结构
- 添加 Swift Package Manager 支持 🎉
1.1.0
- 添加 Carthage 兼容性
- 修改 getImage 函数以用于 Carthage。
1.0.0
- 首次实现主要功能。