この記事ではiOS9以上の機種に対してReadableContentGuideをもとにTableViewのサイズを変更してiPadでもそこまでデザインが崩れないようなアプリを開発する方法について解説していきます．
この手法を導入することで以下のようにデザインが崩れてしまっていたTableViewを改善することができます．
修正後
ただし，ReadableContentGuideということでiPhoneの場合でも少し左右に空白ができてしまうのが難点の一つであります．しかし，特にiPad用のコードを書く必要もなくStoryboard上で簡単にiPhoneを想定して作成したTableViewのデザインをiPadに対応させることができますのでとてもオススメの設定になります．
というわけで早速実装方法について解説していきましょう．
TableViewの設定
まずはこのようにReadableContentGuideを適応したいTableView上で必要な設定を行いましょう．とはいっても難しいことはなく，Storyboard上でTableViewを選択して以下の画像で示されていますように[Follow Readable Width]にチェックをいれるだけです．
これでTableViewの内側の要素に対してReadableContentGuideに対応したMarginが自動的に生成されるようになります．重要なのはこのMarginはTableView自体にできるわけではなくあくまで内部のセルのContent Viewにできることになるということです．
それでは肝心のセルの設定を行なっていきましょう．
TableView Cellの設定
私はよくxibファイルを使用してセルを実装するのですが一般的なセルの実装法でもそこまで手順は変わらないと思います．
まずTableViewと同様に[Follow Readable Width]にチェックを入れてください．ちなみにここにチェックを入れる際はしっかりとセル自体を選択しておいてください．
その後，Content View内のViewを選択した上で画像のように左右0のConstraintを追加します．この時，Constrain to marginsを必ずチェックしてください．
これで完成です．簡単ですね．iPadだとTableViewのデザインが崩れてしまうことに悩んでいたんですがこんなに簡単に解決できるとは思ってもいませんでした．
まとめ
というわけで簡単にReadableContentGuideに沿ったTableViewを実装することができました．
是非みなさんも試してストレスなくiPad版のアプリもリリースしてみてください．
それでは今回も最後までみてくださってありがとうございました．
0 件のコメント :
コメントを投稿