提问者:小点点

如何使一个UImageView居中,然后使其宽度增长或缩小到屏幕宽度的定义百分比?


我有一个图像在我的屏幕底部,就像一个卡通泡泡。

不需要复杂的计算就能做到吗?

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

下面是我目前所得到的代码:

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

我很肯定这是很容易做到的,但我现在想不出来。

感谢任何帮助。


共2个答案

匿名用户


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

这将确保气泡保持在中心,而你将能够动画大小的气泡缩小或增长!

匿名用户

您可以使用乘法器将视图宽度设置为另一视图宽度的百分比:

        // 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),