覆盖版本 0.7

Overlay 0.7

测试已测试
语言语言 SwiftSwift
许可证 MIT
发布最后发布2017年9月
SwiftSwift版本4.0
SPM支持SPM

Justin Jia维护。



  • Justin Jia

Overlay是一个非常灵活的UI框架,专为Swift设计。

注意:Overlay仍在开发中,许多事情都可能有所变化。

特性

要求

iOS 9+/Xcode 9+/Swift 4+

入门

定义一个以Custom为前缀的符合协议的自定义类(可用的协议列表可以在此处找到)。例如,为了自定义视图的背景颜色属性,编写以下代码。

class CustomView: UIView, CustomBackgroundColor {
    var backgroundColorStyle: ColorStyle = UIColor.white
}

如果CustomView的父类(在这种情况下,UIView)不是BackgroundColorCustomizableCustomView未实现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