У меня есть это изображение внизу экрана, похожее на мультяшный пузырь.
Я бы хотел, чтобы он был по центру, но вся ширина не должна превышать 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;
}
}
Я почти уверен, что это можно легко сделать, но сейчас я не могу этого понять.
Любая помощь оценили.
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),
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)
])
Это гарантирует, что пузырек останется в центре, в то время как вы сможете анимировать размер пузыря, уменьшаясь или увеличиваясь!
Похожие вопросы
Новые вопросы
c#
C # (произносится как «резкий») - это высокоуровневый, статически типизированный язык программирования с несколькими парадигмами, разработанный Microsoft. Код C # обычно нацелен на семейство инструментов и сред выполнения Microsoft .NET, включая, среди прочего, .NET Framework, .NET Core и Xamarin. Используйте этот тег для вопросов о коде, написанном на C # или в формальной спецификации C #.