【Swift4】Storyboardを使わずに、コードだけでUIImageを表示する方法

Storyboardで画像を表示する時に、StoryboardからUIImageのパーツを引っ張って@IBOutlet
接続してコードを書く人は多いと思う。

しかし、一つの画面の中にたくさんの画像がある場合は、その方法を使うとUIImageをたくさんStoryboardに配置する必要があるため、どうしても動作が重くなりがちだし、メモリも食ってしまう。

一枚の画像を置く時や趣味程度のアプリなどでは、この方法を使っても良いと思うのだが、複数の画像を設置する時やビジネスでアプリを製作する場合を見据えて、画像をコードで配置する方法を学んでいても良いのだと思う。

そこで、今回は画像をコードで配置する方法をまとめた。


◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇

　1. 実現しようとした事
　2. 解決策
　3. 実行してみた
    4. まとめ

　1. 実現しようとした事

じゃんけんアプリのタイトルで、タイトル用にダウンロードした画像を中心に表示してみる。

ファイル名は"17431.jpg"としておき、デバイスの中心が、画像の中心と一致するようにし、そのまま画像を縮尺を変えずにデバイスの縦横まで引き伸ばす。

　２. 解決策

　　// UIImage インスタンスの生成

            let image1:UIImage = UIImage(named:"17431.jpg")! //パー

            // UIImageView 初期化

            let imageView = UIImageView(image:image1)

            

            // スクリーンの縦横サイズを取得

            let screenWidth:CGFloat = view.frame.size.width

            let screenHeight:CGFloat = view.frame.size.height

            

            // 画像の縦横サイズを取得

            let imgWidth:CGFloat = image1.size.width

            let imgHeight:CGFloat = image1.size.height

            

            // 画像サイズをスクリーン幅に合わせる

            let scale:CGFloat = screenWidth / imgWidth

            let rect:CGRect =

                CGRect(x:0, y:0, width:scale*imgWidth, height:scale*imgHeight)

            

            // ImageView frame をCGRectで作った矩形に合わせる

            imageView.frame = rect;

            

            // 画像の中心を画面の中心に設定

            imageView.center = CGPoint(x:100, y:100)

  

            // UIImageViewのインスタンスをビューに追加

            self.view.addSubview(imageView)

　3. 実行してみた

[図] 実行してみた結果

うまく表示された。

　4. まとめ

この記事では「UIImageをコードで指定する方法」を中心にまとめた。

このコードについて詳しく解説すると、

            let rect:CGRect =

                CGRect(x:0, y:0, width:scale*imgWidth, height:scale*imgHeight)

画像の位置を変えたければxとyの引数に渡されている値を変えてあげればいいし、画像の幅と高さを変えたければ、widthとheightの引数に与えられている値を変えてあげればよろしいのである。

例えば、サイズを100*100にしてあげたいのであれば、

            let rect:CGRect =

                CGRect(x:0, y:0, width:100, height:100)

こういう風に記述すればよろしい。

ちなみに、画像のボタンの角を丸く設定しているが、このコードは別のコードで指定しているので今回取り上げたコードとは関係がない。

また機会があれば、記事にしようと思う。