Help us understand the problem. What is going on with this article?

【Swift】UIImageViewにグリッド線を表示したい

バージョン

XCode 11.3.1

参考

https://qiita.com/Sa2Knight/items/4debc1f66db8cd958803
こちらのコードをfor in文でまとめたものになります。

完成形

スクリーンショット 2020-02-14 17.19.01.png
こんな感じでUIImageViewにグリッド線が表示されます。

ファイルの準備

スクリーンショット 2020-02-14 17.37.54.png

ストーリーボードの準備

スクリーンショット 2020-02-14 17.30.42.png

Storyboard上にImageViewを配置したら、
classをGridViewに設定してあげます。(最初に作成したファイル)
また、表示するグリッド線が白なので、背景色を白以外に変えるか、
グリッド線の色を変えてください。

ここからは最初に作成したGrid.swiftファイルにコードを書いていきます。

コード

//
//  Grid.swift

import UIKit

class GridView: UIView {
    // splitCountは偶数にする
    // 縦線:splitCountの数 - 1
    // 横線:splitCountの数 / 2 - 1
    let splitCount = 10

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.lineWidth = 1.5

        UIColor.white.setStroke()
        for x in 0...splitCount {
            for y in 0...splitCount {
                if x != y, x == 0, y < splitCount {
                    path.move(to: getPoint(rect, x: CGFloat(x), y: CGFloat(y)))
                    path.addLine(to: getPoint(rect, x: CGFloat(splitCount), y: CGFloat(y)))
                    path.stroke()
                } else if x < splitCount, x % 2 == 0, x != 0, y == 0 {
                    path.move(to: getPoint(rect, x: CGFloat(x), y: CGFloat(y)))
                    path.addLine(to: getPoint(rect, x: CGFloat(x), y: CGFloat(splitCount)))
                    path.stroke()
                }
            }
        }
    }
  /* View上の指定した区画の座標を取得 */
  private func getPoint(_ rect: CGRect, x: CGFloat, y: CGFloat) -> CGPoint {
    let width = rect.width / CGFloat(splitCount)
    let height = rect.height / CGFloat(splitCount)
    return CGPoint(x: width * x, y: height * y)
  }

}

定数splitCountの数値を変えるだけで
グリッド線の数を変更できます。

Sossiii
デコレーションカンパニーで19年8月からインターンさせていただいています。 主にSwiftでの機能実装やObjective-C→Swift書き換えをしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした