横並びの可変する2つのUILabelのAutolayoutについて

Question

前提・実現したいこと

テキストによって可変する、UILabelを2つ横並びにした時の
制約の付け方についてご教示願いたいです。

今tableViewに表示するセルをxibで作っており
可変するUILabelが横並びで2つ存在します。(以下画像の緑とピンクのラベルです。)
困っていることとしては、テキストの長さによっては、、文字が重なってしまうケースがあるので
文字が重ならないようにHorizontal方向の制約を付けたいのですが
どのように制約を付ければ良いのかわからず困ってしまっています。

期待している動作としては、ピンクの金額のラベルはセルの右側に配置されていて
緑のラベルもピンクのラベルも、テキストが長くなり重なってしまう場合は
ピンクのテキストが省略されないように表示され、緑のラベルはピンクのラベルの長さに応じて
収縮し、表示しきれない文字については三点リーダーになるようにしたいです。

現在の制約及び、動作している画面を以下に添付させて頂きます。
手詰まりなため、ご教示頂けると幸いです。

発生している問題・エラーメッセージ

テキストの内容によって、テキスト同士が重なってしまう。

###追記

緑のラベルと円マークと金額を囲んでいるStackViewの間のHorizontalの方向に10の制約を追加しました

Answer 1

金額のラベルの右側制約を右端に合わせ、円マークの右側制約を金額ラベルの左側に合わせます。
メッセージの左側制約は画像の右側に合わせ、左側は円マークの左側に合わせます。
そして、メッセージの alignment を左側に合わせると上手く動くかと思います。

また、コードベースで実装することも選択肢に入れるととてもシンプルに実装できると思うので参考にしてください。

Comments

[sgyeta]

ご回答頂きありがとうございます。

こちらの説明不足で恐縮ですが、円マークと金額のラベルはStackViewでまとめてます。
そのため、StackViewの右側制約を右端に合わせ、メッセージの左側制約は画像の右側に合わせ
メッセージの右側制約はStackViewの左側に合わせる認識ですけど合ってますでしょうか・・・？

上記の認識の下、ご提示頂いた通りに試してみたのですがエラーになってしまいました。
エラーの画面を追記しましたので、ご確認頂けたら幸いです。

[s.m_1]

価格のラベルを stackview にして試してみましたが、正しく制約を設定することはできました。

一度全ての制約を解除してみて、以下の順番に制約を設定してみてください。
1. UIImageView (上下左)
2. 上の UILabel (上下左右)
3. 右側の StackView (上下右)
4. 左下の UILabel (上下左右と幅)

左下の UILabel の幅を StackView の左端まで設定することで上手くいきました。

試してみてください。

[sgyeta]

ご回答ありがとうございます。

一度全ての制約を解除して設定し直してみました。
私の理解力が乏しくて恐縮ですが追加で教えて下さい。

上の手順で3まで制約を付けて、4の左下のUILabelの
上下左まで制約を付けるところまではエラーなく制約が付けられているのですが
左下のUILabelのStackViewに対する右の制約を付けた時に先ほど
追記した画像と同じエラーになってしまいます。

＞左下の UILabel の幅を StackView の左端まで設定
この部分がいまいち理解できないのでご教示頂きたいです。。。