Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyperconnect/HypeUI
🌺 HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit
https://github.com/hyperconnect/HypeUI
ios swift swiftui
Last synced: 10 days ago
JSON representation
🌺 HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit
- Host: GitHub
- URL: https://github.com/hyperconnect/HypeUI
- Owner: hyperconnect
- License: apache-2.0
- Created: 2022-10-28T00:03:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T08:43:15.000Z (5 months ago)
- Last Synced: 2024-10-20T05:13:53.701Z (19 days ago)
- Topics: ios, swift, swiftui
- Language: Swift
- Homepage:
- Size: 115 KB
- Stars: 129
- Watchers: 9
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-swift - HypeUI - 🌺 HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit (Libs / Layout)
- awesome-swift - HypeUI - 🌺 HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit (Libs / Layout)
README
# HypeUI
🚀 HypeUI is a implementation of Apple's SwiftUI DSL style based on UIKit
Want to enjoy SwiftUI syntax with UIKit? It's time to use HypeUI 😊
[](https://github.com/sindresorhus/awesome)
| | Why to use HypeUI? |
---|-----------------
📱 | Support iOS 12+
✨ | HypeUI is compatible with UIKit based project using SwiftUI style syntax
🏄♂️ | Reduce UI & Autolayout codes more than 30%
⛳️ | Provide UI binding extension with RxSwift and RxCocoa
🦄 | Easy to use!
✈️ | Improve readability and intuitiveness of complex layouts
🤩 | Have a blast
⛷ | Customize reusable component, design system
❄️ | Test with accessibility Identifier
## Contents
- [Requirements](#requirements)
- [Installation](#installation)
- [Supported Features](#supported_features)
* [View Modifier](#view_modifier)
* [Text Modifier](#text_modifier)
* [Stack Modifier](#stack_modifier)
* [ScrollView Modifier](#scrollview_modifier)
- [Usage](#usage)
* [HStack](#hstack)
* [VStack](#vstack)
* [ZStack](#zstack)
* [Button](#button)
* [Text](#text)
* [Image](#image)
* [ScrollView](#scrollview)
* [Behavior](#behavior)
* [Spacer](#spacer)
* [LinearGradient](#lineargradient)
* [ViewBuildable](#viewbuildable)
- [Dependencies](#dependencies)
## Requirements
- iOS 12.0+
- XCode 13.0+
- Swift 5.0+
## Installation
### Swift Package Manager
[Swift Package Manager](https://swift.org/package-manager/) is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.
> Xcode 13+ is required to build HypeUI using Swift Package Manager.
To integrate HypeUI into your Xcode project using Swift Package Manager, add it to the dependencies value of your `Package.swift`:
```swift
dependencies: [
.package(url: "https://github.com/hyperconnect/HypeUI", .upToNextMajor(from: "0.3.0"))
]
```
### CocoaPod
The preferred installation method is with [CocoaPods](https://cocoapods.org). Add the following to your `Podfile`:
```ruby
pod 'HypeUI'
```
## Supported Features
| | Supported Features |
----------------|----------------
HStack | ✅
VStack | ✅
ZStack | ✅
Button | ✅
Text | ✅
Image | ✅
ScrollView | ✅
Behavior | ✅
Spacer | ✅
LinearGradient | ✅
AlignmentView | ✅
ViewBuildable | ✅
View Modifier | ✅
Text Modifier | ✅
Stack Modifier | ✅
ScrollView Modifier | ✅
| name | Description |
---------------------------------|----------------
setHContentHugging | Adjusts the priority for a view to resist growing beyond its intrinsic size horizontally.
setVContentHugging | Adjusts the priority for a view to resist growing beyond its intrinsic size vertically.
setHContentCompressionResistance | Adjusts the priority for a view to resist shrinking below its intrinsic size horizontally.
setVContentCompressionResistance | Adjusts the priority for a view to resist shrinking below its intrinsic size vertically.
makeRatio | Sets the aspect ratio constraint for the view's size.
cornerRadius | Applies a corner radius to the view to create rounded corners.
border | Adds a border with specified color and width to the view.
background | Sets the background color of the view.
makeContentMode | Sets the content mode of the view.
frame | Positions the view within a specified frame size.
padding | Adds padding around specific edges of the view.
allowsHitTesting | Enables or disables the view's interaction with touch events.
masksToBounds | Clips the view's sublayers to its boundaries.
accessibilityIdentifier | Assigns an identifier used to find this view in tests.
overlay | Places specified views in front of the view.
background | Layers the views that you specify behind this view.
center | Centers the view within a new parent view.
tint | Applies a tint color to the view.
opacity | Sets the transparency level of the view.
scaleEffect | Scales the view by specified factors along the x and y axes.
rotationEffect | Rotates the view by a specified angle around a given anchor point.
| name | Description |
---------------------------------|----------------
font | Sets the font of the text.
foregroundColor | Applies a foreground color to the text.
textAligned | Sets the alignment of the text within its container.
lineLimit | Specifies the maximum number of lines the text can span.
lineBreakMode | Defines how text wraps when it reaches the edge of its container.
adjustFontSize | Adjusts the font size of the text to fit its width.
minimumScaleFactor | Sets the smallest multiplier for text size reduction to fit the width.
preferredMaxLayoutWidth | Sets the preferred maximum width for the Text object and enables method chaining.
baselineAdjusted | Applies a baseline adjustment to the Text object and enables method chaining.
| name | Description |
---------------------------------|----------------
distributed | Modify stack's distribution layout.
| name | Description |
---------------------------------|----------------
bounces | Modify scroll view bounces.
isPagingEnabled | Modify scroll view paging enabled.
isScrollEnabled | Modify scroll view enabled.
## Usage
### HStack
```swift
HStack(alinement: .center, spacing: 4) {
Image(Asset.icStar.image)
.frame(width: 12, height: 12)
Text()
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
Spacer()
}
```
### VStack
```swift
VStack(spacing: 8) {
Text()
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
Spacer()
}
```
### ZStack
```swift
ZStack {
HStack(alinement: .center, spacing: 4) {
Image(Asset.icStar.image)
.frame(width: 12, height: 12)
Text()
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
Spacer()
}
VStack {
Text()
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
Spacer()
}
}
```
### Button
```swift
Button(action: { // DO SOMETHING ex) reactor action, closure }) {
HStack(alignment: .center, spacing: 5.0) {
Image("cart")
.padding(.leading, 10.0)
Text("Add to Cart")
.foregroundColor(.black)
.padding(.all, 10.0)
}
}
.background(Color.gray)
.cornerRadius(5)
```
### Text
```swift
Text("✨")
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
.textAligned(.center)
.background(.white)
.cornerRadius(16)
```
### Image
```swift
Image(Resource.Profile.placeholderImage)
.frame(width: 48, height: 48)
.cornerRadius(24)
```
### ScrollView
```swift
// MARK: Example
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .fill) {
Image(image: Asset.imgPopupPrivateCall.image)
.makeRatio(0.46106)
Spacer()
.frame(height: 24)
VStack {
viewModel.messages.map { message in
HStack(alignment: .top, spacing: 8) {
Text("•")
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
.foregroundColor(.Palette.gray04)
.frame(width: 6)
Text(message)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
.foregroundColor(.Palette.gray04)
.lineLimit(2)
.lineBreakMode(.byCharWrapping)
Spacer()
.frame(width: 5)
}
.padding(.vertical, 8)
}
}
Spacer()
.frame(height: 16)
}
}
```
### @Behavior - It's seems like SwiftUI's @State using DynamicLinkable 😎
```swift
@Behavior var isLive: Bool = false
@Behavior var username: String? = nil
@Behavior var profileImageURL: URL? = nil
// MARK Example
final class SearchHostHistoryViewCell: UICollectionViewCell {
@Behavior var isLive: Bool = false
@Behavior var username: String? = nil
@Behavior var profileImageURL: URL? = nil
override init(frame: CGRect) {
super.init(frame: frame)
contentView.addSubviewWithFit(
ZStack {
VStack(alignment: .center, spacing: 8) {
Image(Resource.Profile.placeholderImage)
.linked($profileImageURL.flatMapLatest { $0?.getImage(failover: Resource.Profile.placeholderImage) ?? .just(Resource.Profile.placeholderImage) }, keyPath: \.image)
.makeContentMode(.scaleAspectFill)
.frame(width: 48, height: 48)
.cornerRadius(24)
.background(.Palette.gray05)
Text("")
.linked($username, keyPath: \.text)
.textAligned(.center)
.foregroundColor(.darkModeSupporting(.Palette.gray01, .Palette.dkGray01))
.font(UIFont.systemFont(ofSize: 10, weight: .regular))
.frame(height: 12)
}.padding(UIEdgeInsets(top: 12, left: 0, bottom: 4, right: 0))
VStack(alignment: .center) {
Spacer()
Text("LIVE")
.foregroundColor(.Palette.white)
.font(UIFont.systemFont(ofSize: 8, weight: .bold))
.padding(UIEdgeInsets(top: 2, left: 4, bottom: 2, right: 4))
.background(.Palette.red)
.cornerRadius(4)
.linked($isLive.not(), keyPath: \.isHidden)
Spacer()
.frame(height: 20)
}
}
)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
```
### Spacer
```swift
Spacer()
.frame(width: 10)
Spacer()
.frame(height: 20)
```
### LinearGradient
```
ProfileView()
.background(
LinearGradient(
gradient: Gradient(
stops: [
Stop(color: UIColor.black, location: 1.0),
Stop(color: UIColor.black, location: 0.2),
Stop(color: UIColor.black, location: 0.0)
]),
startPoint: .top,
endPoint: .bottom
)
)
```
### ViewBuildable - Customize UI, Make reusable component and Design System by confirming ViewBuildable protocol.
```swift
struct ProfileView: ViewBuildable {
@Behavior var country: String
@Behavior var name: String
func build() -> UIView {
VStack {
HStack(alignment: .center, spacing: 12) {
Text("")
.linked($country, keyPath: \.text)
.font(UIFont.systemFont(ofSize: 20, weight: .regular))
.accessibilityIdentifier("country")
Text("")
.linked($name, keyPath: \.text)
.font(UIFont.systemFont(ofSize: 20, weight: .regular))
.accessibilityIdentifier("name")
}
}
}
}
```
## Main Contributors
[email protected]
[email protected]
[email protected]
[email protected]
## Dependencies
- [RxSwift](https://github.com/ReactiveX/RxSwift)
- [RxCocoa](https://github.com/ReactiveX/RxSwift/tree/main/RxCocoa)
- [SnapKit](https://github.com/SnapKit/SnapKit)