Direct Select
基于 Virgil Pana 的 Direct select's 设计
需求
- iOS 8.0+
- Xcode 10.0+
- Swift 5.0+
安装
只需将 DirectSelect 目录添加到您的项目中
或使用 Cocoapods
pod 'DirectSelect'
用法
1 从 createInstance
方法创建 DSInitialView 的实例。 让意图代理符合 DSInitialViewDelegate
,该代理更新用户选择的选项。 必须传递类型为 DSDataModel
的数据模型。 在这里,您传递所有选项列表、初始选项、各种 UI 配置等。
let initialView = DSInitialView.createInstance(model: giveDataModel1(), delegate: self)
1.1 关于 DSDataModel 和可用配置的更多详细信息:
public class DSDataModel {
public class DSUIConfigs {
//should show an options expanding button on the initial view (See the second expanding view in the Example project)
public var showOptionsButton: Bool = false
//tintColor of the options button if its shown
public var optionsBtnColor: UIColor = UIColor.init(red: 34.0/255.0, green: 34.0/255.0, blue: 34.0/255.0, alpha: 1.0)
//font of the text on the initial view
public var initialFont: UIFont = UIFont.systemFont(ofSize: 14.0)
//font of the text on the rows of the final tableview
public var finalFont: UIFont = UIFont.systemFont(ofSize: 18.0)
//font of the title of final tableview view
public var finalTitleFont: UIFont = UIFont.systemFont(ofSize: 18.0)
//font color of the text on the initial view
public var initialFontColor: UIColor = UIColor.init(red: 34.0/255.0, green: 34.0/255.0, blue: 34.0/255.0, alpha: 1.0)
//font color of the text on the rows of the final tableview
public var finalFontColor: UIColor = UIColor.init(red: 34.0/255.0, green: 34.0/255.0, blue: 34.0/255.0, alpha: 1.0)
//background color of both the initial View and the final view cells and tableview
public var finalBGColor: UIColor = UIColor.white
//separator color of tableview
public var finalBGSeparatorColor: UIColor = UIColor.init(red: 243.0/255.0, green: 243.0/255.0, blue: 243.0/255.0, alpha: 1.0)
//font color of the title of final tableview view
public var finalTitleColor: UIColor = UIColor.init(red: 34.0/255.0, green: 34.0/255.0, blue: 34.0/255.0, alpha: 1.0)
//font color of the cell texts in non selection state
public var defaultSubviewNonSelectionColor: UIColor = UIColor.lightGray
//font of the cell title text in non selection state
public var finalTitleNonSelectionStateFont: UIFont = UIFont.systemFont(ofSize: 18.0)
//tableview row which is selected should first align itself exactly in the selectable area before the final tableview UI is dismissed
public var selectedRowShouldCenterBeforeDismiss: Bool = false
//UI configs of intro view if it is used
public var introViewUIModel: DSIntroUIModel?
public init() {
}
}
public init() {
}
//title to display on top of the final tableview
public var titleString: String?
//options to display on top of the final tableview. Type is [Any] as the even custom Subviews are allowed through DSSubview
public var values: [Any] = []
//time interval for which final tableview shows before auto dismissing
public var longPressDuration: TimeInterval = 1.0
//initial index which is selected by default in the tableview
public var initialIndex: Int = 0
//initial data which is shown by default in the tableview
public var initialData: Any?
//case defaultCell - we are using the default view for initial view and final view cells
//case customCell - we are custom view for initial view and final view cells
public var cellSubviewType: CSCellSubviewType = .defaultCell
//UI configs instance explained above
public var uiConfigs = DSUIConfigs()
//superview on which to add the final Tableview UI as subview
//if this is nil, we add the final Tableview UI to the superview of DSinitialView instance
//make this nil if the initial view is a direct subview of the view on which you need to present the final tableview UI
//other assign this property to the intended superview of the final tableview UI
public var finalViewSuperview: UIView?
//in case you are using custom subview, this block should return an instance of your custom subview
//we call this block when we want to initialize an instance of your subview.
//For assigning properties to your subview, we call assignData method of the DSSubview
public var customSubviewCreator: (() -> DSSubview)?
}
2 您可以使用向导视图来指导用户如何使用 DirectSelect。(请参阅 FoodJournal 示例中的第一个例子)。 只需在 DSInitialView
上调用 addAndShowIntroView()
。 当您想删除向导时,在同一个 DSInitialView 上调用 removeIntroView()
。 根据当前实现,当用户长按初始视图时,我们将删除(如有)向导视图,然后显示最终的 tableview UI。
2.1 向导视图上的配置选项
public class DSIntroUIModel {
//text to coach the user on how to use DirectSelect
public var introLabelText: String = "Long press to open options, then tap and drag to select."
//color of the text which coaches the user on how to use DirectSelect
public var introLabelColor: UIColor = UIColor.init(red: 150.0/255.0, green: 150.0/255.0, blue: 150.0/255.0, alpha: 1.0)
//backgroundColor of the circle view used in the intro screen
public var circleViewColor: UIColor = UIColor.blue.withAlphaComponent(0.4)
//backgroundColor of the halo effect used in the intro screen
public var haloColor: UIColor = UIColor.init(red: 140.0/255.0, green: 217.0/255.0, blue: 190.0/255.0, alpha: 1.0).withAlphaComponent(0.6)
}
3 您还可以在DSInitialView以及最终tablview子视图中的单元格中使用自定义UI。您的自定义子视图应实现DSSubview
协议。以示例项目中的 ViewController
类中giveDataModel4()
函数为例。我们使用自定义UIViewCustomSubview
而不是默认视图。注意下面的行:
dataModel.customSubviewCreator = {DSSubview.createInstance()}
在这里,我们将创建自定义UIView实例的代码分配给了dataModel的customSubviewCreator
属性。
3.1 DSSubview协议方法如下:
public protocol DSSubview: class {
var delegate: DSDefaultCellSubviewDelegate? {get set}
//callback when the subview enters the area of selection, (i.e. it enters between the two separator lines in the final tableview UI) you might want to make ui changes here
//For example, you might want to make the text font/color changes or background color changes
func wentInsideSelectionArea()
//callback when the subview goes outside the area of selection, (i.e. it enters outside the two separator lines in the final tableview UI) you might want to make ui changes here
func wentOutsideSelectionArea()
//give the list of views who size or position who want to change between the initial and final views
func giveViewsToAnimate() -> [UIView]
//this one's a bit tricky. So basically when we animate between different sizes between initial and final views, the spaces between the views will be different in the initial and final views
//so either you can give different constraints and return an array of CGFloat(0.0)s here (with length equal to the no of elements in giveViewsToAnimate())
//or you can return the values of how much to move the views in the x-coordinate space
func giveHorizontalTransformValues() -> [CGFloat]
//make the initial data and Ui setup of your subview
//DSInitialSetupViewType gives whether this subview instance is used in DSInitialView or DSFinalView
func initialSetup(_ data: Any?, viewType: DSInitialSetupViewType)
//make the data assignment
func assignData(_ data: Any?)
//give initial sizes of the views you want to be animated (you had passed them in giveViewsToAnimate())
//the order should be the same as the order of the views in giveViewsToAnimate()
func getInitialViewSizes(_ data: Any?) -> [CGSize]
//give final sizes of the views you want to be animated (you had passed them in giveViewsToAnimate())
//the order should be the same as the order of the views in giveViewsToAnimate()
func getFinalViewSizes(_ data: Any?) -> [CGSize]
}
3.2 如果我们想在自定义子视图中通过按钮点击来显示最终视图,则调用DSDefaultCellSubviewDelegate
协议中的showFinalViewAction()
。
作者
Swasidhant, [email protected]
Twitter Linkedln
感谢信
特别感谢Vikas Raj在设计方面的所有帮助。没有他的激励、设计帮助和批评,不可能完成这项工作。
许可证
CustomSelector在MIT许可证下可用。有关更多信息,请参阅./LICENSE
文件。