UMagicDropDown

一个优雅且神奇的下拉选择框

UIMagicDropDown为这类选择元素提供了一个简单但强大的解决方案。易于使用和集成，您可以通过主题功能创建自己的设计。

功能

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

要求

iOS +9.0

安装

CocoaPods

您可以通过将UIMagicDropDown添加到Podfile中使用CocoaPods来安装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 结构创建项目，该结构接收一个 String（在 DropDown 中显示的标签）和一个 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”变量发送。我们使用这个实例来提升dropDown视图，防止将其下的其他视图推送到下方。看看以下例子

 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协议并符合第一个函数（这是唯一必须的）。确保您用'self'设置了代理，一旦在类中实现了UIMagicDropDownDelegate。

dropDown.dropDownDelegate = self

当任何下拉菜单做出新的选择时，这个函数提供了与所选元素关联的对象和做出选择的下拉菜单实例。

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

通过接口构建器（Beta）

1- 在您的控制器中添加一个UIView。2- 选择身份检查器并将自定义类设置为UIMagicDropdown。3- 定义所有约束，使其不影响底部，以允许视图向下扩展而不会导致下方所有其他视图移动。是的，这会引起约束错误。忽略它，但要小心所有其他视图。

查看以下图片

然后，按照与使用代码相同的方式进行其他操作。

元

David Martin Saiz – @deividmarshall – [email protected]

根据MIT许可证发行。有关更多信息，请参阅LICENSE。

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

版本历史

1.2.0
- 删除下拉箭头图像资源
- 将箭头设置为“V”铜版字体
- 修改主题结构：移除图片子结构
- 添加 Swift 包管理器支持🎉
1.1.0
- 添加 Carthage 兼容性
- 修改 getImage 函数以适应 Carthage 使用
1.0.0
- 首次实现主功能

UIMagicDropDown 1.2.0

UIMagicDropDown 1.2.0

UIMagicDropDown 1.2.0

UMagicDropDown

功能

要求

安装

CocoaPods

Carthage

使用示例

通过代码

主题！

捕捉选择

通过接口构建器（Beta）

元

版本历史