Ytukyg

I'm making a slot UIView(). i have subclassed UIView() and everything is working just fine.

Now i'm trying to use autolayout to support ipads too.

Here's what i want:

What i have achieved:

public protocol GDTextSlotDelegate: class{

    func onTextEntered(_ finalText: String)

}



@IBDesignable

final public class GDTextSlot: UIView, UIKeyInput {

    public weak var delegate: GDTextSlotDelegate? = nil



  / ... /

}

@IBInspectable

public var numberOfSlots: Int = 4 {

    didSet{

        / .. /

    }

}



 @IBInspectable

public var baseWidth: CGFloat = 30.0 {

    didSet{

        / .. /

    }

}

Also generating a new slot:

/// Calculate X position of slot and make sure

/// the whole group is always in center of the view

private func calcX() -> CGFloat{

    return ((frame.width - (baseWidth * CGFloat(numberOfSlots))) / 2) + (CGFloat((currentSlot - 1)) * CGFloat(baseWidth))

}



private func calcFrame() -> CGRect{

    return CGRect(x: calcX(), y: 0, width: baseWidth, height: frame.height)

}



/// Initiate a new label for the slot!

private var label: UILabel{

    let lbl: UILabel = UILabel()

    lbl.frame = calcFrame()

    lbl.text = "_"

    lbl.textColor = UIColor.white

    lbl.font = UIFont.boldSystemFont(ofSize: 25)

    lbl.textAlignment = .center

    lbl.tag = currentSlot



    return lbl

}

Final step:

public func generateSlots(){

    for index in 1...numberOfSlots{

        currentSlot = index

        addSubview(label)

    }

    currentSlot = 1

}

But, Adding AutoLayout on the storyboard makes the view wide on ipad, which's fine. but the slots doesn't center.

Here's my debug hierarchy on iPad:

I'd appreciate any solution with either with code or autolayout, Thanks

@canister_exister has a good solution for the storyboard approach. Doing it in code is pretty simple, too. In your case, use UIStackView:

public func generateSlots(){ 

    //Stack View

    var stackView = UIStackView()



    stackView.axis = UILayoutConstraintAxis.horizontal

    stackView.distribution = UIStackViewDistributionEqualSpacing

    stackView.alignment = UIStackViewAlignmentCenter

    stackView.spacing = //spacing between each label

    for index in 1...numberOfSlots{

        currentSlot = index

        var slotLabel = UILabel()

        //customize your label here: don't need x and y

        //these are width and height constraints for each label

        view3.heightAnchor.constraint(equalToConstant: 20).isActive = true

        view3.widthAnchor.constraint(equalToConstant: baseHeight).isActive = true

        stackView.addArrangedSubview(label)

    }

    currentSlot = 1



    stackView.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(stackView)

}

First set constraints for each child view

Second for each child view change Align Center X Multiplier

Multipliers should be 0.25 for first, 0.75 for second, 1.25 for third and 1.75 for fours

When you have an equal arrangement of some arbitrary number of objects like this, use a UIStackView. This screen shot shows an example:

The stack view is a horizontal stack view with center alignment and fill equally distribution. The stack view has a constraint horizontally centering it in its superview (and an arbitrary height constraint and top constraint, both irrelevant for this example). That causes its arranged subviews — the slot views — to be equally spaced and sized and the whole thing centered in the stack view's superview.

Let's analyze how we get the specific results that we get.

• The heights of the slot views are determined by their height constraints.




• The spacing between the slot views is determined by the spacing setting of the stack view.




• Thus, the only thing left to specify is the width of the slot views; that is set by the width constraint of the stack view itself. Knowing the desired width of a slot view, you just multiply that width by the number of slot views, multiply the stack view spacing by one less than the number of slot views, add those two together, and set the stack view width constraint constant to that.

The slot views thus end up looking exactly the same, and centered horizontally in their superview, no matter what size the superview is. And the really cool part is that we can increase or decrease the number of slot views and it all continues to work perfectly, because the stack view does all the work of arranging them.