Search code examples
iosswiftiphoneautolayoutuikit

Why does the social share buttons look bad?

I have defined the news vertically together in stackview. I want to put the share buttons horizontally. I have 5 different share buttons. only 4 of them are visible on the screen and are distorted. How can I fix?

Here I define stackview and a button. the properties of all buttons are the same.

  private let shareStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .center
        return stackView
    }()
    
    private let facebookShareButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(named: "facebook"), for: .normal)
        button.contentMode = .scaleAspectFill
        return button
    }()

I'm making a definition here.

 override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(scrollView)
        scrollView.addSubview(stackView)
        scrollView.addSubview(shareStackView)
        stackView.addSubview(navigationBar)
        stackView.addArrangedSubview(articleTitleLabel)
        stackView.addArrangedSubview(articlePublishedAtLabel)
        stackView.addArrangedSubview(articleImageView)
        stackView.addArrangedSubview(articleContentLabel)
        shareStackView.addArrangedSubview(facebookShareButton)
        shareStackView.addArrangedSubview(twitterShareButton)
        shareStackView.addArrangedSubview(instagramShareButton)
        shareStackView.addArrangedSubview(linkedinShareButton)
        shareStackView.addArrangedSubview(emailShareButton) 
    }

**This shareStackview position codes **

   self.shareStackView.translatesAutoresizingMaskIntoConstraints = false
        self.shareStackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor).isActive = true
        self.shareStackView.topAnchor.constraint(equalTo: self.stackView.bottomAnchor).isActive = true
        self.shareStackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor).isActive = true
        self.shareStackView.bottomAnchor.constraint(equalTo: self.shareStackView.topAnchor, constant: 40).isActive = true
        
        //constrain width of stack view to width of self.view, NOT scroll view
        self.stackView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true

This screenshot

enter image description here

here full codes in github enter link description here

Solution

  • You haven't said haw you want them to be positioned so there are two possible solutions I can think of.

    Space out the images equally

    stackView.distribution = .equalSpacing

    This will equally space out the images in the stackview based on its width. The images should keep their size.

    Center the images on screen.

        self.shareStackView.translatesAutoresizingMaskIntoConstraints = false
    self.shareStackView.leadingAnchor.constraint(greaterThanOrEqualTo: self.scrollView.leadingAnchor).isActive = true
    self.shareStackView.topAnchor.constraint(equalTo: self.stackView.bottomAnchor).isActive = true
    self.shareStackView.centerXAnchor.constraint(equalTo: self.scrollView.centerXAnchor).isActive = true
    self.shareStackView.bottomAnchor.constraint(equalTo: self.shareStackView.topAnchor, constant: 40).isActive = true
        
    //constrain width of stack view to width of self.view, NOT scroll view
    self.stackView.widthAnchor.constraint(lessThanOrEqualTo: self.view.widthAnchor).isActive = true

    This will change the constraints on the stackView to allow it to be smaller than the width of the screen but stay centered.