如何使UIImageView居中然后使其宽度增大或缩小到屏幕宽度的定义百分比？

Question

我在屏幕底部有这张图像，就像卡通气泡一样。

我希望它居中，但整个宽度不应超过屏幕宽度的70％。高度保持不变。

无需复杂的计算就可以做到吗？

我尝试了按比例分布的水平堆栈视图，但是当然，这需要从图像宽度对屏幕宽度开始进行计算。

这里是我到目前为止的代码：

    background = new UIImageView
    {
        TranslatesAutoresizingMaskIntoConstraints = false,
    };
    string base64String = ImageManager.ms_instance.GetAutoEvalImageAsBase64String(this.m_currentItem.id);
    background.Image = UIImage.LoadFromData(NSData.FromArray(Convert.FromBase64String(base64String)));

    this.View.AddSubview(background);

    bubbleSpeech = new UIImageView(UIImage.FromBundle("bubble_speech.png"));
    bubbleSpeech.TranslatesAutoresizingMaskIntoConstraints = false;

    qualif = new UIStackView
    {
        TranslatesAutoresizingMaskIntoConstraints = false,
        Axis = UILayoutConstraintAxis.Horizontal,
        Distribution = UIStackViewDistribution.FillProportionally,
        Alignment = UIStackViewAlignment.Center
    };

    qualif.AddArrangedSubview(new UIView());
    qualif.AddArrangedSubview(bubbleSpeech);
    qualif.AddArrangedSubview(new UIView());

    this.View.AddSubview(qualif);

    qualif.Anchor(bottom: this.View.SaferAreaLayoutGuide().BottomAnchor, leading: this.View.SaferAreaLayoutGuide().LeadingAnchor, trailing: this.View.SaferAreaLayoutGuide().TrailingAnchor/*, size: new CGSize(328f, 94f)*/);

    background.Anchor(top: this.View.SaferAreaLayoutGuide().TopAnchor, leading: this.View.SaferAreaLayoutGuide().LeadingAnchor, trailing: this.View.SaferAreaLayoutGuide().TrailingAnchor, bottom: this.View.SaferAreaLayoutGuide().BottomAnchor);

[锚定助手：

internal static void Anchor(this UIView uIView, NSLayoutYAxisAnchor top = null, NSLayoutXAxisAnchor leading = null, NSLayoutYAxisAnchor bottom = null, NSLayoutXAxisAnchor trailing = null, UIEdgeInsets padding = default, CGSize size = default)
{
    uIView.TranslatesAutoresizingMaskIntoConstraints = false;
    if (top != null)
    {
        uIView.TopAnchor.ConstraintEqualTo(top, padding.Top).Active = true;
    }

    if (leading != null)
    {
        uIView.LeadingAnchor.ConstraintEqualTo(leading, padding.Left).Active = true;
    }

    if (bottom != null)
    {
        uIView.BottomAnchor.ConstraintEqualTo(bottom, -padding.Bottom).Active = true;
    }

    if (trailing != null)
    {
        uIView.TrailingAnchor.ConstraintEqualTo(trailing, -padding.Right).Active = true;
    }

    if (size.Width != 0)
    {
        uIView.WidthAnchor.ConstraintEqualTo(size.Width).Active = true;
    }

    if (size.Height != 0)
    {
        uIView.HeightAnchor.ConstraintEqualTo(size.Height).Active = true;
    }
}

我很确定这可以轻松完成，但目前无法确定。

感谢任何帮助。

Answer 1

bubbleSpeech = new UIImageView(UIImage.FromBundle("bubble_speech.png"));
bubbleSpeech.TranslatesAutoresizingMaskIntoConstraints = false;
bubbleSpeech.contentMode = .scaleAspectFill
bubbleSpeech.clipsToBounds = true

UIView.animate(withDuration: 2.0, animations: {() -> Void in
    self.bubbleSpeech.transform = CGAffineTransform(scaleX: 0.7, y: 1)
}, completion: {(_ finished: Bool) -> Void in
    UIView.animate(withDuration: 2.0, animations: {() -> Void in
        self.bubbleSpeech.transform = CGAffineTransform(scaleX: 1, y: 1)
    })
})


NSLayoutConstraint.activate([
    bubbleSpeech.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
    bubbleSpeech.leadingAnchor.constraint(lessThanOrEqualTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 5),
    bubbleSpeech.trailingAnchor.constraint(lessThanOrEqualTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -5),
    bubbleSpeech.bottomAnchor.constraint(greaterThanOrEqualTo: view.safeAreaLayoutGuide.bottomAnchor)
])

这将确保气泡保留在中心，同时您可以为缩小或增大的气泡设置动画大小！

Answer 2

您可以使用multiplier将视图的宽度设置为另一视图宽度的百分比：

        // width equals 70% of safe area width
        bubbleSpeech.widthAnchor.constraint(equalTo: g.widthAnchor, multiplier: 0.7),

所以您的代码可能是：

    bubbleSpeech = new UIImageView(UIImage.FromBundle("bubble_speech.png"));
    bubbleSpeech.TranslatesAutoresizingMaskIntoConstraints = false;

    // respect safe area
    let g = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate([
        // constrain bottom of bubbleSpeech to bottom of safe area
        bubbleSpeech.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
        // center horizontally
        bubbleSpeech.centerXAnchor.constraint(equalTo: g.centerXAnchor),
        // width equals 70% of safe area width
        bubbleSpeech.widthAnchor.constraint(equalTo: g.widthAnchor, multiplier: 0.7),
        // height = 94:328 ratio to width
        bubbleSpeech.heightAnchor.constraint(equalTo: bubbleSpeech.widthAnchor, multiplier: 94.0 / 328.0),
    ])

这将使“气泡”图像视图占视图宽度的70％，而高度（根据问题中注释的代码）将与94:328的宽度具有相对比率。

如果您不希望相对（比例）高，请将heightAnchor约束更改为：

        bubbleSpeech.heightAnchor.constraint(equalToConstant: 94.0),