StackUI just like SwiftUI

暴走的鑫鑫

Last update: Jan 3, 2023

Related tags

SwiftUI App StackUI

Overview

StackUI

中文文档

Use UIStackView like SwiftUI.

Use @propertyWrapper, @resultBuilder, chain syntax and other features used by SwiftUI, making UIStackView easy to use. For classes such as Label, Button, and ImageView, it is still the way to use UIKit, but it is encapsulated with chain syntax.

Because SwiftUI requires an iOS13+ system to be used, it is almost impossible to use SwiftUI in actual projects. But the features of SwiftUI are really fascinating, so StackUI is the implementation of SwiftUI in the scope of UIStackView. You can experience some of the features of SwiftUI in StackUI, so that you can learn the new features earlier.

If you are tired of configuring the constraints of UIKit, then StackUI will be a good helper for you. The declarative layout make world better.

Features

Declarative syntax similar to SwiftUI;
Data-driven UI, update data then UI automatically updates;
Support HScrollStack, VScrollStack, when the content exceeds the width or height of the stack, scrolling is automatically turned on;
Chained syntax configuration UIKit;
Can flexibly extend custom classes to support StackUI;

Require

iOS 9.0+
XCode 13.0+
Swift 5.4+

Install

CocoaPods

target'<Your Target Name>' do
    pod'StackUI'
    //If you want to use RxSwift
    pod'StackUI/RxSwift'
end

Execute pod repo update first, then execute pod install

SPM

File> Swift Packages> Add Package Dependency
Add https://github.com/pujiaxin33/StackUI.git
Select "Up to Next Major" with "0.0.5"
If you want to use RxSwift feature, select StackUISwithRxSwift Product

Example

`HStack`

    HStack(alignment: .center, spacing: 5) {
        ImageView().image(UIImage(named: "avatar")).size(width: 40, height: 40)
        Label("user nickname").font(.systemFont(ofSize: 18, weight: .medium))
    }

`VStack`

    VStack {
        Label("user nickname").font(.systemFont(ofSize: 18, weight: .medium))
        Label().text("The user is lazy, nothing left!").font(.systemFont(ofSize: 12)).textColor(.gray)
    }

`HScrollStack` and `ForIn`

    var users = [UserModel]()
    for index in 0...25 {
        let model = UserModel(avatar: "avatar", name: "user\(index)", desc: "user description\(index)")
        users.append(model)
    }
    HScrollStack() {
        for model in users {
            HStack(alignment: .center, spacing: 5) {
                Spacer(spacing: 12)
                ImageView().image(UIImage(named: model.avatar)).size(width: 80, height: 80)
                VStack {
                    Label(model.name).font(.systemFont(ofSize: 18, weight: .medium))
                    Label().text(model.desc).font(.systemFont(ofSize: 12)).textColor(.gray)
                }
                Divider()
            }.size(width: 300)
        }
    }

`@Live`

Add @Live in front of the property, and add the $ symbol prefix when using it. When updating properties, the associated UIKit will automatically update the interface.

    //definition
    @Live var nickName: String? = "User nickname"
    @Live var desc: String? = "The user is lazy, and nothing is left!"
    
    //use
    HStack(distribution: .equalCentering, alignment: .center) {
        HStack(alignment: .center, spacing: 5) {
            ImageView().image(UIImage(named: "avatar")).size(width: 40, height: 40)
            VStack {
                Label($nickName).font(.systemFont(ofSize: 18, weight: .medium))
                Label().text($desc).font(.systemFont(ofSize: 12)).textColor(.gray)
            }
        }
        ImageView().image(UIImage(named: "arrow_right"))
    }
    
    //update
    nickName = "Jay Chou"
    desc = "Ouch, not bad ❤️"

`Driver` of `RxSwift`

    //definition
    var nickName = PublishSubject<String?>()
    var desc = PublishSubject<String?>()
    
    //use
    HStack(distribution: .equalCentering, alignment: .center) {
        HStack(alignment: .center, spacing: 5) {
            ImageView().image(UIImage(named: "avatar")).size(width: 40, height: 40)
            VStack {
                Label(nickName.asDriver(onErrorJustReturn: nil)).font(.systemFont(ofSize: 18, weight: .medium))
                Label().text(desc.asDriver(onErrorJustReturn: nil)).font(.systemFont(ofSize: 12)).textColor(.gray)
            }
        }
        ImageView().image(UIImage(named: "arrow_right"))
    }
    
    //update
    nickName.onNext("Jay Chou")
    desc.onNext("Ouch, not bad ❤️")

Custom View supports `StackUI`

You can customize the parent class

Inherit from View, Label, etc., and then extend custom attributes.

class CustomView: View {
    var customColor: UIColor = .black
    
    func customColor(_ customColor: UIColor) -> Self {
        self.customColor = customColor
        self.backgroundColor = customColor
        return self
    }
}
class CustomLabel: Label {
    var customColor: UIColor = .black
    
    func customColor(_ customColor: UIColor) -> Self {
        self.customColor = customColor
        self.textColor = customColor
        return self
    }
}

If Statement

     var isShowInfo: Bool = false
     HStack(distribution: .equalCentering, alignment: .center) {
         HStack(alignment: .center, spacing: 5) {
             ImageView().image(UIImage(named: "avatar")).size(width: 40, height: 40)
             if self.isShowInfo == true {
                 VStack {
                     Label("User nickname").font(.systemFont(ofSize: 18, weight: .medium))
                     Label().text("The user is lazy, nothing left!").font(.systemFont(ofSize: 12)).textColor(.gray)
                 }
             }else {
                 Label("No Information")
             }
         }
         ImageView().image(UIImage(named: "arrow_right"))
     }

The parent class cannot be modified, conform the protocol

Conform protocols such as StackUIView and StackUILabel, and then extend custom attributes.

class CustomViewFromProtocol: UIView, StackUIView {
    var customColor: UIColor = .black
    
    func customColor(_ customColor: UIColor) -> Self {
        self.customColor = customColor
        self.backgroundColor = customColor
        return self
    }
}
class CustomLabelFromProtocol: UILabel, StackUILabel {
    var customColor: UIColor = .black
    
    func customColor(_ customColor: UIColor) -> Self {
        self.customColor = customColor
        self.textColor = customColor
        return self
    }
}

Attribute configuration not supported by chain syntax yet

Unified configuration through apply closure

HStack(alignment: .center, spacing: 5) {
     Label().text(model.desc).apply {label in
         //If there are attributes that are not defined by the chain syntax, they can be configured in the apply closure, or they can be submitted to Issue for support.
         label.font = UIFont.systemFont(ofSize: 10)
         label.textColor = .gray
     }
}

`ViewBox` use

Sometimes the view needs margins. At this time, you can put the view into the ViewBox, and then set the paddings, so you can indirectly set the top, bottom, left, and right margins of the view. As shown in the following code: Label has margins of top: 10, left: 20, bottom: 10, right: 20.

ViewBox(paddings: .init(top: 10, left: 20, bottom: 10, right: 20)) {
     Label("Hobbies: writing code;").font(. systemFont(ofSize: 15)).numberOfLines(0)
}.backgroundColor(.lightGray)

Currently supported classes

Layer:The relevant properties of Layer are configured in the View class
View
ImageView
Control
Label
Button
TextField
TextView
Stepper
SwitchUI
PageControl
Slider
Spacer
Divider
ActivityIndicatorView
ScrollView
TableView
CollectionView

If there are other classes and attributes that need to be supported, please submit an Issue or Pull Request.

You might also like...

Comments

怎么样才能宽高自适应呢
let stack = VStack { Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)) Label("昵称").font(.systemFont(ofSize: 18, weight: .medium)).backgroundColor(UIColor.red)

TextButton().apply { button in button.text = "xxxxxxx" button.contentMode = .center } Button().title(nickName.asDriver(onErrorJustReturn: nil), for: .normal) }

宽度被撑满了
opened by qingweiSun 1
Use Sourcery generate boilerplate code

Since the project based on UIKit need to add many methods like the original one, this boilerplate code can be generated by tools, like https://github.com/Ernest0-Production/DeclarativeLayoutKit#how-to-extend-chaining-functionality

I think we can do research to generate this type of code https://github.com/pujiaxin33/StackUI/blob/main/Sources/Core/Label.swift

opened by EkkoG 0

StackUI just like SwiftUI

Related tags

Overview

StackUI

Features

Require

Install

CocoaPods

SPM

Example

HStack

VStack

HScrollStack and ForIn

@Live

Driver of RxSwift

Custom View supports StackUI

You can customize the parent class

If Statement

The parent class cannot be modified, conform the protocol

Attribute configuration not supported by chain syntax yet

ViewBox use

Currently supported classes

You might also like...

🎲 100% SwiftUI 2.0, classic 2048 game [SwiftUI 2.0, iOS 14.0+, iPadOS 14.0+, macOS 11.0+, Swift 5.3].

A simple SwiftUI Application to demonstrate creation of UI using SwiftUI.

E-commerce app built in SwiftUI. Built in the course SwiftUI Masterclass in Udemy.

A multiplatform SwiftUI project demonstrating various SwiftUI features.

SwiftUI Projects from Udemy SwiftUI Masterclass

Best architecture for SwiftUI + CombineBest architecture for SwiftUI + Combine

Weather-swiftui - An example of using SwiftUI

Orbit-swiftui - Orbit design system implemented in SwiftUI for iOS

SwiftUI Resume - A simple resume writed by swiftUI + Combine

Comments

怎么样才能宽高自适应呢

Use Sourcery generate boilerplate code

Owner

暴走的鑫鑫

WeChat-like Moments App implemented using Swift 5.5 and SwiftUI

In this mini app covered the concepts like basics of SwiftUI and Navigations and Animations and List with CRUD functions and MVVM and App Launch and App icons adding and also applied persistence using UserDefaults Concept.

Tinder like ui using SwiftUI

GroceryMartApp-iOS-practice - To Practice fundamental SwiftUI feature like navigation, state mamagement, customazing etc

A cross-platform SwiftUI-like framework built on SwiftGtk.

Visualize your dividend growth. DivRise tracks dividend prices of your stocks, gives you in-depth information about dividend paying stocks like the next dividend date and allows you to log your monthly dividend income.

A fluent Collapsing header view like iOS Contacts detail and Weather App

The ToDo-like app using swift

ProgrammingCalculator - a simple programmer's calculator with operators like AND, OR

Fast Multi-store Redux-like architecture for iOS/OSX applications