画像をStoryBoard上で描画する

内容

iPhone/iPadプログラミングバイブル iOS9/Xcode7/Swift 対応 (smart phone programming bible)

上の本を参考にiOSのUIViewと戯れています。

• 画像ファイルをプロジェクトに追加する
• 画像をStoryBoardに配置する
• 画像ファイルのサイズとフォーマットについて
• 2倍, 3倍の画像とグループ化した形で追加する
• 画像ファイルの読み込み

画像ファイルをプロジェクトに追加する

プロジェクト本体に追加する場合の手順

• プロジェクト直下のプロジェクト名フォルダを右クリック
• "Add Files to PROJECT_NAME"を選択
• 追加したいファイルを選択してAddをクリック

画像をStoryBoardに配置する

• StoryBoardの中で画像を追加したいViewを選択します
• 右側のユーティリティエイアの下側にViewに追加できる要素などが表示できるタブが並んでいます*1が、一番右のタブ(メディアライブラリ)を開きます
• メディアライブラリのタブにプロジェクトに追加された画像などの一覧があるので、その中から追加したい要素をStoryBoard上にドラッグします

画像は https://placehold.it/ にて取得しています。

画像ファイルのサイズとフォーマットについて

• プログラミングで指定するテキストや図形のサイズはポイント単位なので、端末ごとの解像度を気にしなくて良い
• 1ポイントのドットのことをスケールと呼ぶ
  • UIScreen.mainScreen().scale
• 画像はスケールに合わせて自動的に高解像後にはならないのでファイル名に「@2x」「@3x」をつけた2倍, 3倍の解像度の画像を用意する
• 基本的には png を利用する

2倍, 3倍の画像とグループ化した形で追加する

• 元の解像度の画像, 2倍, 3倍の解像度の画像をまとめてプロジェクト名のフォルダにドラッグ & ドロップ
• もし、ダイアローグが開くので、 追加するターゲットが編集中のプロジェクトか確認してOKを押す

画像ファイルの読み込み

• UIImage(named: "loadingTarget.png")で画像ファイルの読み込み
• UIImage#drawAtPoint(CGPoint)で描画する位置を指定
• UIImage#drawInRect(CGRect)でCGRectで指定した領域へと画像の拡大縮小描画が可能
  • UIImage.sizeのプロパティ(width: 幅, height: 高さ)を取得して、それを2倍, 3倍して2倍や3倍に拡大しで描画、など

明日は本気出す(と毎日言っている気も...)。

*1:ライブラリペインというそうです