Блог

Я определил новости по вертикали вместе в stackview. Я хочу разместить кнопки «Поделиться» горизонтально. У меня есть 5 разных кнопок общего доступа. только 4 из них видны на экране и искажены. Как я могу исправить?

Здесь я определяю stackview и кнопку. свойства всех кнопок одинаковы.

   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
    }()
  

Я даю здесь определение.

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

** Это код позиции shareStackview **

    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
  

Этот снимок экрана

здесь полные коды в github
введите описание ссылки здесь

Вы не сказали, как вы хотите, чтобы они были расположены, поэтому я могу придумать два возможных решения.

Равномерно распределите изображения

 stackView.distribution = .equalSpacing
  

Это приведет к равному распределению изображений в stackview в зависимости от его ширины. Изображения должны сохранять свой размер.

Центрируйте изображения на экране.

     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
  

Это изменит ограничения на StackView, чтобы он был меньше ширины экрана, но оставался центрированным.