๐ 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 ๐
| 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 |
- iOS 12.0+
- XCode 13.0+
- Swift 5.0+
Swift 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:
dependencies: [
.package(url: "https://github.com/hyperconnect/HypeUI", .upToNextMajor(from: "0.3.0"))
]The preferred installation method is with CocoaPods. Add the following to your Podfile:
pod 'HypeUI'| Supported Features | |
|---|---|
| HStack | โ |
| VStack | โ |
| ZStack | โ |
| Button | โ |
| Text | โ |
| Image | โ |
| ScrollView | โ |
| Behavior | โ |
| Spacer | โ |
| LinearGradient | โ |
| AlignmentView | โ |
| ViewBuildable | โ |
| View Modifier | โ |
| Text Modifier | โ |
| Stack Modifier | โ |
| Image Modifier | โ |
| ScrollView Modifier | โ |
| name | Description |
|---|---|
| setHContentHugging | Sets the priority with which a view resists being made larger than its intrinsic size. |
| setVContentHugging | Sets the priority with which a view resists being made larger than its intrinsic size. |
| setHContentCompressionResistance | Sets the priority with which a view resists being made smaller than its intrinsic size. |
| setVContentCompressionResistance | Sets the priority with which a view resists being made smaller than its intrinsic size. |
| makeRatio | Modify the ratio of the size of the view. |
| cornerRadius | Modify corner radius. |
| border | Modify border style. |
| background | Modifiy background color. |
| makeContentMode | Modify content mode. |
| frame | Positions this view within an invisible frame with the specified size. |
| padding | Adds an equal padding amount to specific edges of this view. |
| allowsHitTesting | Configures whether this view participates in hit test operations. |
| masksToBounds | Setting sublayers are clipped to the layerโs bounds. |
| accessibilityIdentifier | Uses the string you specify to identify the view. |
| overlay | Layers the views that you specify in front of this view. |
| background | Layers the views that you specify behind this view. |
| name | Description |
|---|---|
| font | Modify text font. |
| foregroundColor | Modify foreground color. |
| textAligned | Modify text alignment |
| lineLimit | The maximum number of lines that text can occupy in a view. |
| lineBreakMode | Modify line break mode. |
| adjustFontSize | Modify adjustsfontsize to fit width |
| minimumScaleFactor | Modify minimum scale factor. |
| name | Description |
|---|---|
| distributed | Modify stack's distribution layout. |
| name | Description |
|---|---|
| tintColor | Modify tint color. |
| name | Description |
|---|---|
| bounces | Modify scroll view bounces. |
| isPagingEnabled | Modify scroll view paging enabled. |
| isScrollEnabled | Modify scroll view enabled. |
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(spacing: 8) {
Text()
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
Spacer()
}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(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("โจ")
.foregroundColor(UIColor.black)
.font(UIFont.systemFont(ofSize: 14, weight: .regular))
.textAligned(.center)
.background(.white)
.cornerRadius(16)Image(Resource.Profile.placeholderImage)
.frame(width: 48, height: 48)
.cornerRadius(24)// 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 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()
.frame(width: 10)
Spacer()
.frame(height: 20)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.
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")
}
}
}
}[email protected] [email protected] [email protected] [email protected]