[swift]挫折しながら覚えるiOS開発その2 カスタムセルのレイアウト作成


[まとめ] 現在開催中のKindleセール情報はこちら

前回、TableViewの作成までを行いました。

今回は以下のようなカスタムセルを作ってみます。

ゴールはQiita記事のタイトルと投稿ユーザのアイコンと名前、そしてストック数を表示できるようにすることです。

layout1

1. ざっくりとしたレイアウトを作成

Storyboardを開いて、ポチポチと要素を追加していきます。

まずは「Table View Cell」を選択して、「Table View」の上に配置します。

次に「Label」を左上に設置。分かりやすいように表示名にtitleとつけておきます。

続いて、「Image View」を左下に設置。

その隣に再度「Label」を設置。今度は表示名にnameとつけておきます。

ストック数の表示はViewとLabelを組み合わせて作成することにします。

「View」を設置し、背景色をオレンジ色に、そしてWidth, Heightが正方形になるように同じ値に調整します。

そのViewの上に、ストック数を表示するLabelと、単にストックという文字列を扱うLabelを設置します。

これでレイアウトができたのですが、iPhone、iPad両対応のUniversalレイアウトにした場合は、widthとheightがAnyとなっているため、実機でどのように表示されるかが分かりません。

そして、シミュレータを起動して確認するにしても、まだコントローラーと紐付けていないので前回つくったTableViewが表示されるだけになってしまいます。

そこで、Storyboardのプレビュー機能を使って確認することにします。

プレビュー機能を利用するには、画面右上に表示される「Show the Assistant Editor」を選択して2画面表示に切り替えます。

layout2

そして、切り替えた画面に表示されている「Automatic」をクリックし、メニューの一番下に表示される「Preview」をクリックします。

layout3

これで片方の画面にiPhone 4-inchで見た時のレイアウトが表示されるようになります。

また、プレビュー画面の左下にある「+」ボタンを選択すると他のサイズの端末でプレビューすることができます。

layout4

2. AutoLayoutによる調整

プレビュー画面を見ると、右端のストック数のレイアウトが見えなくなってしまっています。

これはストック数の表示部分が右寄せではなく、単に左端からの距離で設置されているために見切れてしまっているようです。

そこで、AutoLayoutという機能を使って要素に明示的な制約を設定していきます。

まずは、titleに対する制約から設定します。

layout5

これでtitleは左上に表示するという制約が設定できました。

続いて、アイコン画像です。

こちらもtitleと同様にtopとleftを固定します。

topの位置はtitleからの相対位置になっていますが、プルダウンメニューで親要素からの相対位置に切り替えることもできます。

layout6

画像は省略しますがname部分も同様に対応します。

そしてストック数の表示部分です。

こちらは右寄せにしたいのでtopとrightを固定します。

layout7

これでAutoLayoutによる制約を設定できたので、うまく表示されるようになるかと思ったのですが変化ありません。

layout4

セルのAutoLayout設定はできたのですが親要素に制約がかかっていないため、正しく表示できていないようです。

layout8

そこで親要素となるTableViewを選択し、「Resolve Auto Layout Issues」に表示される「Add Missing Constraints」を選択すると自動で親要素を水平中央寄せに設定してくれました。

(この設定に気づかず、色々いじってハマっていました。。。)

layout9

これでカスタムセルのレイアウトがひと通りできました。

次回は、いよいよカスタムセルの実装に入っていきます。

[まとめ] 現在開催中のKindleセール情報はこちら