skip to Main Content

I’m trying to create UIStackView with 3 UISegmentedControl with this code, and I want them to be center both vertically and horizontaly:

let segmented = UISegmentedControl(items: ["SOLID","GRADIENT"])
let segmented2 = UISegmentedControl(items: ["SOLID","GRADIENT"])
let segmented3 = UISegmentedControl(items: ["SOLID","GRADIENT"])

segmented.selectedSegmentIndex = 0
segmented2.selectedSegmentIndex = 0
segmented3.selectedSegmentIndex = 0

let st = UIStackView(arrangedSubviews: [segmented, segmented2, segmented3])
st.axis = .vertical
st.spacing = 5;
st.alignment = .center

self.addSubview(st)

st.translatesAutoresizingMaskIntoConstraints = false
st.topAnchor.constraint(greaterThanOrEqualTo: self.topAnchor, constant: 0.0).isActive = true
st.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0.0).isActive = true
st.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0.0).isActive = true
st.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor, constant: 0.0).isActive = true
st.centerXAnchor.constraint(equalTo: self.centerXAnchor, constant: 0.0).isActive = true
st.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true

The problem is that I get this view:

enter image description here

Any idea how I can fix this problem? I want all of them will be at the same height.

2

Answers


  1. I believe this:

    st.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor, constant: 0.0).isActive = true
    

    Should be inverted to:

    st.bottomAnchor.constraint(lessThanOrEqualTo: self.bottomAnchor, constant: 0.0).isActive = true
    

    Because you want the y-position of the stack view’s bottom anchor to be a smaller value than the y-position of the view’s own bottom anchor.

    In general the constraint constants have to be inverted for the trailing and bottom anchors.

    Login or Signup to reply.
  2. First, because your constraints are using self (as in self.topAnchor), this code must belong to a UIView subclass.

    It’s not clear what your end goal is… Do you want the stack of segmented controls to determine the height of the view? Or do you want the control heights to be determined by the height of the view? How are you setting the constraints of the custom view that holds this stack of controls?

    In any case, you can get the segmented controls to be equal Heights simply by adding this line:

    st.distribution = .fillEqually
    

    However, regardless of what else you’re doing, your current constraints for the stack view are probably incorrect.

    Try it like this:

        st.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        st.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
        st.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
        st.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
    

    No need for either centerX or centerY constraints.

    Another way to set those constraints, which is a little more concise and readable, is like this:

        NSLayoutConstraint.activate([
            st.topAnchor.constraint(equalTo: self.topAnchor),
            st.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            st.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            st.bottomAnchor.constraint(equalTo: self.bottomAnchor),
        ])
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search