为什么社交分享按钮看起来很糟糕？

Question

我在stackview中垂直定义了一起新闻。我想水平放置共享按钮。我有 5 个不同的共享按钮。其中只有 4 个在屏幕上可见并且失真。我该如何解决？

这里我定义了stackview和一个button。所有按钮的属性都是一样的。

  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 中的完整代码 enter link description here

Answer 1

你还没说你想让它们定位所以我能想到两种可能的解决方案。

Space 平均输出图像

stackView.distribution = .equalSpacing

这同样会根据其宽度 space 输出堆栈视图中的图像。图像应保持其大小。

使图像在屏幕上居中。

    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 的约束，使其小于屏幕宽度但保持居中。

为什么社交分享按钮看起来很糟糕？

Why does the social share buttons look bad?

iphone

uikit

ios

autolayout

swift

我在stackview中垂直定义了一起新闻。我想水平放置共享按钮。我有 5 个不同的共享按钮。其中只有 4 个在屏幕上可见并且失真。我该如何解决？