Question

我正在插槽UIView()。我已经将UIView()细分为子类，并且一切正常。

现在，我也尝试使用自动版式来支持iPad。

这就是我想要的：

我所取得的成就：

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{
        / .. /
    }
}

还要生成一个新的广告位：

/// 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
}

最后一步：

public func generateSlots(){
    for index in 1...numberOfSlots{
        currentSlot = index
        addSubview(label)
    }
    currentSlot = 1
}

但是，在情节提要板上添加AutoLayout可以使ipad上的视图变宽，这很好。但插槽不会居中。

这是我在iPad上的调试层次结构：

对于使用代码或自动布局的任何解决方案，我都表示感谢，谢谢

Answer 1

首先为每个子视图设置约束

第二次更改每个子视图Align Center X Multiplier

乘数应为0.25，第二为0.75，第三为1.25，四分之一为1.75

Answer 2

当像这样任意数目的对象相等排列时，请使用UIStackView。此屏幕快照显示了一个示例：

堆栈视图是水平堆栈视图，中心对齐，填充均匀分布。堆栈视图具有一个在其父视图中水平居中的约束（以及任意高度约束和顶部约束，对于此示例均不相关）。这导致其排列的子视图（插槽视图）的间距和大小均等，并且整个内容都集中在堆栈视图的超级视图中。

让我们分析一下我们如何获得特定的结果。

插槽视图的高度由其高度限制决定。
插槽视图之间的间距由堆栈视图的间距设置确定。
因此，唯一需要指定的是插槽视图的宽度；由堆栈视图本身的宽度约束设置。知道插槽视图的所需宽度后，只需将该宽度乘以插槽视图的数量，将堆栈视图的间距乘以小于插槽视图的数量的一倍，将这两个视图相加，然后将堆栈视图的宽度约束设置为

因此，无论超级视图的大小如何，插槽视图最终看起来都完全相同，并在其超级视图中水平居中。真正很酷的部分是，我们可以增加或减少插槽视图的数量，并且它们都可以完美地继续工作，因为堆栈视图完成了排列它们的所有工作。

Answer 3

@canister_exister为情节提要方法提供了一个很好的解决方案。用代码完成它也非常简单。在您的情况下，请使用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)
}

正确地将uiviews置于其parentView内部

3 个答案: