Solo

aspectRatio

/// 1:1
UView().aspectRatio()

/// 1:1 low priority
UView().aspectRatio(priority: .defaultLow)

/// 4:3
UView().aspectRatio(4 / 3)

/// 4:3 low priority
UView().aspectRatio(priority: .defaultLow)

width

/// 100pt
UView().width(100)

/// Stateable width
@UState var width: CGFloat = 100

UView().width($width)

/// Stateable but based on different type
@UState var expanded = false

UView().width($expanded.map { $0 ? 200 : 100 })

/// Different value for different devices
/// 80pt for iPhone5, 120pt for any iPad, 100pt for any other devices
UView().width(100 !! .iPhone5(80) !! .iPad(150))

height

/// 100pt
UView().height(100)

/// Stateable width
@UState var height: CGFloat = 100

UView().height($width)

/// Stateable but based on different type
@UState var expanded = false

UView().height($expanded.map { $0 ? 200 : 100 })

/// Different value for different devices
/// 80pt for iPhone5, 120pt for any iPad, 100pt for any other devices
UView().height(100 !! .iPhone5(80) !! .iPad(150))

size

/// width 100pt, height 100pt
UView().size(100)

/// width 100pt, height 200pt
UView().size(100, 200)

/// Stateable
@UState var width: CGFloat = 100
@UState var height: CGFloat = 100

UView().size($width, 200)
UView().size(100, $height)
UView().size($width, $height)

/// for both
@UState var size: CGFloat = 100
UView().size($size)

/// Stateable but based on different type
@UState var expanded = false

UView().size($expanded.map { $0 ? 200 : 100 })
UView().size(100, $expanded.map { $0 ? 200 : 100 })
UView().size(100 !! .iPad(200), $expanded.map { $0 ? 200 !! .iPad(300) : 100 !! .iPad(200) })
UView().size($width, $expanded.map { $0 ? 200 : 100 })
UView().size($expanded.map { $0 ? 200 : 100 }, 100)
UView().size($expanded.map { $0 ? 200 : 100 }, $height)

Read and write view’s solo constraints directly. And even animate them.

let v = UView()
v.width = 100
v.height = 100
UIViewPropertyAnimator(duration: 0.5, curve: .easeInOut) {
    v.width = 200
    v.height = 300
}.startAnimation()

Super

edges

/// all edges to superview 0pt
UView().edgesToSuperview()

/// all edges to superview 16pt
UView().edgesToSuperview(16)

/// horizontal edges: 16pt, vertical edges: 24pt
UView().edgesToSuperview(16, 24)

/// horizontal edges: 16pt
UView().edgesToSuperview(h: 16)

/// vertical edges: 24pt
UView().edgesToSuperview(v: 24)

/// each edge to different value to superview
UView().edgesToSuperview(top: 24, leading: 16, trailing: -16, bottom: -8)

top

/// 16pt to top of superview
UView().topToSuperview(16)

/// 16pt to safeArea top of superview
UView().topToSuperview(16, safeArea: true)

/// Stateable
@UState var top: CGFloat = 16

UView().topToSuperview($top)

/// Stateable but based on different type
@UState var expanded = false

UView().topToSuperview($expanded.map { $0 ? 0 : 16 })

leading

/// 16pt to leading of superview
UView().leadingToSuperview(16)

/// all the same as with topToSuperview

trailing

/// -16pt to trailing of superview
UView().trailingToSuperview(-16)

/// all the same as with topToSuperview

bottom

/// -16pt to bottom of superview
UView().leadingToSuperview(-16)

/// all the same as with topToSuperview

centerX

/// right in center of superview horizontally
UView().centerXInSuperview()

/// 16pt from horizontal center of superview
UView().centerXToSuperview(16)

/// all the same as with topToSuperview

centerY

/// right in center of superview vertically
UView().centerYInSuperview()

/// 16pt from vertical center of superview
UView().centerYToSuperview(16)

/// all the same as with topToSuperview

center

/// right in center of superview both horizontally and vertically
UView().centerInSuperview()

/// 16pt from horizontal center of superview, 8pt from vertical center of superview
UView().centerInSuperview(x: 16, y: 8)

/// all the same as with topToSuperview

width

/// equal width with superview
UView().widthToSuperview()

/// equal width with superview with low priority
UView().widthToSuperview(priority: .defaultLow)

/// half width of superview
UView().widthToSuperview(multipliedBy: 0.5)

/// half width of superview with low priority
UView().widthToSuperview(multipliedBy: 0.5, priority: .defaultLow)

/// all the same as with topToSuperview

height

/// equal height with superview
UView().heightToSuperview()

/// all the same as with widthToSuperview

Read and write view’s super constraints directly. And even animate them.

let v = UView()
v.top = 24
v.leading = 16
v.trailing = 16
v.bottom = -24
UIViewPropertyAnimator(duration: 0.5, curve: .easeInOut) {
    v.top = 0
    v.leading = 8
    v.trailing = 8
    v.bottom = 0
}.startAnimation()

Relative

top

UView().top(to: otherView)
UView().top(to: otherView, 16)
UView().top(to: otherView, $topStateValue)
UView().top(to: .top, of: otherView)
UView().top(to: .top, of: otherView, $topStateValue)

leading

UView().leading(to: otherView)

/// all the same as for top(to:)

trailing

UView().trailing(to: otherView)

/// all the same as for top(to:)

bottom

UView().bottom(to: otherView)

/// all the same as for top(to:)

left

UView().left(to: otherView)

/// all the same as for top(to:)

right

UView().right(to: otherView)

/// all the same as for top(to:)

centerX

UView().centerX(to: otherView)

/// all the same as for top(to:)

centerY

UView().centerY(to: otherView)

/// all the same as for top(to:)

center

UView().center(to: otherView)

/// all the same as for top(to:)

width

UView().width(to: otherView)

/// all the same as for top(to:)

height

UView().height(to: otherView)

/// all the same as for top(to:)

equal

/// just a convenient method to width&height
UView().equalSize(to: otherView)

/// all the same as for top(to:)

💡 TIP: Feel free to use UState, and values based on device type everywhere

Relative constraints by tags 🔥

Really often we have to create some views with constraints related to each other 😃

The classic way is to create a variable with view somewhere outside, like this

let someView = UView()

then we used it with other views to make relative constraints

UView {
    someView.size(200).background(.red).centerInSuperview()
    UView().size(100).background(.cyan).centerXInSuperview().top(to: someView)
    UView().size(100).background(.purple).centerXInSuperview().bottom(to: someView)
    UView().size(100).background(.yellow).centerYInSuperview().right(to: someView)
    UView().size(100).background(.green).centerYInSuperview().left(to: someView)
}

But if it’s not necessary to declare view outside the you can use tag! And easily rely to it from other views!

UView {
    UView().size(200).background(.red).centerInSuperview().tag(7)
    UView().size(100).background(.cyan).centerXInSuperview().top(to: 7)
    UView().size(100).background(.purple).centerXInSuperview().bottom(to: 7)
    UView().size(100).background(.yellow).centerYInSuperview().right(to: 7)
    UView().size(100).background(.green).centerYInSuperview().left(to: 7)
}

Even order doesn’t matter 🤗

UView {
    UView().size(100).background(.cyan).centerXInSuperview().top(to: 7)
    UView().size(100).background(.purple).centerXInSuperview().bottom(to: 7)
    UView().size(100).background(.yellow).centerYInSuperview().right(to: 7)
    UView().size(100).background(.green).centerYInSuperview().left(to: 7)
    UView().size(200).background(.red).centerInSuperview().tag(7)
}

You even can add view later and all related views will immediately stick to it once it’s added 🚀

let v = UView {
    UView().size(100).background(.cyan).centerXInSuperview().top(to: 7)
    UView().size(100).background(.purple).centerXInSuperview().bottom(to: 7)
    UView().size(100).background(.yellow).centerYInSuperview().right(to: 7)
    UView().size(100).background(.green).centerYInSuperview().left(to: 7)
}
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
    UIView.animate(withDuration: 1) {
        v.body {
            UView().size(200).background(.red).centerInSuperview().tag(7)
        }
    }
}

Extra

Any constraint value may be set as CGFloat or with Relation and even Multiplier

// just equal to 10
UView().leading(to: .trailing, of: anotherView, 10)

// greaterThanOrEqual to 10
UView().leading(to: .trailing, of: anotherView, >=10)

// lessThanOrEqual to 10
UView().leading(to: .trailing, of: anotherView, <=10)

// equal to 10 with 1.5 multiplier
UView().leading(to: .trailing, of: anotherView, 10 ~ 1.5)

// equal to 10 with 1.5 multiplier and 999 priority
UView().leading(to: .trailing, of: anotherView, 10 ~ 1.5 ! 999)

// equal to 10 with 1.5 multiplier and `.defaultLow` priority
UView().leading(to: .trailing, of: anotherView, 10 ~ 1.5 ! .defaultLow)

// equal to 10 with 999 priority
UView().leading(to: .trailing, of: anotherView, 10 ! 999)

More about constraints direct access

Ok, let’s imagine that you have a view which is sticked to its superview

let view = UView().edgesToSuperview()

now your view have top, leading, trailing and bottom constraints to its superview and e.g. you want to change top constraint so you could do it like this

view.top = 16

or

view.declarativeConstraints.top?.constant = 16

the same way works with all view’s constraints, so you can change them or even delete them just by setting them nil.

Another situation if you have a view which have a constrain to another relative view

let centerView = UView().background(.black).size(100).centerInSuperview()
let secondView = UView().background(.green).size(100).centerXInSuperview().top(to: .bottom, of: centerView, 16)

and for example you want to reach bottom constraint of centerView related to secondView, do it like this

// short way
centerView.outer[.bottom, secondView] = 32 // changes their vertical spacing from 16 to 32
// long way
centerView.declarativeConstraints.outer[.bottom, secondView]?.constant = 32 // changes their vertical spacing from 16 to 32

Detailed instruction

alias is UView

View may be created with empty initializer

UView()

or you can put subviews into it right while initialization

UView {
    UView()
    UView()
}

or you can wrap some view using inline keyword so that inner view will stick all edges to superview

UView(inline: MKMapView())

also you can add subviews to that superview by calling .body { ... } method. even multiple times.

UView().body {
    UView()
    UVSpace(8)
    UView()
}.body {
    UView()
}.body {
    UView()
    UView()
    UView()
}

// implemented. to be described more

This is really bonus view! :D Almost every app now uses verification codes for login and now you can easily implement that code view with UIKitPlus! :)

VerificationCodeField().digitWidth(64)
                       .digitsMargin(25)
                       .digitBorder(.bottom, 1, 0xC6CBD3)
                       .digitColor(0x171A1D)
                       .font(.sfProRegular, 32)
                       .entered(verify)

func verify(_ code: String) {
  print("entered code: " + code)
}

// implemented. to be described more

UVisualEffectView(.darkBlur)
UVisualEffectView(.lightBlur)
UVisualEffectView(.extraLightBlur)
// iOS10+
UVisualEffectView(.prominent)
UVisualEffectView(.regular)

// iOS13+ (but can be used since iOS9+)
// automatic dynamic effect for light and dark modes
UVisualEffectView(.darkBlur, .lightBlur) // effect will be switched automatically. darkBlur is for light mode.

Create your own extension for your custom effects to use them easily like in example above

extension UIVisualEffect {
    public static var darkBlur: UIVisualEffect { return UIBlurEffect(style: .dark) }
}

It is simple View but with ability to initialize with inner view

UWrapperView {
  UView().background(.red).shadow()
}.background(.green).shadow()

and you could specify innerView`s padding right here

// to the same padding for all sides
UWrapperView {
  UView()
}.padding(10)
// or to specific padding for each side
UWrapperView {
  UView()
}.padding(top: 10, left: 5, right: 10, bottom: 5)
// or even like this
UWrapperView {
  UView()
}.padding(top: 10, right: 10)

// implemented. to be described

My favourite feature.

ImpactFeedback.error()
ImpactFeedback.success()
ImpactFeedback.selected()
ImpactFeedback.bzz()

// set any localization as default
Localization.default = .en

// override current locale
Localization.current = .en

// create string relative to current language
let myString = String(
    .en("Hello"),
    .fr("Bonjour"),
    .ru("Привет"),
    .es("Hola"),
    .zh_Hans("你好"),
    .ja("こんにちは"))
print(myString)

By default current language is equal to Locale.current but you can change it by setting Localizer.current = .en. Also localizer have default language in case if user’s language doesn’t match any in your string, and you could set it just by calling Localizer.default = .en.

Also you can use localizable strings directly in Button, Text, TextView, TextField and AttributedString

UText(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))

UTextView(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))
    .placeholder(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))

UTextField(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))
    .placeholder(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))

UButton(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))
UButton().title(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"), state: .highlighted)

String(.en("Hello"), .ru("Привет"), .fr("Bonjour"), .es("Hola"))

But how to use this awesome localization with 10+ languages in the app?

Just create a dedicated localization file (e.g. Localization.swift) like this

extension String {
    static func transferTo(_ wallet: String) -> String {
        String(.en("Transfer to #\(wallet)"),
                  .ru("Перевод на #\(wallet)"),
                  .zh("转移到 #\(wallet)"),
                  .ja("＃\(wallet)に転送"),
                  .es("Transferir a #\(wallet)"),
                  .fr("Transférer au #\(wallet)"),
                  .sv("Överför till #\(wallet)"),
                  .de("Übertragen Sie auf #\(wallet)"),
                  .tr("\(wallet) numarasına aktar"),
                  .it("Trasferimento al n. \(wallet)"),
                  .cs("Převod na #\(wallet)"),
                  .he("\(wallet) העבר למספר"),
                  .ar("\(wallet)#نقل إلى"))
    }
    static var copyLink: String {
        String(.en("Copy link to clipboard"),
                  .ru("Скопировать ссылку"),
                  .zh("复制链接到剪贴板"),
                  .ja("リンクをクリップボードにコピー"),
                  .es("Copiar enlace al portapapeles"),
                  .fr("Copier le lien dans le presse-papiers"),
                  .sv("Kopiera länk till urklipp"),
                  .de("Link in Zwischenablage kopieren"),
                  .tr("Bağlantıyı panoya kopyala"),
                  .it("Copia il link negli appunti"),
                  .cs("Zkopírujte odkaz do schránky"),
                  .he("העתק קישור ללוח"),
                  .ar("نسخ الرابط إلى الحافظة"))
    }
    static var copyLinkSucceeded: String {
        String(.en("Link has been copied to clipboard"),
                  .ru("Ссылка успешно скопирована в буфер обмена"),
                  .zh("链接已复制到剪贴板"),
                  .ja("リンクがクリップボードにコピーされました"),
                  .es("El enlace ha sido copiado al portapapeles"),
                  .fr("Le lien a été copié dans le presse-papiers"),
                  .sv("Länken har kopierats till Urklipp"),
                  .de("Der Link wurde in die Zwischenablage kopiert"),
                  .tr("Bağlantı panoya kopyalandı"),
                  .it("Il link è stato copiato negli appunti"),
                  .cs("Odkaz byl zkopírován do schránky"),
                  .he("הקישור הועתק ללוח"),
                  .ar("تم نسخ الرابط إلى الحافظة"))
    }
    static var shareNumber: String {
        String(.en("Share number"),
                  .ru("Поделиться номером"),
                  .zh("分享号码"),
                  .ja("共有番号"),
                  .es("Compartir número"),
                  .fr("Numéro de partage"),
                  .sv("Aktienummer"),
                  .de("Teilenummer"),
                  .tr("Numarayı paylaş"),
                  .it("Condividi il numero"),
                  .cs("Sdílejte číslo"),
                  .he("מספר שתף"),
                  .ar("رقم السهم"))
    }
    static var shareLink: String {
        String(.en("Share link"),
                  .ru("Поделиться ссылкой"),
                  .zh("分享链接"),
                  .ja("共有リンク"),
                  .es("Compartir enlace"),
                  .fr("Lien de partage"),
                  .sv("Dela länk"),
                  .de("Einen Link teilen"),
                  .tr("Linki paylaş"),
                  .it("Condividi il link"),
                  .cs("Sdílet odkaz"),
                  .he("שתף קישור"),
                  .ar("مشاركة الرابط"))
    }
}

And then use localized string all over the app this easy way

UText(.transferTo("123")) // Transfer to #123
UText(.copyLinkSucceeded) // Copy link to clipboard
UButton(.shareNumber) // Share number
UButton(.shareLink) // Share link

// implemented. to be described

In any UViewController you can set statusBarStyle and all its values are iOS9+.

override var statusBarStyle: StatusBarStyle { .default }
override var statusBarStyle: StatusBarStyle { .dark }
override var statusBarStyle: StatusBarStyle { .light }

/// Simple color
UIColor.red

/// Automatic dynamic color: black for light mode, white for dark mode
UIColor.black / UIColor.white

/// color in hex, represented as int and supported by all color properties
0xFF0000

/// hex color converted to UIColor
0xFF0000.color

/// hex colors as dynamic UIColor
0x000.color / 0xfff.color

/// color with alpha
UIColor.white.alpha(0.5)

/// hex color with alpha
0xFFFFFF.color.alpha(0.5)

Declare custom colors like this

import UIKitPlus

extension UIColor {
    static var mainBlack: UIColor { return .black  }
    static var otherGreen: UIColor { return 0x3D7227.color  } // 61 114 39
}

and then use them just like

UText("Hello world").color(.otherGreen).background(.mainBlack)

// implemented. to be described

/// helper to print all the fonts in console (debug only)
UIFont.printAll()

Add your custom fonts to the project and then declare them like this

import UIKitPlus

extension FontIdentifier {
    public static var sfProBold = FontIdentifier("SFProDisplay-Bold")
    public static var sfProRegular = FontIdentifier("SFProDisplay-Regular")
    public static var sfProMedium = FontIdentifier("SFProDisplay-Medium")
}

and then use them just like

UButton().font(.sfProMedium, 15)

Detailed instruction

alias is UState

/// usual
@UState var myState = UIColor.red
@UState var myState = ""
@UState var myState = 0
// etc.

/// expressable
$boolStateToColor.map { $0 == true ? .red : .green }
$boolStateToString.map { !$0 ? "night" : "day" }

/// mix to Int states into one String expressable
$state1.and($state2).map { $0 > $1 ? "higher" : "lower" }

"hello".background(.gray)
       .foreground(.red)
       .font(.sfProBold, 15)
       .paragraphStyle(.default)
       .ligature(1)
       .kern(1)
       .strikethroughStyle(1)
       .underlineStyle(.patternDash)
       .strokeColor(.purple)
       .strokeWidth(1)
       .shadow()
       // or .shadow(offset: .zero, blur: 1, color: .lightGray)
       .textEffect("someEffect")
       .attachment(someAttachment)
       .link("http://github.com")
       .baselineOffset(1)
       .underlineColor(.cyan)
       .strikethroughColor(.magenta)
       .obliqueness(1)
       .expansion(1)
       .glyphForm(.horizontal)
       .writingDirection(.rightToLeft)

// implemented. to be described

// implemented. to be described

// implemented. to be described

alias is UButton

// to be described more

UButton()
UButton("Tap me")
UButton().title("Tap me") // useful if you declared Button from extension like below
UButton.mySuperButton.title("Tap me")

background and background for highlighted state

UButton("Tap me").background(.white).backgroundHighlighted(.darkGray)

title color for different states

UButton("Tap me").color(.black).color(.lightGray, .disabled)

set some font from declared identifiers or with system fonts

UButton("Tap me").font(v: .systemFont(ofSize: 15))
UButton("Tap me").font(.sfProBold, 15)

add image

UButton("Tap me").image(UIImage(named: "cat"))
UButton("Tap me").image("cat")

You can handle tap action easily

UButton("Tap me").onTapGesture { print("button tapped") }
UButton("Tap me").onTapGesture { button in
    print("button tapped")
}

or like this

func tapped() { print("button tapped") }
UButton("Tap me").onTapGesture(tapped)

func tapped(_ button: Button) { print("button tapped") }
UButton("Tap me").onTapGesture(tapped)

Declare custom buttons like this

import UIKitPlus

extension UButton {
    static var bigBottomWhite: Button {
        return UButton()
            .color(.darkGray)
            .color(.black, .highlighted)
            .font(.sfProMedium, 15)
            .background(.white)
            .backgroundHighlighted(.lightGray)
            .circle()
    }
    static var bigBottomGreen: Button {
        return UButton().color(.white).font(.sfProMedium, 15).background(.mainGreen).circle()
    }
}

and then use them like this

UButton.bigBottomWhite.size(300, 50).bottomToSuperview(20).centerInSuperview()

// implemented. to be described

// difference between Collection and CollectionView
// flow layouts

// implemented. to be described

// implemented. to be described

// implemented. to be described

alias is UStackView

// implemented. to be described

UStackView().axis(.vertical)
            .alignment(.fill)
            .distribution(.fillEqually)
            .spacing(16)

alias is UVStack

// implemented. to be described more The same as StackView but with predefined axis and ability to easily add arranged subviews

UVStack (
  UText("hello world").background(.green),
  UVSpace(16) // 16pt delimiter
  UText("hello world").background(.red)
)
.spacing(10)
.alignment(.left)
.distribution(...)

// implemented. to be described

/// it is the same as VStack but it is combined with ScrollView

alias is UHStack

// implemented. to be described more The same as StackView but with predefined axis and ability to easily add arranged subviews

UHStack (
  UText("hello world").background(.green),
  UHSpace(16) // 16pt delimiter
  UText("hello world").background(.red)
)
.spacing(10)
.alignment(.left)
.distribution(...)

// implemented. to be described

/// it is the same as HStack but it is combined with ScrollView

/// just a horizontal delimiter
UHSpace(16)
/// alternatively
UView().width(16)

/// just a vertical delimiter
UVSpace(16)
/// alternatively
UView().height(16)

/// just a flexible space for stack views
USpace()
/// alternatively
UView()

// implemented. to be described

alias is UImage

// to be described more

Declare asset images like this

import UIKitPlus

extension Image {
    static var welcomeBackground: UImage { return UImage("WelcomeBackground") }
}

and then use them like this

let backgroudImage = UImage.welcomeBackground.edgesToSuperview()

With built-in ImageLoader

UImage(url: "")
UImage(url: "", defaultImage: UIImage(named: "emptyImage")) // set default image to show it while loading
UImage(url: "", loader: .defaultRelease) // release image before start loading
UImage(url: "", loader: .defaultImmediate) // immediate replace image after loading
UImage(url: "", loader: .defaultFade) // replace image with fade effect after loading
UImage(url: "", loader: ImageLoader()) // subclass from `ImageLoader` and set you custom loader here

// implemented. to be described

alias is UList

// implemented. to be described

also describe auto-DIFF with Identable models

// implemented. to be described

// implemented. to be described

// implemented. to be described

// implemented. to be described more

UScrollView().paging(true).scrolling(false).hideIndicator(.horizontal)
UScrollView().paging(true).scrolling(false).hideAllIndicators()
UScrollView().contentInset(.zero)
UScrollView().contentInset(top: 10, left: 5, right: 5, bottom: 10)
UScrollView().contentInset(top: 10, bottom: 10)
UScrollView().scrollIndicatorInsets(.zero)
UScrollView().scrollIndicatorInsets(top: 10, left: 5, right: 5, bottom: 10)
UScrollView().scrollIndicatorInsets(top: 10, bottom: 10)

alias is USegmentedControl

// implemented. to be described more

@UState var selectedItem = 0
USegmentedControl("One", "Two").select($selectedItem)
// or simply
USegmentedControl("One", "Two").select(0).changed { print("segment changed to \($0)") }

// implemented. to be described

alias is UStepper

// implemented. to be described

alias is UTextField

// implemented. to be described

// format with AnyFormat

UTextField()
UTextField("some text")
UTextField().text("some text")
UTextField.mySuperDuperTextField.text("some text")

set some font from declared identifiers or with system fonts

UTextField().font(v: .systemFont(ofSize: 15))
UTextField().font(.sfProBold, 15)

set text color

UTextField().color(.red)

set text alignment

UTextField().alignment(.center)

placeholder

UTextField().placeholder("email")
// or use AttributedString to make it colored
UTextField().placeholder(AttributedString("email").foreground(.green))

secure

UTextField().secure()

remove any text from field easily

UTextField().cleanup()

set keyboard and content type

UTextField().keyboard(.emailAddress).content(.emailAddress)

listen if user typing or not

UTextField().typing($isTyping, interval: 2) // very useful for chats

set delegate

UTextField().delegate(self)

or get needed events declarative way

UTextField().shouldBeginEditing { tf in return true }
            .didBeginEditing { tf in }
            .shouldEndEditing { tf in return true }
            .didEndEditing { tf in }
            .shouldChangeCharacters { tf, range, replacement in return true }
            .shouldClear { tf in return true }
            .shouldReturn { tf in return true }
            .editingDidBegin { tf in }
            .editingChanged { tf in }
            .editingDidEnd { tf in }

alias is UText or just Label

// to be described more It either may be initialized with String or unlimited amount of AttributedStrings

UText("hello 👋 ")
UText().text("hello") // useful if declare label in extension like below
UText.mySuperLabel.text("hello")
UText("hello".foreground(.red), "world".foreground(.green))

set some font from declared identifiers or with system fonts

UText("hello").font(v: .systemFont(ofSize: 15))
UText("hello").font(.sfProBold, 15)

set text color

UText("hello").color(.red)

set text alignment

UText("hello").alignment(.center)

set amount of lines

UText("hello").lines(1)
UText("hello\nworld").lines(0)
UText("hello\nworld").lines(2)
UText("hello\nworld").multiline()

Declare custom attributed labels like this

import UIKitPlus

extension UText {
    static var welcomeLogo: UText {
        UText("My".foreground(.white).font(.sfProBold, 26), "App".font(.sfProBold, 26))
    }
}

and then use them like this

let logo = UText.welcomeLogo.centerInSuperview()

alias is UTextView

// implemented. to be described

alias is UToggle

// implemented. to be described

UView().alpha(0)
UView().alpha($alphaState)
UView().alpha($boolState.map { $0 ? 1 : 0 })

UView().background(.red)
UView().background(0xff0000)
UView().background($colorState)
UView().background($boolState.map { $0 ? .red : .green })

To set border on all sides

UView().border(1, .black)
UView().border(1, 0x000)

To set border on specific side

UView().border(.top, 1, .black)
UView().border(.left, 1, .black)
UView().border(.right, 1, .black)
UView().border(.bottom, 1, .black)

To remove border from specific side

.removeBorder(.top)

// implemented. to be described

// implemented. to be described

To set radius to all corners

UView().corners(10)
UView().corners($cornerRadiusState)

To set custom radius for specific corner

UView().corners(10, .topLeft, .topRight)
UView().corners(10, .topLeft, .bottomRight)
UView().corners(10, .topLeft, .topRight, .bottomLeft, .bottomRight)

To make your view’s corners round automatically by smaller side

UView().circle()

UView().hidden() // will set `true` by default
UView().hidden(true)
UView().hidden(false)
UView().hidden($hiddenState)
UView().hidden($stringState.map { $0.count > 0 })

// implemented. to be described

// implemented. to be described

// to all sides
UView().layoutMargin(10)
// optional sides
UView().layoutMargin(top: 10)
UView().layoutMargin(left: 10, bottom: 5)
UView().layoutMargin(top: 10, right: 5)
// vertical and horizontal
UView().layoutMargin(x: 10, y: 5) // top: 5, left: 10, right: 10, bottom: 5
UView().layoutMargin(x: 10) // left: 10, right: 10
UView().layoutMargin(y: 5) // top: 5, bottom: 5

// implemented. to be described

UView().opacity(0)
UView().opacity($alphaState)
UView().opacity($boolState.map { $0 ? 1 : 0 })

To rasterize layer, e.g. for better shadow performance

UView().rasterize() // true by default
UView().rasterize(true)
UView().rasterize(false)

// to be described more

// and with mroe than one shadow
// and with state, expressableState

UView().shadow() // by default it's black, opacity 1, zero offset, radius 10
UView().shadow(.gray, opacity: 0.8, offset: .zero, radius: 5)
UView().shadow(0x000000, opacity: 0.8, offset: .zero, radius: 5)

You can shake any view just by calling

UView().shake()

And you could customize shake effect

UView().shake(values: [-20, 20, -20, 20, -10, 10, -5, 5, 0],
              duration: 0.6,
              axis: .horizontal,
              timing: .easeInEaseOut)
UView().shake(-20, 20, -20, 20, -10, 10, -5, 5, 0,
              duration: 0.6,
              axis: .horizontal,
              timing: .easeInEaseOut)

or even create an extension

import UIKitPlus

extension DeclarativeProtocol {
  func myShake() {
      UView().shake(-20, 20, -20, 20, -10, 10, -5, 5, 0,
                    duration: 0.6,
                    axis: .horizontal,
                    timing: .easeInEaseOut)
  }
}

UView().tag(0)

UView().tint(.red)
UView().tint(0xff0000)
UView().tint($colorState)
UView().tint($boolState.map { $0 ? .red : .green })

// implemented. to be described