UIImageView 투명 배경 패턴 이미지 적용하기

이런 모양의 패턴을 정확하게 뭐라고 부르는지 모르겠다,,-_-;; 아니 정확한 명칭이 있기는한가? 모르겠네,,

그래도 그냥 "투명 배경 패턴" 이라고 하면 다들 뭔지 알긴할꺼다. 

아래 이미지 처럼 하얀색과 회색의 사각형이 반복적으로 나타나는 패턴. 이걸 이미지 리소스를 사용하지 않고, swift 코드로 생성하는 방법을 소개하려고 한다.

아래 코드는 그냥 투명 배경 패턴 이미지를 생성해서 UIImageView에 배경 패턴으로 설정하는 코드다. 

    func setMosaicPattern() {

        // 투명 배경 패턴 이미지 생성

        let image = createPatternImage(blockWidth: 10)

        

        // 배경색으로 설정

        imgView.backgroundColor = UIColor(patternImage: image)

    }

그 다음 코드는 실제로 투명 배경 패턴 UIImage를 생성해서 리턴하는 코드.

변수명이 애매한건 그냥 무시하자,, 한글로 지으라고 해도 솔직히 뭐라고 해야될지 모르겠다. 큰 사각형? 네모 네 개 합쳐진 사각형? 적절한 이름이 생각 안나네.

참고로 인자로 전달받는 blockWidth는 네모 한 개의 변의 길이다. 네모 4개가 모여서 패턴 이미지를 만드는거고, patternSize가 네모 4개가 합쳐진 사각형의 사이즈다.

    func createPatternImage(blockWidth: CGFloat) -> UIImage {

        let patternSize = CGSize(width: blockWidth * 2, height: blockWidth * 2)

        let blockSize = CGSize(width: blockWidth, height: blockWidth)

        var blockRect = CGRect(origin: .zero, size: blockSize)

        let color1 = UIColor.white

        let color2 = UIColor.init(red: 0.8, green: 0.8, blue: 0.8, alpha: 1.0)

        

        

        UIGraphicsBeginImageContextWithOptions(patternSize, true, UIScreen.main.scale)

        

        color1.setFill()

        UIRectFill(blockRect)

        

        blockRect.origin.x += blockWidth

        color2.setFill()

        UIRectFill(blockRect)

        

        blockRect.origin.x -= blockWidth

        blockRect.origin.y += blockWidth

        color2.setFill()

        UIRectFill(blockRect)

        

        blockRect.origin.x += blockWidth

        color1.setFill()

        UIRectFill(blockRect)

        

        let image = UIGraphicsGetImageFromCurrentImageContext()

        

        UIGraphicsEndImageContext()

        

        return image!

    }

그리는 순서는

1. 왼쪽 상단(0, 0)에 흰색으로 사각형 그림
2. 1번 오른쪽에 회색으로 사각형 그림
3. 왼쪽 하단에 회색으로 사각형 그림
4. 3번 오른쪽에 흰색으로 사격형 그림

근데 생각해보니깐,, 그냥 힌색으로 다 칠한 다음에 회색 사각형 두 개만 그리는식으로 해도 됐을 것 같다.

아래는 아이폰 시뮬레이터에서 확인한 결과 이미지.