はじめに
開発をしていると、「次へ」や「戻る」を表す矢印の画像など、左右対称のものを使用することがあります。その際に、両方の画像をアセットに取り込むのもリソースの無駄になり、できるだけ節約したい。そこで簡単に画像を反転する方法を紹介します。
結論
右矢印がオリジナル画像です。今回紹介する方法を使用することで右矢印を180°回転させ、左矢印として表示しています。
検証環境
端末 | バージョン |
---|---|
Mac | Big Sur 11.2.3 |
Xcode | 12.5 |
Swift | 5 |
ios | 13.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.
コメント