8.2 C
Canberra
Tuesday, October 28, 2025

ios – How do I add customized horizontal spacing to a view in a stack view with a number one alignment and vertical axis?


I’ve a stack view that comprises a title label and a view which occurs to be one other stack view that I need to add customized spacing to. The composition I’m utilizing is predicated on the best way that’s described within the documentation for laying out views in UIStackView within the Outline the stack’s measurement alongside its axis part. The stack has a vertical axis and its high and backside edges are pinned to the content material view’s high and backside edges (the stack is a subview of a UICollectionViewCell). The forefront of the stack is pinned to the forefront of the content material view and is offset by a relentless 24 factors.

My precise implementation is as follows:

    func setUp() {
        
        titleView = UILabel()
        femaleIcon = UIImageView()
        maleIcon = UIImageView()
        femaleIcon.addGestureRecognizer(UITapGestureRecognizer(goal: self, motion: #selector(switchFemaleIcon)))
        
        femaleIcon.contentMode = .scaleAspectFit
        maleIcon.contentMode = .scaleAspectFit
        
        maleIcon.addGestureRecognizer(UITapGestureRecognizer(goal: self, motion: #selector(switchMaleIcon)))
        
        let iconStackView = UIStackView(arrangedSubviews: [
            femaleIcon,
            maleIcon
        ])
        
        iconStackView.axis = .horizontal
        iconStackView.translatesAutoresizingMaskIntoConstraints = false
        
        iconStackView.setCustomSpacing(50, after: femaleIcon)
        
        iconStackView.backgroundColor = .yellow
        
        let stackView = UIStackView(arrangedSubviews: [
            titleView,
            iconStackView
        ])
        
        stackView.axis = .vertical
        stackView.alignment = .main
        contentView.addSubview(stackView)
        
        stackView.backgroundColor = .magenta
        
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        
        stackView.setCustomSpacing(14, after: titleView)

        NSLayoutConstraint.activate([
            femaleIcon.widthAnchor.constraint(equalToConstant: 30),
            femaleIcon.heightAnchor.constraint(equalToConstant: 48),
            
            maleIcon.widthAnchor.constraint(equalToConstant: 36),
            maleIcon.heightAnchor.constraint(equalToConstant: 36.5),
            
            stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
            stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor)
        ])
    }

The illustration I need to obtain is as follows:

enter image description here

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles