[swift] autolayout을 이용한 채팅창 메시지 UI구현

 

autolayout을 이용한 채팅창 메시지 UI구현

해외에서는 채팅창구현을 firebase + JSQMessageViewController 형태로하거나 tableview customcell을 이용하는것이 보통인데

이 글에서 설명할 것은 채팅 창이아니라 테이블뷰나 collectionView를 사용할때 cell안에 들어가는 autolayout을 이용해 동적인  message Box를 만드는 것을 목표로한다.

이 메시지박스를 이용해 tableview나 collectionView를 사용하면 간단하다.

1. UILabel을 이용해 메시지 박스 만들기

class UIMarginLabel: UILabel {

    

    @IBInspectable var topInset: CGFloat = 0.0

    @IBInspectable var leftInset: CGFloat = 0.0

    @IBInspectable var bottomInset: CGFloat = 0.0

    @IBInspectable var rightInset: CGFloat = 0.0

    

    var insets: UIEdgeInsets {

        get {

            return UIEdgeInsetsMake(topInset, leftInset, bottomInset, rightInset)

        }

        set {

            topInset = newValue.top

            leftInset = newValue.left

            bottomInset = newValue.bottom

            rightInset = newValue.right

        }

    }

    

    override func drawText(in rect: CGRect) {

        super.drawText(in: UIEdgeInsetsInsetRect(rect, insets))

    }

    

    override func sizeThatFits(_ size: CGSize) -> CGSize {

        var adjSize = super.sizeThatFits(size)

        adjSize.width += leftInset + rightInset

        adjSize.height += topInset + bottomInset

        

        return adjSize

    }

    

    override var intrinsicContentSize: CGSize {

        var contentSize = super.intrinsicContentSize

        contentSize.width += leftInset + rightInset

        contentSize.height += topInset + bottomInset

        

        return contentSize

    }

    

}

먼저 UILabel 안쪽에 padding을 넣어주기위해 UIlabel Subclass를 하나 작성한다.

(여기서한가지의 팁을드리자면 채팅기능이아닌 단순한 padding이 필요한 라벨에 위의 클래스를 작성하여 서브클래싱할경우 UIbutton을 넣는것으로대체해도된다. UIbutton에는 이미 padding값이 있기때문!)

라벨을 하나만들어주고 customclass에 해당 클래스를 선언해준뒤 outlet을 연결해준다.

label의 line수는 0 으로 지정할것!

      //messageLabel 초기화

        missionDescripTionLabel.text = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

        

        missionDescripTionLabel.insets = UIEdgeInsetsMake(10, 10, 10, 10);

        sitterCommentLabel.insets = UIEdgeInsetsMake(10, 10, 10, 10);

        

        view.layoutIfNeeded();

구현부에는 padding을 적용시켜줄 두개의 label을 초기화시켜주면 끝.

왜 이런 클래스를 작성해야하느냐? autolayout을 걸게되면 label은 자동으로 text영역에 딱 맞게 생성되게된다. 이것을 막기위해 width , height 에 eqaul constraints를 걸어 padding을 준것처럼 만들수도 있겠지만 그렇게된다면 컨텐츠크기에맞춰 label을 바꿧을때 해당 constraints의 constant 값을 조정해주어야하고 채팅창길이가 화면을 넘어갔을때도 디바이스크기별로 조건을 걸어줘야되기때문에 여간 귀찮은작업이아닐수 없다

그래서 autolayout을 이용하여 이과정을 줄이도록 한다.

이렇게선언하면 준비물은 끝났고 autolayout만 걸어주면된다.

2.Autolayout 걸기

autolayout 이놈은 어떤면에서는 편하지만 숙달되기전까지는 여간 사용하기힘든놈인것 같다.

정적인 페이지에서 정적인요소들만으로 구성한다고했을경우는 꽤 편하지만 동적으로 할당하여 uicomponent의 크기가 달라진다고 했을때 문제가좀 되게된다.

특히 scrollview에서...

나는기본적으로상단에 스크롤뷰가 필요했기때문에 하나 넣어주고 rootview에대해서

  left:0 right :0 top :0 bottom: 8 (왼쪽 이미지에대해서) height equal

을 걸어주었고

프로일 이미지의 센터와 label의 top을 이어주고 프로필이미지에는 width height equal 채팅 label에 대해서 leading rootView에대해서 8 trailing을 걸어주고 Y값 위치를 위해 왼쪽의 label의 bottom과 이미지뷰의 top에 8을 걸어주었다.

그림을봐도이해가되지않는다면 autolayout에관한 공부를 더하는것이좋을것같다..

여기서 이부분이 가장중요한데 label의 leading을 superview의 리딩에 연결해준다음

equal로 지정되어있는 relation을 Greater Than or Equal로 바꿔주고 constant는 본인이원하는 여백값으로 바꾸어주면 된다 본인은 채팅창과 왼쪽 끝의 최소거리를 10으로 지정했다.

greater Than or equal 속성은 두 attribute가 최소한 10의 거리는 유지해야한다는 말이다.

이렇게지정해준다면  끝!

실행해보면 텍스트가 길어졌을때 자동으로 라벨의 높이가조정되며 줄이바뀌는것을 확인할 수 있다.