LoginSignup
33
27

More than 5 years have passed since last update.

ストーリーボードでUIを綺麗にレイアウトするネタ集

Posted at

Storyboardのレイアウトで散々悩まされたので、ここにまとめてUI/Storyboard嫌いを克服したいと思います。

今回はこういったGoogleMapsのDetailView的なレイアウトを直してみましょう。

Screen Shot 2017-07-16 at 11.47.55 AM.png

上記のように、これにConstraintsをつけまくったのに、上手くいかないみたいなことありませんでしたか?

修正方法1. グループ化する

UIViewを新しく作って、まとまった情報はその下に入れましょう。
そうすると、細々した情報はUIViewの中だけでConstraintを作れるので、大きなレイアウト崩れはなくなる!
Screen Shot 2017-07-16 at 1.17.52 PM.png

修正方法2: 画像をAspect Fillにする

Apiから画像を引っ張って来る場合、画像サイズがランダムなので、以下のようにStoryboardでAspect FillClip to boundsを選んでください。 詳しくはこちら

Screen Shot 2017-07-16 at 12.28.09 PM.png

修正方法 3. テキスト量がダイナミックに増えたり減ったりする場合のUILabelの制御

Apiなどで住所やタイトルを引っ張って来る場合は、テキスト量や最大テキスト量がわからないので、
以下のようにスペースを空けておくとよい。
Screen Shot 2017-07-17 at 5.52.03 PM.png

どんどん増やしていきたいと思います!

33
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
27