search

krsakai / iOSStudy

1 stars 0 forks source link

AutoLayoutについて ( レイアウト制約編 ) #13

Closed krsakai closed 7 years ago

krsakai commented 7 years ago

■ AutoLayoutについて
一言でいうと
AutoLayoutはデバイスや向きなどが変わった場合でも、それに対応できるように予め制約を付けておくものです

◯ 基本的な制約の付け方について

（１日でマスターできる内容ではないのと、考え方のコツがいるため若干慣れが必要）

・制約を付ける方法は結構いっぱいあるので、とても混乱するが、とりあえず基本的な物を覚えておきたい

  1. マージンによる配置とサイズ制約
  2. 親ビューの中央からの位置による配置
  3. 他のパーツから位置や大きさを決定する方法、及び簡易設定の方法

■ 1. マージンによる配置とサイズ制約

2017-04-23 4 37 19

↑ 付けたい制約部分に値を入れて、最後に一番下のAdd を押して制約を追加する

（例） ボタンを選択してマージン指定の制約↑から30、←から30 の位置、横200、縦100 のサイズ という制約を付けるとエラーにならずに配置される

※補足 制約を付けた時に制約により実際の端末で配置される場所と、今StoryBoardで配置している場所が違うと黄色の警告が表示される。制約に従って配置を変更するには↓のツールバーの左のボタンを押すと配置が更新される default

また別の例として、↑から30、←から30、↓から30、→から30 という制約を付けるとエラーにならずに配置される 。 サイズに関しては位置の制約により自動的に大きさが決まる。（この場合は大きいボタンができる） この時にサイズで横200、縦100 という制約を付けてしまうと全ての制約を満たした配置ができないためエラーになってしまう。その旨が赤文字警告で表示されるのでそれを見て解決していけば良い

↓ エラーになっている

2017-04-23 5 02 02

赤矢印選択して理由詳細を見る

2017-04-23 5 02 31

赤マークを選択して被っている制約の競合を解決する。またはビュー部分のConstraint(制約)で被っている制約を選択してDeleteする

↓ Xcodeがどれを消すか聞いてくれる

2017-04-23 5 02 43

↓ または自分で消す

2017-04-23 5 05 17

■ 2. 親ビューの中央からの位置による配置

2017-04-23 4 46 37
  1. 他のパーツから位置や大きさを決定する方法、及び簡易設定の方法

A. ボタンを２つ配置して１つにはサイズ・位置の制約をエラーにならないようにつけておく B. ２つ目のボタンをキーボードのcontrolを押してドラッグして1つ目のボタンにドロップする ↓ のような表が出る

2017-04-23 4 50 40

で、1つ目のボタンに対して大きさを一緒にする や 、↑↓←→真ん中を同じにする のような制約を簡易的に付けられる

また、上の方で言い忘れたけど、↓のように矢印ボタンを押すと、どこのビューからの位置かが出るのでそれも利用して制約を付けられる

2017-04-23 5 27 07

◯ 制約の付け方参考キャプチャ

● 制約を付ける演習
◯ 下記のようになるように制約を付ける演習

◯ 手順 割愛。。 やり方は色々あるので↑のやり方を駆使して結果的に配置したいレイアウトにできれば問題ない

◯ やり方 

ここのゴールは制約はなんで付けないといけないのかと どうやったら制約付けて配置できるかがわかっていればよい

sachika1224 commented 7 years ago

理解してないけどクローズ

sachika1224 commented 6 years ago

参考URL： ↓AutoLayoutで画面の大きさに比例してViewの大きさを変えたい https://qiita.com/tmokita/items/abf8ec17469185de2d97 ↓ステータスバーを非表示にする2種類の方法 http://yuu.1000quu.com/2_kinds_of_methods_to_hide_the_status_bar ↓[iOS]Navigation ControllerでNavigation Barを表示しない https://nackpan.net/blog/2013/12/25/ios-navigation-bar/