[Swift]3行で超簡単にUIImage180°回転させる方法

Swift

はじめに

開発をしていると、「次へ」や「戻る」を表す矢印の画像など、左右対称のものを使用することがあります。その際に、両方の画像をアセットに取り込むのもリソースの無駄になり、できるだけ節約したい。そこで簡単に画像を反転する方法を紹介します。

結論

右矢印がオリジナル画像です。今回紹介する方法を使用することで右矢印を180°回転させ、左矢印として表示しています。

検証環境

端末バージョン
MacBig Sur 11.2.3
Xcode12.5
Swift5
ios13.0

前提条件

以下のような右矢印のみを作成し、xcassetsに保存しています。
画像の表示にはUIImageViewを使用。

コード

import UIKit

class SampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        let originImage = UIImage(named: "arrow")
        let cgImage = originImage?.cgImage
        
        // 反転比較用のオリジナル画像
        let rightArrowImageView = UIImageView(frame: CGRect(x: 0, y: 150, width: 50, height: 50))
        rightArrowImageView.center.x = view.center.x
        rightArrowImageView.image = originImage
        view.addSubview(rightArrowImageView)
        
        // オリジナル画像を反転し、左向き矢印にする
        let leftArrowImage = UIImageView(frame: CGRect(
                                            x: rightArrowImageView.frame.origin.x,
                                            y: rightArrowImageView.frame.origin.y + 100,
                                            width: 50, height: 50))
        leftArrowImage.image = UIImage(
            cgImage: cgImage!,
            scale: originImage!.scale,
            orientation: UIImage.Orientation.down)
        view.addSubview(leftArrowImage)
    }
}

解説

最初に比較用の右矢印を作成している。

        // 反転比較用のオリジナル画像
        let rightArrowImageView = UIImageView(frame: CGRect(x: 0, y: 150, width: 50, height: 50))
        rightArrowImageView.center.x = view.center.x
        rightArrowImageView.image = originImage
        view.addSubview(rightArrowImageView)

その下にオリジナルの右矢印画像を180°回転したものを表示している。
回転させるためにオリジナル画像をCGImageに変換し、UIImageのイニシャライザでUIImage.Orientation.downを指定することで回転処理をいています。

        // オリジナル画像を反転し、左向き矢印にする
        let leftArrowImage = UIImageView(frame: CGRect(
                                            x: rightArrowImageView.frame.origin.x,
                                            y: rightArrowImageView.frame.origin.y + 100,
                                            width: 50, height: 50))
        leftArrowImage.image = UIImage(
            cgImage: cgImage!,
            scale: originImage!.scale,
            orientation: UIImage.Orientation.down)

参照

UIImage.Orientation | Apple Developer Documentation
Constants that specify the intended display orientation for an image.

コメント

タイトルとURLをコピーしました