我有一个图像在我的屏幕底部,就像一个卡通泡泡。
不需要复杂的计算就能做到吗?
我尝试了一个比例分布的水平堆栈视图,但当然,这需要从图像宽度对屏幕宽度开始进行计算。
下面是我目前所得到的代码:
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;
}
}
我很肯定这是很容易做到的,但我现在想不出来。
感谢任何帮助。
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),