Swiftpack.co - pujiaxin33/StackUI as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
pujiaxin33/StackUI
StackUI just like SwiftUI
.package(url: "https://github.com/pujiaxin33/StackUI.git", from: "0.0.3")

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.0+

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

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 ForEach

    var users = [UserModel](https://raw.github.com/pujiaxin33/StackUI/main/)
    for index in 0...25 {
        let model = UserModel(avatar: "avatar", name: "user\(index)", desc: "user description\(index)")
        users.append(model)
    }
    HScrollStack() {
        ForEach(users) {(model) in
            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
    }
}

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.

GitHub

link
Stars: 0
Last commit: 4 days ago

Ad: Job Offers

iOS Software Engineer @ Perry Street Software
Perry Street Software is Jack’d and SCRUFF. We are two of the world’s largest gay, bi, trans and queer social dating apps on iOS and Android. Our brands reach more than 20 million members worldwide so members can connect, meet and express themselves on a platform that prioritizes privacy and security. We invest heavily into SwiftUI and using Swift Packages to modularize the codebase.

Submit a free job ad (while I'm testing this). The analytics numbers for this website are here.

Dependencies

Related Packages

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics