{"id":2213,"url":"https://github.com/TintPoint/Overlay","last_synced_at":"2025-08-02T23:32:15.127Z","repository":{"id":62449738,"uuid":"62028725","full_name":"TintPoint/Overlay","owner":"TintPoint","description":"Flexible UI Framework Designed for Swift","archived":false,"fork":false,"pushed_at":"2018-07-06T04:28:44.000Z","size":294,"stargazers_count":51,"open_issues_count":0,"forks_count":5,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-11-11T01:09:54.289Z","etag":null,"topics":["interface-builder","ios","protocol-oriented","swift","ui-framework","uikit"],"latest_commit_sha":null,"homepage":"https://www.tintpoint.com","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TintPoint.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2016-06-27T05:50:09.000Z","updated_at":"2023-09-23T00:06:13.000Z","dependencies_parsed_at":"2022-11-01T23:18:07.847Z","dependency_job_id":null,"html_url":"https://github.com/TintPoint/Overlay","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TintPoint%2FOverlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TintPoint%2FOverlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TintPoint%2FOverlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TintPoint%2FOverlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TintPoint","download_url":"https://codeload.github.com/TintPoint/Overlay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228503142,"owners_count":17930520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interface-builder","ios","protocol-oriented","swift","ui-framework","uikit"],"created_at":"2024-01-05T20:16:07.755Z","updated_at":"2024-12-06T17:30:50.532Z","avatar_url":"https://github.com/TintPoint.png","language":"Swift","readme":"# Overlay\n\n[![Build Status](https://travis-ci.com/TintPoint/Overlay.svg?branch=master)](https://travis-ci.com/TintPoint/Overlay)\n[![Carthage Compatible](https://img.shields.io/badge/carthage-compatible-4BC51D.svg)](https://github.com/Carthage/Carthage)\n[![CocoaPods Compatible](https://img.shields.io/cocoapods/v/Overlay.svg)](https://cocoapods.org)\n\nOverlay is a very flexible UI framework designed for Swift.\n\n**Note**: Overlay is still under development and many things are subject to change.\n\n## Features\n\n- [x] Protocol oriented design\n- [x] Interface Builder support\n- [x] Comprehensive unit test coverage\n- [x] Complete documentation\n\n## Requirements\n\niOS 9+ / Xcode 9+ / Swift 4+\n\n## Installation\n\n### Carthage\n\n[Carthage](https://github.com/Carthage/Carthage) is a decentralized dependency manager. To install Overlay, add the following line to your `Cartfile`:\n\n```ogdl\ngithub \"TintPoint/Overlay\" ~\u003e 0.7\n```\n\n### CocoaPods\n\n[CocoaPods](https://cocoapods.org) is a centralized dependency manager. To install Overlay, add the following line to your `Podfile`:\n\n```ruby\npod 'Overlay', '~\u003e 0.7'\n```\n\n## Example\n\nOverlay allows one to write declarative yet type-safe UI code, something looks like this:\n\n```swift\n@IBDesignable\nclass StandardTextField: UITextField, CustomTextColor, CustomPlaceholderTextColor, CustomFont, CustomTextAlignment {\n    let textColorStyle: ColorStyle = Color.primary\n    let placeholderTextColorStyle: ColorStyle = Color.secondary\n    let fontStyle: FontStyle = Font.default\n    let textAlignmentStyle: TextAlignmentStyle = TextAlignment.body\n}\n```\n\n## Getting Started\n\nDefine a custom class that conforms to protocols with `Custom` prefix (list of available protocols can be found [here](#available-protocols)). For example, to customize the background color attribute of a view, write the following code.\n\n```swift\nclass CustomView: UIView, CustomBackgroundColor {\n    let backgroundColorStyle: ColorStyle = UIColor.white\n}\n```\n\nThe compiler will emit an error if `CustomView`'s superclass (in this case, `UIView`) is not `BackgroundColorCustomizable`, or `backgroundColorStyle` is not implemented by `CustomView`. `UIColor` is already conformed to `ColorStyle` protocol so it can be used here. Font and other attributes can also be customized similarly.\n\n`CustomView` can be used like other views, but it is recommended to use it with Interface Builder.\n\n\u003e Open the storyboard file (or nib file), select the view you want to change, navigate to Identity Inceptor, and set `Custom Class` to `CustomView`.\n\nCreating views programmatically is also supported.\n\n```swift\nlet customView = CustomView()\ncustomView.refresh() // make sure to call refresh() after initialization\n```\n\n## Advanced Usage\n\n### Custom Style\n\nIn order to fully take advantage of the power of Swift's type checker, it is recommended to define custom enums (or structs with private initializers) that conform to protocols with `Style` postfix (list of available styles can be found [here](#available-styles)).\n\n```swift\nenum CustomColor: ColorStyle {\n    case normal, disabled\n    func normal() -\u003e UIColor {\n        switch self {\n        case .normal: return UIColor.white\n        case .disabled: return UIColor.black\n        }\n    }\n}\n```\n\nPrevious example can be rewritten as the following code.\n\n```swift\nclass CustomView: UIView, CustomBackgroundColor {\n    let backgroundColorStyle: ColorStyle = CustomColor.normal\n}\n```\n\n### Style Group\n\nFor views which have more than one states (e.g. `UIButton`), their appearance usually needs to change base on state changes. All custom styles have corresponding style groups that support this feature (list of available style groups can be found [here](#available-style-groups)).\n\n```swift\nclass CustomButton: UIButton, CustomBackgroundColor {\n    let backgroundColorStyle: ColorStyle = ColorGroup(normal: CustomColor.normal, disabled: CustomColor.disabled)\n}\n```\n\nIt is also possible to implement app-specific style groups by conforming to protocols with `StyleGroup` postfix.\n\n```swift\nenum CustomColorGroup: ColorStyleGroup {\n    case standard\n    func normal() -\u003e UIColor {\n        return UIColor.white\n    }\n    func disabled() -\u003e UIColor? {\n        return UIColor.black\n    }\n}\n\nclass CustomButton: UIButton, CustomBackgroundColor {\n    let backgroundColorStyle: ColorStyle = CustomColorGroup.standard\n}\n```\n\nStates defined in a style group but aren't supported by the view using it will be ignored. Currently, it is required to call `refresh()` after changing the state.\n\n```swift\nbutton.isEnabled = true\nbutton.refresh()\n```\n\n### Other Attributes\n\nOverlay supports customizing views' colors, fonts, images, texts and text alignments.\n\nHowever, it is still possible to customize other attributes by adopting protocols with `Design` postfix.\n\n```swift\nclass BorderView: UIView, CustomViewDesign {\n    let design: (UIView) -\u003e Void = { view in\n        view.layer.borderWidth = 1\n    }\n}\n```\n\n### Custom Layout\n\nMost views contain subviews. Overlay is designed with this in mind, but it's not its goal to handle subview layouts. Overlay should only handle views' style attributes (like colors and fonts), and the main application should handle views' layouts (like origin and size). `CustomLayout` protocol allows Overlay to work with Interface Builder together seamlessly.\n\nDefine a custom class that conforms to `CustomLayout` protocol. Then create a nib file and set its `File's Owner` to the newly defined class.\n\n```swift\nclass ComplexView: UIView, CustomLayout {\n    let contentNib: UINib = UINib(nibName: \"ComplexView\", bundle: Bundle(for: ComplexView.self))\n}\n```\n\nThe first root view inside `ComplexView.xib` will be loaded and added as a content view of `ComplexView`. Note: Added view's background color usually should be clear color.\n\nCreate `IBOutlet` and connect them like usual, if needed.\n\n```swift\nclass ComplexView: UIView, CustomLayout {\n    let contentNib: UINib = UINib(nibName: \"ComplexView\", bundle: Bundle(for: ComplexView.self))\n    @IBOutlet weak var button: CustomButton?\n}\n```\n\n## Reference\n\n### Available Protocols\n\n#### Custom Cell\n\n\u003e - CustomCell\n\u003e - CustomHeaderFooterView\n\u003e - CustomReusableView\n\n#### Custom Design\n\n\u003e - CustomActivityIndicatorViewDesign\n\u003e - CustomBarButtonItemDesign\n\u003e - CustomBarItemDesign\n\u003e - CustomButtonDesign\n\u003e - CustomCollectionViewDesign\n\u003e - CustomControlDesign\n\u003e - CustomDatePickerDesign\n\u003e - CustomDesign\n\u003e - CustomImageViewDesign\n\u003e - CustomLabelDesign\n\u003e - CustomNavigationBarDesign\n\u003e - CustomPageControlDesign\n\u003e - CustomPickerViewDesign\n\u003e - CustomProgressViewDesign\n\u003e - CustomScrollViewDesign\n\u003e - CustomSearchBarDesign\n\u003e - CustomSegmentedControlDesign\n\u003e - CustomSliderDesign\n\u003e - CustomStackViewDesign\n\u003e - CustomStepperDesign\n\u003e - CustomSwitchDesign\n\u003e - CustomTabBarDesign\n\u003e - CustomTabBarItemDesign\n\u003e - CustomTableViewDesign\n\u003e - CustomTextFieldDesign\n\u003e - CustomTextViewDesign\n\u003e - CustomToolbarDesign\n\u003e - CustomViewDesign\n\u003e - CustomWebViewDesign\n\n#### Custom Layout\n\n\u003e - CustomLayout\n\n#### Custom Color\n\n\u003e - CustomBackgroundColor\n\u003e - CustomBadgeColor\n\u003e - CustomBarTintColor\n\u003e - CustomBorderColor\n\u003e - CustomColor\n\u003e - CustomMaximumTrackTintColor\n\u003e - CustomMinimumTrackTintColor\n\u003e - CustomOnTintColor\n\u003e - CustomPlaceholderTextColor\n\u003e - CustomProgressTintColor\n\u003e - CustomSectionIndexBackgroundColor\n\u003e - CustomSectionIndexColor\n\u003e - CustomSectionIndexTrackingBackgroundColor\n\u003e - CustomSeparatorColor\n\u003e - CustomShadowColor\n\u003e - CustomTextColor\n\u003e - CustomThumbTintColor\n\u003e - CustomTintColor\n\u003e - CustomTitleColor\n\u003e - CustomTitleShadowColor\n\u003e - CustomTrackTintColor\n\u003e - CustomUnselectedItemTintColor\n\n#### Custom Font\n\n\u003e - CustomFont\n\u003e - CustomTitleFont\n\n#### Custom Image\n\n\u003e - CustomBackgroundImage\n\u003e - CustomDecrementImage\n\u003e - CustomHighlightedImage\n\u003e - CustomImage\n\u003e - CustomIncrementImage\n\u003e - CustomLandscapeImagePhone\n\u003e - CustomMaximumTrackImage\n\u003e - CustomMaximumValueImage\n\u003e - CustomMinimumTrackImage\n\u003e - CustomMinimumValueImage\n\u003e - CustomOffImage\n\u003e - CustomOnImage\n\u003e - CustomProgressImage\n\u003e - CustomScopeBarButtonBackgroundImage\n\u003e - CustomSearchFieldBackgroundImage\n\u003e - CustomSelectedImage\n\u003e - CustomShadowImage\n\u003e - CustomThumbImage\n\u003e - CustomTrackImage\n\n#### Custom Text\n\n\u003e - CustomPlaceholder\n\u003e - CustomPrompt\n\u003e - CustomScopeButtonTitles\n\u003e - CustomSegmentTitles\n\u003e - CustomText\n\u003e - CustomTitle\n\n#### Custom Text Alignment\n\n\u003e - CustomTextAlignment\n\u003e - CustomTitleTextAlignment\n\n### Available Styles\n\n\u003e - ColorStyle\n\u003e - ColorStyleGroup\n\u003e - FontStyle\n\u003e - FontStyleGroup\n\u003e - ImageStyle\n\u003e - ImageStyleGroup\n\u003e - TextAlignmentStyle\n\u003e - TextAlignmentStyleGroup\n\u003e - TextStyle\n\u003e - TextStyleGroup\n\n### Available Style Groups\n\n\u003e - ColorGroup\n\u003e - FontGroup\n\u003e - ImageGroup\n\u003e - TextAlignmentGroup\n\u003e - TextGroup\n\n### Available States\n\n#### ViewHideable\n\n\u003e - UIView and its subclasses\n\n#### ViewFocusable\n\n\u003e - UIView and its subclasses\n\n#### ViewDisable\n\n\u003e - UIBarButtonItem\n\u003e - UIBarItem\n\u003e - UIButton\n\u003e - UIControl\n\u003e - UIDatePicker\n\u003e - UILabel\n\u003e - UIPageControl\n\u003e - UIRefreshControl\n\u003e - UISegmentedControl\n\u003e - UISlider\n\u003e - UIStepper\n\u003e - UISwitch\n\u003e - UITabBarItem\n\u003e - UITextField\n\n#### ViewSelectable\n\n\u003e - UIButton\n\u003e - UIControl\n\u003e - UIDatePicker\n\u003e - UIPageControl\n\u003e - UIRefreshControl\n\u003e - UISegmentedControl\n\u003e - UISlider\n\u003e - UIStepper\n\u003e - UISwitch\n\u003e - UITableViewCell\n\u003e - UITextField\n\n#### ViewHighlightable\n\n\u003e - UIButton\n\u003e - UIControl\n\u003e - UIDatePicker\n\u003e - UIImageView\n\u003e - UILabel\n\u003e - UIPageControl\n\u003e - UIRefreshControl\n\u003e - UISegmentedControl\n\u003e - UISlider\n\u003e - UIStepper\n\u003e - UISwitch\n\u003e - UITableViewCell\n\u003e - UITextField\n","funding_links":[],"categories":["UI","Swift"],"sub_categories":["Font","Other free courses","Other Testing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTintPoint%2FOverlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTintPoint%2FOverlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTintPoint%2FOverlay/lists"}