Overlay是一个非常灵活的UI框架,专为Swift设计。
注意:Overlay仍在开发中,许多事情都可能有所变化。
iOS 9+/Xcode 9+/Swift 4+
定义一个以Custom
为前缀的符合协议的自定义类(可用的协议列表可以在此处找到)。例如,为了自定义视图的背景颜色属性,编写以下代码。
class CustomView: UIView, CustomBackgroundColor {
var backgroundColorStyle: ColorStyle = UIColor.white
}
如果CustomView
的父类(在这种情况下,UIView
)不是BackgroundColorCustomizable
或CustomView
未实现backgroundColorStyle
,编译器将发出错误。《UIColor》已经符合《ColorStyle》协议,所以此处可以使用它。字体和其他属性也可以以类似的方式进行自定义。
CustomView
可以像其他视图一样使用,但建议与Interface Builder一起使用。
打开Storyboard文件(或nib文件),选择要更改的视图,在Identity Inspector中导航,将
Custom Class
设置为CustomView
。
也支持以编程方式创建视图。
let customView = CustomView()
customView.refresh() // make sure to call refresh() after initialization
为了完全发挥Swift的类型检查器的力量,建议定义一个以Style
为后缀的符合协议的自定义枚举(可用的样式列表可以在此处找到)。
enum CustomColor: ColorStyle {
case normal, disabled
func normal() -> UIColor {
switch self {
case .normal: return UIColor.white
case .disabled: return UIColor.black
}
}
}
前面的示例可以重写为以下代码。
class CustomView: UIView, CustomBackgroundColor {
let backgroundColorStyle: ColorStyle = CustomColor.normal
}
对于具有多个状态(例如:UIButton
)的视图,其外观通常会根据状态变化而变化。所有自定义样式都有相应的样式组支持此功能(可用的样式组列表可以在此处找到)。
class CustomButton: UIButton, CustomBackgroundColor {
let backgroundColorStyle: ColorStyle = ColorGroup(normal: CustomColor.normal, disabled: CustomColor.disabled)
}
还可以通过符合带有StyleGroup
后缀的协议来实现应用特定的样式组。
enum CustomColorGroup: ColorStyleGroup {
case standard
func normal() -> UIColor {
return UIColor.white
}
func disabled() -> UIColor? {
return UIColor.black
}
}
class CustomButton: UIButton, CustomBackgroundColor {
let backgroundColorStyle: ColorStyle = CustomColorGroup.standard
}
在样式组中定义但未得到使用此视图的支持的状态将被忽略。目前,在更改状态后,需要调用refresh()
。
button.isEnabled = true
button.refresh()
覆盖层支持自定义视图的颜色、字体、图像、文本和文本对齐。
然而,可以通过采用带有Design
后缀的协议来自定义其他属性。
class BorderView: UIView, CustomViewDesign {
let design: (UIView) -> Void = { view in
view.layer.borderWidth = 1
}
}
大多数视图都包含子视图。覆盖层考虑到这一点进行设计,但其目标并不是处理子视图布局。覆盖层应仅处理视图的样式属性(如颜色和字体),而主应用程序应处理视图的布局(如原点和大小)。CustomLayout
协议允许覆盖层与Interface Builder无缝协作。
定义一个符合CustomLayout
协议的自定义类。然后创建一个nib文件,并将其File's Owner
设置为新建的类。
class ComplexView: UIView, CustomLayout {
let contentNib: UINib = UINib(nibName: "ComplexView", bundle: Bundle(for: ComplexView.self))
}
将在ComplexView.xib
内部的第一个根视图被加载并添加到ComplexView
的内容视图中。注意:添加的视图的背景颜色通常应该是清晰颜色。
如果需要,像往常一样创建IBOutlet
并将它们连接起来。
class ComplexView: UIView, CustomLayout {
let contentNib: UINib = UINib(nibName: "ComplexView", bundle: Bundle(for: ComplexView.self))
@IBOutlet weak var button: CustomButton?
}
- CustomCell
- CustomHeaderFooterView
- CustomReusableView
- CustomActivityIndicatorViewDesign
- CustomBarButtonItemDesign
- CustomBarItemDesign
- CustomButtonDesign
- CustomCollectionViewDesign
- CustomControlDesign
- CustomDatePickerDesign
- CustomDesign
- CustomImageViewDesign
- CustomLabelDesign
- CustomNavigationBarDesign
- CustomPageControlDesign
- CustomPickerViewDesign
- CustomProgressViewDesign
- CustomScrollViewDesign
- CustomSearchBarDesign
- CustomSegmentedControlDesign
- CustomSliderDesign
- CustomStackViewDesign
- CustomStepperDesign
- CustomSwitchDesign
- CustomTabBarDesign
- CustomTabBarItemDesign
- CustomTableViewDesign
- CustomTextFieldDesign
- CustomTextViewDesign
- CustomToolbarDesign
- CustomViewDesign
- CustomWebViewDesign
- CustomLayout
- CustomBackgroundColor
- CustomBadgeColor
- CustomBarTintColor
- CustomBorderColor
- CustomColor
- CustomMaximumTrackTintColor
- CustomMinimumTrackTintColor
- CustomOnTintColor
- CustomPlaceholderTextColor
- CustomProgressTintColor
- CustomSectionIndexBackgroundColor
- CustomSectionIndexColor
- CustomSectionIndexTrackingBackgroundColor
- CustomSeparatorColor
- CustomShadowColor
- CustomTextColor
- CustomThumbTintColor
- CustomTintColor
- CustomTitleColor
- CustomTitleShadowColor
- CustomTrackTintColor
- CustomUnselectedItemTintColor
- CustomFont
- CustomTitleFont
- CustomBackgroundImage
- CustomDecrementImage
- CustomHighlightedImage
- CustomImage
- 自定义增量图像
- 自定义电话景观图像
- 自定义最大轨迹图像
- 自定义最大值图像
- 自定义最小轨迹图像
- 自定义最小值图像
- 自定义关闭图像
- 自定义开启图像
- 自定义进度图像
- 自定义作用域按钮背景图像
- 自定义搜索字段背景图像
- 自定义选中图像
- 自定义阴影图像
- 自定义滑块图像
- 自定义轨道图像
- 自定义占位符
- 自定义提示
- 自定义作用域标题按钮
- 自定义段落数字标题
- 自定义文本
- 自定义标题
- 自定义文本对齐
- 自定义标题文本对齐
- 色彩样式
- 色彩样式组
- 字体样式
- 字体样式组
- 图像样式
- 图像样式组
- 文本对齐样式
- 文本对齐样式组
- 文本样式
- 文本样式组
- 色彩组
- 字体组
- 图像组
- 文本对齐组
- 文本组
- UIView及子类
- UIView及子类
- UIBarButtonItem
- UIBarItem
- UIButton
- UIControl
- UIDatePicker
- UILabel
- UIPageControl
- UIRefreshControl
- UISegmentedControl
- UISlider
- UIStepper
- UISwitch
- UITabBarItem
- UITextField
- UIButton
- UIControl
- UIDatePicker
- UIPageControl
- UIRefreshControl
- UISegmentedControl
- UISlider
- UIStepper
- UISwitch
- UITableViewCell
- UITextField
- UIButton
- UIControl
- UIDatePicker
- UIImageView
- UILabel
- UIPageControl
- UIRefreshControl
- UISegmentedControl
- UISlider
- UIStepper
- UISwitch
- UITableViewCell
- UITextField