普段Storyboardを使ってUIを構築している私ですが、ランダムな座標にUIImageを生成しようと思って調べたら色々勉強になったのでまとめます。

バージョン

Swift 5.3
Xcode 12.1

この記事で述べること

storyboardを使わずにUIを画面に描画する方法

画面の真ん中に画像を配置する

とりあえず、コードから決まった位置に画像を配置します。

import UIKit

class ViewController: UIViewController {

	override func viewDidLoad() {
		super.viewDidLoad()
		// UIImageの初期化
		let image: UIImage = UIImage(named: "ninja")!
		
		// UIImageViewの初期化
		let imageView = UIImageView(image: image)
		
		// 画面の縦幅・横幅を取得
		let viewWidth: CGFloat = view.frame.size.width
		let viewHeight: CGFloat = view.frame.size.height
		
		// 画像に設定したい縦・横幅を変数に格納
		let imageWidth: CGFloat = 100
		let imageHeight: CGFloat = 100
		
		// 画像の座標・大きさを生成
		let rect: CGRect = CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight)
		
		// 指定した座標・大きさを設定
		imageView.frame = rect;
		
		// 画像を画面の中央を指定
		imageView.center = CGPoint(x: viewWidth / 2, y: viewHeight / 2)
		
		// viewにUIImageViewを追加
		self.view.addSubview(imageView)	
		
	}

}

コードだけで画像が真ん中に配置されました。かわいいね。

ランダムな座標に画像を生成する

CGPointの座標はCGFloatを引数に取るので、

CGPoint(x: CGFloat.random(in: 0...viewWidth), y: CGFloat.random(in: 0...viewHeight))

でランダムな座標を生成することが出来る。

なので、上の画面の真ん中に画像を生成するコードの

imageView.center = CGPoint(x: viewWidth / 2, y: viewHeight / 2)

の部分を

imageView.center = CGPoint(x: CGFloat.random(in: 0...viewWidth), y: CGFloat.random(in: 0...viewHeight))

にすることでランダムな座標で画像が生成される。

まず、今はViewDidLoadの中に画像生成のコードを書いているので、関数にまとめます。

override func viewDidLoad() {
		super.viewDidLoad()
		
	}
	
	@IBAction func generateUIIMageVIew() -> Void {
		// UIImageの初期化
		let image: UIImage = UIImage(named: "ninja")!
		
		// UIImageViewの初期化
		let imageView = UIImageView(image: image)
		
		// 画面の縦幅・横幅を取得
		let viewWidth: CGFloat = view.frame.size.width
		let viewHeight: CGFloat = view.frame.size.height
		
		// 画像に設定したい縦・横幅を変数に格納
		let imageWidth: CGFloat = 100
		let imageHeight: CGFloat = 100
		
		// 画像の座標・大きさを生成
		let rect: CGRect = CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight)
		
		// 指定した座標・大きさを設定
		imageView.frame = rect;
		
		// 画像を画面の中央を指定
		imageView.center = CGPoint(x: CGFloat.random(in: 0...viewWidth), y: CGFloat.random(in: 0...viewHeight))
		
		// viewにUIImageViewを追加
		self.view.addSubview(imageView)
	}

ボタンを付けます

そしてボタンと関連付けます。

そうするとこんな感じでボタンを押すたびに画像がランダムな位置で生成されました。すごいね

一定の時間で画像が生成されるようにする

Timerを使って1秒ごとに画像が生成されるようにします。

ボタンを削除して@IBActionの部分を@objcにする。
タイマーの初期化

で実装できます。


	var generateImageTimer = Timer()
	override func viewDidLoad() {
		super.viewDidLoad()
		generateImageTimer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(generateUIIMageView), userInfo: nil, repeats: true)
	}
	
	@objc func generateUIIMageView() -> Void {
		// UIImageの初期化
		let image: UIImage = UIImage(named: "ninja")!
		
		// UIImageViewの初期化
		let imageView = UIImageView(image: image)
		
		// 画面の縦幅・横幅を取得
		let viewWidth: CGFloat = view.frame.size.width
		let viewHeight: CGFloat = view.frame.size.height
		
		// 画像に設定したい縦・横幅を変数に格納
		let imageWidth: CGFloat = 100
		let imageHeight: CGFloat = 100
		
		// 画像の座標・大きさを生成
		let rect: CGRect = CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight)
		
		// 指定した座標・大きさを設定
		imageView.frame = rect;
		
		// 画像を画面の中央を指定
		imageView.center = CGPoint(x: CGFloat.random(in: 0...viewWidth), y: CGFloat.random(in: 0...viewHeight))
		
		// viewにUIImageViewを追加
		self.view.addSubview(imageView)
	}

自動で勝手に画像が生成されるようになりました。すばらしい！

参考文献