UIButton 이미지를 손쉽게 정렬하자~

아이폰 Swift에서 UIButton 안의 이미지를 원하는 위치에 두려면 

Edge Inset을 이용하여 좌우상하에 여백을 줘야 한다

 

여간 귀찮고 불편한 일이 아닐 수 없다

 

그래서 좀 더 편하게 이미지를 옮기는 방법을 소개한다

 

원리는 무지 간단하다

Edge Inset를 가로,세로 기준으로 이미지 크기와 함께 각각 계산해 주면 된다

 

왼쪽 정렬 

(L: 왼쪽 여백, R: 오른쪽 여백, M: 여백, IW: 이미지 너비, BW: 버튼 너비)

 

 

 

 

가운데 정렬 

 

 

 

 

이 두가지 경우만 이용하면 나머지 정렬도 모두 가능하다

 

코딩하면 다음과 같다

 

 

class ImageButton: UIButton {

    

    //가로 정렬 기준 (-1: 왼쪽, 0: 가운데, 1: 오른쪽)

    @IBInspectable var horizontal: Int = 0

    

    //세로 정렬 기준 (-1: 위, 0: 가운데, 1: 아래)

    @IBInspectable var vertical: Int = 0

    

    //기준으로부터의 거리 (여백)

    @IBInspectable var point: CGPoint = CGPointMake(0, 0)

    

    //이미지 크기

    @IBInspectable var size: CGSize = CGSizeMake(0, 0)

    

    private var mSetSize: CGSize?

    

    override func drawRect(rect: CGRect) {

        let width = frame.width

        let height = frame.height

        

        //처음 또는 버튼 크기가 달라지면 다시 위치 계산

        if  mSetSize == nil || !(mSetSize?.width == width && mSetSize?.height == height) {

            locate()

            

            //버튼 크기값 저장

            mSetSize = CGSizeMake(width, height)

        }

    }

    

    //위치 계산후 적용

    private func locate() {

        //가로 정렬

        let width = size.width

        let x1 = point.x

        let x2 = frame.width - x1 - width

        switch (horizontal) {

        case -1: //왼쪽 정렬

            

            //이미지 왼쪽은 여백 그대로

            imageEdgeInsets.left = x1

            

            //이미지 오른쪽은 버튼 너비에서 margin, 이미지 너비를 뺀다

            imageEdgeInsets.right = x2

            

        case 1: //오른쪽 정렬

 

            //왼쪽 정렬과 반대로 한다

            //이미지 왼쪽은 버튼 너비에서 margin, 이미지 너비를 뺀다

            imageEdgeInsets.left = x2

            

            //이미지 오른쪽은 여백 그대로

            imageEdgeInsets.right = x1

            

        default: //가운데 정렬

            

            //이미지 왼쪽은 버튼의 가운데에서 여백을 더하고 다시 이미지 너비의 절반을 뺀다

            imageEdgeInsets.left = ((frame.width / 2) + x1) - (width / 2)

            

            //이미지 오른쪽은 버튼 너비에서 위에서 계산한 왼쪽 좌표와 이미지 너비를 뺀다

            imageEdgeInsets.right = frame.width - (imageEdgeInsets.left + width)

        }

        

        //세로 정렬 (가로 정렬과 같은 원리로)

        let height = size.height

        let y1 = point.y

        let y2 = frame.height - y1 - height

        switch (vertical) {

        case -1: //윗 정렬

            

            imageEdgeInsets.top = y1

            imageEdgeInsets.bottom = y2

            

        case 1: //아랫 정렬

            

            imageEdgeInsets.top = y2

            imageEdgeInsets.bottom = y1

            

        default: //가운데 정렬

            

            imageEdgeInsets.top = ((frame.height / 2) + y1) - (height / 2)

            imageEdgeInsets.bottom = frame.height - (imageEdgeInsets.top + height)

        }

    }

 

}

 

 

 

 

스토리 보드로 적용해 보자

 

 

 

 

 

Custom Class를 위에서 만든 Image Button으로 바꾸고

다음과 같이 입력해 보자

 

 

 

 

 

 

실행하면 이런 모습이다 

버튼안의 이미지가 50x50 이고

가로는 왼쪽에서 20포인트, 세로는 가운데에서 10포인트 움직였다

 

 

 

 

 

 

 

 

 

 

도움이 되셨다면~ 정성으로 빚은 저희 앱!  많은 이용 바래요:)

 

https://meorimal.com/index.html?tab=spaceship

우주선 - 방치형 인공지능 투자 체험기

 

https://meorimal.com/subway.html

지하철어디있니