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

【问题标题】：Why does the social share buttons look bad?为什么社交分享按钮看起来很糟糕？
【发布时间】：2021-02-08 20:10:32
【问题描述】：

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

【问题讨论】：

您是否尝试过 button.contentMode 的其他值？如果没有，请尝试使用此属性
试试shareStackView.distribution = .equalSpacing
@aheze 我做了 stackView.distribution = .fillEqually 。没关系。

标签： ios swift iphone autolayout uikit

【解决方案1】：

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

将图片等间隔开

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

【讨论】：

我做了 stackView.distribution = .fillEqually 。没关系。