Nothing Special   »   [go: up one dir, main page]

Skip to content

Frame base StackView relies on PinLayout, without auto layout

License

Notifications You must be signed in to change notification settings

lalawue/PinStackView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Introduction

PinStackView was a Frame base StackView relies on PinLayout.

Features

  • can be used with manual layout, Autolayout
  • is a real view and only layout specified sub-views
  • has inner padding
  • has equal distribution like UIStackView
  • has auto style with dynamic length in axis direction
  • has grow/shrink
  • observ item layout properties
  • KVO item views 'isHidden'

Install

To integrate PinStackView into your Xcode project using CocoaPods, specify it in your Podfile:

    pod 'PinStackView'

Then, run pod install.

Usage

examples listed in project 'Views/' group

$ cd Example
$ pod install
$ open Example.xcworkspace

PinStackView

Interface

  • addItems(): add managed sub-views, return PinStackItemInfo for chained setting, you can addSubviews() and layout view by yourself
  • insertItem(): like addItems(), can defined sequence
  • removeItem(): remove managed sub-views, also removed from subviews
  • remakeItem(): replace with new item but did not change subview's sequence
  • itemForView(): get PinStackItemInfo from PinStackView after addItem() or insertItem()
  • define(): a sugar to chain items info definition
  • markDirty(): like setNeesLayout(), force layout in next view update
  • triggerNeedsLayout(): trigger subview's setNeedsLayout when PinStackView setNeedsLayout.

Properties

  • style: default .fixed, the axis length will not change after layout; .auto style means its axis length will change by items
  • axis: .horizontal or .vertical direction, dynamic length direction
  • distribution: axis direction layout style, .equal only support .fixed style; .auto style always .start
  • alignment: cross axis direction, you can specify view's alignment by alignSelf()
  • spacing: spacing between items in axis direction
  • padding: items will layout after padding
  • layoutCallback: call back after every layout, will pass in true when size changed

PinStackItemInfo

PinStackItemInfo was each item's layout definition, you will get instance after addItem()

  • top(): top margin, points or inner height ratio after padding
  • bottom(): bottom margin, points or inner height ratio after padding
  • left(): left margin, points or inner width ratio after padding
  • right(): right margin, points or inner width ratio after padding
  • width(): points or inner width ratio after padding
  • height(): points or inner height ratio after padding
  • maxWidth(): max points or inner width ratio after padding, high priority than width()
  • maxHeight(): max points or inner height ratio after padding, high priority than height()
  • minWidth(): min points or inner width ratio after padding, high priority than width()
  • minHeight(): min points or inner height ratio after padding, high priority than height()
  • size(): highest priority than width(), height(), max/min width & height, points or ratio after padding
  • alignSelf(): high priroty than PinStackView's alignment, only for this item
  • grow(): in .fixed style and .start / .end distribution, it means item using dynamic length in axis direction after all fixed items length acumulated; no meanings in .equal distribution or .auto style
  • shrink(): in .fixed style and.start / .end distribution, it means item using dynamic length in axis direction after all fixed items length acumulated; no meanings in .equal distribution or .auto style

Coding Example

using Then from Suyeol Jeon

    lazy var stackView = PinStackView().then {
        $0.style = .auto
        $0.axis = .horizontal
        $0.alignment = .center
        $0.distribution = .start
        $0.spacing = 10
        $0.addItem(v1).left(20)
        $0.addItem(v2).size(20).shrik(2.0)
        $0.addItem(v3).grow(1.0) // with grow ratio 1.0 / (1.0 + 2.0)
        $0.addItem(v4).size(30).grow(2.0).right(20)
    }

Demo

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-03-05.at.13.47.23.mp4

About

Frame base StackView relies on PinLayout, without auto layout

Topics

Resources

License

Stars

Watchers

Forks