블로그 이미지
매몰

모바일 어플리케이션 개발 1인 기업 고영진모바일입니다. 저와 함께 맛깔스러운 앱을 만들어 보아요~

Rss feed Tistory
개발/ios 2018.05.08 11:12

UIEdgeInsets 없이 UILabel에 여백 넣기

UILabel에 여백을 넣는 방법은 다양하다.

그 중 NSLayoutConstraint를 이용하는 법을 다뤄보자!






class FitLabel: UILabel {


    //상하좌우 여백 storyboard 입력값

    @IBInspectable var edge: CGSize = CGSize(width: 0, height: 0)

    

    //너비, 높이가 적용될 Constraint

    private var mWidthConstraint, mHeightConstraint: NSLayoutConstraint?

    

    //좌우 여백값

    var edgeAllWidth: CGFloat {

        return edge.width * 2

    }

    

    //상하 여백값

    var edgeAllHeight: CGFloat {

        return edge.height * 2

    }

    

    override func awakeFromNib() {

        super.awakeFromNib()

        

        //storyboard에서 초기화된 글자로 맞춤

        fit()

    }


    func set(fitText text: String) {

        //코드상에서 글자를 직접 넣어 맞춤

        self.text = text

        fit()

    }

    

    private func fit() {

        //글자 + 여백 크기

        let width = intrinsicContentSize.width + edgeAllWidth

        let height = intrinsicContentSize.height + edgeAllHeight


        if mWidthConstraint == nil && mHeightConstraint == nil {

            //첫 실행때만 Constraint를 추가

            

            //Constraint를 직접 추가하기 위해 오토사이징 끔

            translatesAutoresizingMaskIntoConstraints = false

            

            //위의 글자 + 여백 크기를 너비,높이 Constraint로 생성하고 추가

            let widthConstraint = NSLayoutConstraint(item: self, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: width)

            let heightConstraint = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: height)

            addConstraint(widthConstraint)

            addConstraint(heightConstraint)

            mWidthConstraint = widthConstraint

            mHeightConstraint = heightConstraint

        }

        else {

            //두번째부터는 Constraint의 수치만 변경

            mWidthConstraint!.constant = width

            mHeightConstraint!.constant = height

        }

        

        //중앙 정렬

        textAlignment = .center

    }

}




핵심 원리는 그저 글자 전체크기를 불러와 여백을 더하여 NSLayoutConstraint를 만드는 것이다.

너무 간단해서 더이상 설명이 필요없다ㅎㅎ


 

 



수제 앱 장인: 고영진


(주)고영진모바일

1인기업 대표이사 겸 개발자

  

     실패만 하고 있어도 꿈을 포기하지 않는 남자 

     제가 직접 경험하고 습득한 지식을 위주로 올릴게요

 






사업자 정보 표시
고영진모바일 | 고영진 | 서울특별시 관악구 낙성대동 서울대연구공원 SK상생혁신센터 | 사업자 등록번호 : 109-11-82076 | TEL : 010-9990-3674 | Mail : gyjmeba@hanmail.net | 통신판매신고번호 : 2010-서울강서-0217호 | 사이버몰의 이용약관 바로가기
개발/ios 2017.05.30 16:08

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포인트 움직였다






 

 



수제 앱 장인: 고영진


고영진모바일 1인기업 대표 겸 개발자 

  

     실패만 하고 있어도 꿈을 포기하지 않는 남자 

     제가 직접 경험하고 습득한 지식을 위주로 올릴게요

 



사업자 정보 표시
고영진모바일 | 고영진 | 서울특별시 관악구 낙성대동 서울대연구공원 SK상생혁신센터 | 사업자 등록번호 : 109-11-82076 | TEL : 010-9990-3674 | Mail : gyjmeba@hanmail.net | 통신판매신고번호 : 2010-서울강서-0217호 | 사이버몰의 이용약관 바로가기
개발/ios 2017.02.22 17:31

이미지를 회전시키고 재사용하는 꿀팁



프로그램 안에서 같은 이미지를 


여러곳에 사용할때! 

그것도 회전시켜 사용할때!


원본 이미지의 회전된 이미지를 테이블안에 넣어 사용하면 간편하고 빠르다.

물론 메모리를 좀 차지하고, 

요즘 디바이스도 워낙 좋아져 속도도 별반 차이 없겠지만


그래도 엄청 많은 곳에 엄청 빈번하게 회전 이미지를 사용할때는 유용하다ㅋ




class RotateImageTable {

    

    let mSrcImage: UIImage

    let mUnit: CGFloat

    

    var mImages: [Int: UIImage]

    

    init(srcName: String, unit: CGFloat) {

        mSrcImage = UIImage(named: srcName)!    //원본 이미지

        mImages = [Int: UIImage]()  //이미지 테이블

        mUnit = unit    //회전시킬 라디안 단위

    }

    

    private func rotate(radian: CGFloat) -> UIImage {

        //이미지 크기

        let size = mSrcImage.size

        let midX = size.width / 2

        let midY = size.height / 2

        

        //회전 작업 시작

        UIGraphicsBeginImageContext(size)

        

        //회전축을 변경 회전시킴

        let context = UIGraphicsGetCurrentContext()

        CGContextTranslateCTM(context, midX, midY)

        CGContextRotateCTM(context, radian)

        CGContextTranslateCTM(context, -midX, -midY)

        

        //이미지에 적용

        CGContextDrawImage(context, CGRectMake(0, 0, size.width, size.height), mSrcImage.CGImage)

        let image = UIGraphicsGetImageFromCurrentImageContext()

        

        //회전 작업

        UIGraphicsEndImageContext()


        return image

    }

    

    func image(radian: CGFloat) -> UIImage {

        //라디안 각도를 단위에 맞게 변경

        let key = Int(round(radian / mUnit))

        if key == 0 {

            //각도가 0이라면 원본 이미지 사용

            return mSrcImage

        }

        

        let image = mImages[key]

        if image == nil {

            //테이블에 해당 각도가 없다면 회전 이미지 생성

            let rotateImage = rotate(radian)

            mImages[key] = rotateImage

            return rotateImage

        }

       

        //테이블에 저장된 회전 이미지 사용

        return image!

    }

}





요렇게 사용한다



//0.02 라디안씩 회전하는 이미지 테이블 생성

let imageTable = RotateImageTable(srcName: "arrow.png", unit: 0.02)

        

//이미지 사용

imageTable.image(1.4).drawInRect(CGRectMake(50, 50, 150, 150))

imageTable.image(-0.67).drawInRect(CGRectMake(30, 200, 400, 400))

        

addSubview(UIImageView(image: imageTable.image(2.1)))

addSubview(UIImageView(image: imageTable.image(-3)))




 

 



수제 앱 장인: 고영진


고영진모바일 1인기업 대표 겸 개발자 

  

     실패만 하고 있어도 꿈을 포기하지 않는 남자 

     제가 직접 경험하고 습득한 지식을 위주로 올릴게요

 




사업자 정보 표시
고영진모바일 | 고영진 | 서울특별시 관악구 낙성대동 서울대연구공원 SK상생혁신센터 | 사업자 등록번호 : 109-11-82076 | TEL : 010-9990-3674 | Mail : gyjmeba@hanmail.net | 통신판매신고번호 : 2010-서울강서-0217호 | 사이버몰의 이용약관 바로가기
TOTAL 69,579 TODAY 8