У меня есть это изображение внизу экрана, похожее на мультяшный пузырь.

введите описание изображения здесь Я бы хотел, чтобы он был по центру, но вся ширина не должна превышать 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;
    }
}

Я почти уверен, что это можно легко сделать, но сейчас я не могу этого понять.

Любая помощь оценили.

0
Olivier MATROT 14 Июн 2020 в 15:09

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),
0
DonMag 14 Июн 2020 в 13:11

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

Это гарантирует, что пузырек останется в центре, в то время как вы сможете анимировать размер пузыря, уменьшаясь или увеличиваясь!

0
Asad 14 Июн 2020 в 13:10