[iOS]ランダムな座標にUIImageを生成する

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

# バージョン

Swift 5.3
Xcode 12.1

# この記事で述べること

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

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

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

```swift
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)	
		
	}

}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/6e285f2a-2c91-50f1-f5a3-0723c1184e7e.png" width="50%">



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

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

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

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

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

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

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

の部分を

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

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

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

```swift
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)
	}
```
ボタンを付けます

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/d51b372b-a7b5-8be8-cf89-32eb716ff4a8.png" width="50%">
そしてボタンと関連付けます。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/d60d6550-6383-5d1c-8c87-1a27fe1baaa1.png)




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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/11c3a5f9-6476-dae9-bb30-8b61c1a325b4.gif" width="50%">

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

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

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

で実装できます。

```swift

	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)
	}
```

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352602/8dd21862-3e36-62b1-32d2-791e0cac2b7f.gif" width="50%">

# 参考文献
- [[iPhone] 画像UIImageViewをSwiftコードで設定する](https://i-app-tec.com/ios/uiimageview.html)
- [【swift5】ストップウォッチタイマーの作り方](https://qiita.com/sventouz/items/91faaa4ccdf02a5788bd)
- [【Swift】乱数を生成する方法](https://capibara1969.com/2033/)
- [Timerを使ってみた](https://qiita.com/suzuki-ryou/items/3e5aa6d53a7f8b321d11)