【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Swift】画像(UIImageView)を縦・横のサイズの変更とアスペクト比を保持する方法を徹底解説

【Swift】最新版!画像(UIImageView)を自由にリサイズ(UIGraphicsImageRenderer)する方法
ふくしま

こんにちは!株式会社メモリアインクの福嶋です〜

iOSアプリ開発において、画像を適切なサイズで表示することは、アプリの見た目とパフォーマンスに大きく影響します。この記事では、Swiftを使用して画像(UIImageView)をパーフェクトにリサイズする方法について詳しく説明します。

この記事を読んでわかること…
・UIImageとは?
・UIGraphicsImageRendererとは?
・Swiftで画像をリサイズする方法
・リサイズした画像のアスペクト比を保持する方法

画像(UIImageView)にタップ検知を実装する方法は以下で解説していますので、興味があればご覧ください!

目次

UIImageViewとは?

UIImageView(イメージビュー)は、iOSアプリケーションで画像を表示するために使用されるUIコンポーネントです。UIImageオブジェクトを使用して画像を管理し、アプリのインターフェースに組み込むことができます。

UIGraphicsImageRendererとは?

UIGraphicsImageRendererはiOS 10以降に導入された新機能です。
画像の描画とレンダリングをするためのクラスで、インスタンス化されたオブジェクトは画像コンテキストと呼ばれ、画像を編集するための仮想的なキャンバスや作業領域をイメージすると分かりやすいかもしれません。
画像処理をより簡単かつ効率的に行うことができるようになり、従来のUIGraphicsBeginImageContext()と比較して、より少ないコードで高品質な画像処理が可能になります。

画像のリサイズ方法

リサイズ部分のコード

// リサイズ関数
extension UIImage {
    func resized(toWidth width: CGFloat, using rendererFormat: UIGraphicsImageRendererFormat = .default()) -> UIImage? {
        // アスペクト比を算出
        let scale = width / self.size.width
        let height = self.size.height * scale
        // リサイズ後の画像のサイズ
        let size = CGSize(width: width, height: height)
        // 画像コンテキストを作成
        let renderer = UIGraphicsImageRenderer(size: size, format: rendererFormat)
        return renderer.image { (context) in
            // 画像コンテキストに描画を行う
            self.draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

コードの説明:
まずカスタムのリサイズメソッドを定義するためにUIImageを拡張します(2-16行目)
使用する画像のアスペクト比維持するために、比率を算出します(5-6行目)
渡されてくる引数widthと算出したアスペクト比から求められるheightを元にリサイズ後の画像サイズをインスタンス化する(8行目)
指定されたサイズで新しい画像コンテキストを作成し、元の画像をこの新しいサイズに合わせて描画する(10-14行目)

return renderer.image は呼び出し元に対してリサイズした画像コンテキストをUIImage型で返却します。

定義したリサイズを

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // 画像をロード
        if let imagefix = UIImage(named: "Image") {
            // 画像をリサイズ
            let resizeImageView = imagefix.resized(toWidth: 100)
            // リサイズした画像をインスタンス化
            let myImageView = UIImageView(image: resizeImageView)
            // 画像を真ん中に配置
            let screenHeight = UIScreen.main.bounds.height
            let screenWidth = UIScreen.main.bounds.width
            myImageView.center = CGPoint(x: screenWidth / 2, y: screenHeight / 2)
            // インスタンス化した画像をViewに表示
            self.view.addSubview(myImageView)
        }
    }
}

先ほど定義したメソッドを、リサイズしたいViewが読み込まれるタイミングで利用します。
プロジェクトに格納した画像ファイルをロード(7行目)して、その画像を先ほど作ったresizedメソッドを使って自由にサイズを変更することができます。
※画像のロード方法はこちら!

以上で画像を自分の想定するサイズにリサイズすることができました。
ビルドして確認してみましょう!

まとめ

いかがでしたか?
UIGraphicsImageRendererを利用することで、Swiftにおける画像のリサイズ処理がより簡単かつ効率的になりますので、是非とも活用してみてください!
それではまた次回の記事でお会いしましょう!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次