UILabelを横に複数並べたくなることは良くあるだろう。
例えば「今日の先発は」+「●●です。」のようにして、右のUILabelのテキストを色々な値にしたい場合等だ。
親のViewよりも絶対に横幅が狭いという前提であれば比較的簡単だが、親のViewよりも広くなる場合を考慮すると少々めんどくさい事になる。
どうすれば良いか、順を追ってやってみよう。
例えば「今日の先発は」+「●●です。」のようにして、右のUILabelのテキストを色々な値にしたい場合等だ。
親のViewよりも絶対に横幅が狭いという前提であれば比較的簡単だが、親のViewよりも広くなる場合を考慮すると少々めんどくさい事になる。
どうすれば良いか、順を追ってやってみよう。
まずは親Viewよりも狭くなるケースでやってみる
以下のように親View(灰色の部分)を設定する。
ここにまずは一つ目のUILabelを追加し、左と上に制約をつける。
次に2つ目のUILabelを追加し、左右と上に制約をつける。
このままだと右側の制約でエラーになっているので、右側の制約のRelationをGreater Than or Equal(>=)にする。
これでエラーは無くなった。
右側のUILabelの文字数を増やして親Viewをはみ出すようにする
右側の「前田」を「ダルビッシュ」に変更すると以下のようにエラーが出る。
これは右側がはみ出したことによるものなので、エラーメッセージで指摘されているように修正する。
サイズインスペクターでContent Conpression Resistance Priorityを750から749に変更する。
これでエラー無く表示されるようになる。
右側にさらに固定長のUILabelを追加する
このままだと「です。」の部分が省略されていて、これだと仕様的に困ることもあるだろう。
「今日の先発は」+「●●」+「です。」
として真ん中のみ省略されるようにしてみる。
まずは右側のUILabelを一旦削除して「です。」を追加して上と右に制約をつける。
右側のUILabelの右の制約はGreater Than or Equalとしておく。
次に真ん中のUILabelを追加し、上と左右に制約をつける。
(分かりやすいように色も変えておく。)
ここで真ん中を長いテキストにしてみよう。
このようにエラーが出るので、真ん中のUILabelのサイズインスペクターでContent Conpression Resistance Priorityを750から749に変更する。
すると真ん中が省略された。
期待していた動きだ。
参考文献
Auto Layoutで固有サイズを使いこなそう | Money Forward Engineers' Blog
以下のように親View(灰色の部分)を設定する。
ここにまずは一つ目のUILabelを追加し、左と上に制約をつける。
次に2つ目のUILabelを追加し、左右と上に制約をつける。
このままだと右側の制約でエラーになっているので、右側の制約のRelationをGreater Than or Equal(>=)にする。
これでエラーは無くなった。
右側のUILabelの文字数を増やして親Viewをはみ出すようにする
右側の「前田」を「ダルビッシュ」に変更すると以下のようにエラーが出る。
これは右側がはみ出したことによるものなので、エラーメッセージで指摘されているように修正する。
サイズインスペクターでContent Conpression Resistance Priorityを750から749に変更する。
これでエラー無く表示されるようになる。
右側にさらに固定長のUILabelを追加する
このままだと「です。」の部分が省略されていて、これだと仕様的に困ることもあるだろう。
「今日の先発は」+「●●」+「です。」
として真ん中のみ省略されるようにしてみる。
まずは右側のUILabelを一旦削除して「です。」を追加して上と右に制約をつける。
右側のUILabelの右の制約はGreater Than or Equalとしておく。
次に真ん中のUILabelを追加し、上と左右に制約をつける。
(分かりやすいように色も変えておく。)
ここで真ん中を長いテキストにしてみよう。
このようにエラーが出るので、真ん中のUILabelのサイズインスペクターでContent Conpression Resistance Priorityを750から749に変更する。
すると真ん中が省略された。
期待していた動きだ。
参考文献
Auto Layoutで固有サイズを使いこなそう | Money Forward Engineers' Blog
コメント