AutoLayout으로 아직도 소모하고 있나요?

AutoLayout....그것은 지금까지 엔지니어의 수명을 단축시킨 물건이다.당신은 이런 경험이 없습니까?
트위터 같은 타임라인을 만들어라!!
아래의 시간선을 고려해 보세요.

트위터에 그림이 있는 것과 없는 것.일반적인 경우 두 개의 서로 다른 레이아웃의 칸을 준비해 나누어 보여주는 것이다.각 셀은 AutoLayout을 설정해야 합니다.트위터 텍스트의 라벨 높이를 가변 높이로 설정하기 힘들죠.
그뿐만이 아닙니다.타임라인의 규격이 변경되었다.
"맞다! Fabo와 Fabo를 쉽게 전달할 수 있도록 버튼을 설정해주세요!"
『...』
AutoLayout 리셋...메뚜기'

이렇게 해서 AutoLayout은 우리의 수명을 단축시켰다.

구세주 StackView의 등장

여기서는 StackView를 사용하여 위에 나타나는 타임라인의 레이아웃을 설정합니다.
StackView의 특징은 다음과 같습니다.

AutoLayout의 설정이 최소한으로 억제됨

hidden 속성 지원

부품 재구성 용이(편집 용이)

익숙해지면 초간단

안달

브래킷

널 좋아하게 됐어

오직 실천만이 있다.StackView를 사용하여 타임라인 만들기

xib 파일을 사용하여 칸 레이아웃을 만듭니다.

일반 구성 부품

우선 필요한 부품을 적절하게 배치하다.(배경색은 알기 쉽습니다)

트위터 이미지를 표시하는 ImageView도 구성됩니다.

StackView 사용

StackView를 사용할 때의 주요 내용은 다음과 같습니다.

부품을 따뜻하게 감싸는 StackView

수직방향, 수평방향으로 각각 배열된 부품

을 감싸고 있다

부품을 따뜻하게 싸다

우선 작은 단체를 찾아야 한다.nameLabel과 timeLabel은 수평 방향으로 배열되어 있기 때문에 StackView로 포장합니다.

그래서 작은 StackView에 name Label과 time Label이 감싸여 있습니다.이 StackView를 Small StackView라고 부르세요.
다음은 좀 큰 팀을 찾아라.
Small StackView, text Label, Twitter ImageView가 각각 수직 방향으로 배열되어 있기 때문에 StackView로 포장합니다.

여기서 만든 StackView는 Medium StackView라고 합니다.
마지막으로 Medium StackView와 iconImageView는 수평 방향으로 배열되어 StackView로 포장됩니다.

여기서 만든 StackView는 LargeStackView라고 합니다.
StackView를 설정하면 부품이 약간 이상하게 구성되지만 이제 OK입니다.

ViewController의 소스 코드

ViewController.swift

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("TweetCell", forIndexPath: indexPath) as! TweetCell
        let tweet = self.tweets[indexPath.row]
        cell.iconImageView.image = tweet.icon
        cell.nameLabel.text = tweet.name
        cell.timeLabel.text = tweet.time
        cell.tweetLabel.text = tweet.text
        cell.tweetImageView.hidden = true
        if let image = tweet.tweetImage {
            cell.tweetImageView.hidden = false
            cell.tweetImageView.image = image
        }
        return cell
    }

이렇게 하면 트위터 이미지가 있거나 없을 때hidden 속성을 전환합니다.
Hidden 부품으로 StackView 내에 존재하지 않습니다.이미지가 없는 트윗은 ImageView를 존재하지 않게 한다는 것이다.
이렇게 하면 두 개의 칸을 준비할 필요가 없다.편리

최소한의 AutoLayout을 설정해주세요.

LargeStackView의 크기와 셀의 크기를 일치시키기 위해 LargeStackView에서 AutoLayout을 설정합니다.
구속은 위아래 좌우 여백을 0으로 설정합니다.
완성되면 시뮬레이터를 실행해서 확인해 보세요.

비참해 보이는 괴물을 낳았다.

부분 설정 AutoLayout

아이콘이 매우 크므로 AutoLayout을 설정합니다.
아이콘의 width 값과 Height 값을 입력하고 제약 값을 추가합니다.

조금 예뻐졌어요.
그 다음으로 트위터 이미지의 높이가 너무 커서 트위터 이미지의 ImageView에도 AutoLayout을 설치했다.

많이 좋아졌어요.
그러나 이름, 시간, 문자의 라벨이 보기 싫으니 정돈해야 한다.

StackView의 위젯 정렬

Medium StackView의 부품을 개별적으로 정비하고 싶습니다.
따라서 StackView의 Alignment를 설정합니다.
Alignment를 Fill로 설정합니다.

너무 좋아진 것 같아서요.
하지만 이렇게 되면 부품 사이가 바짝 붙어 붐빈다.여기에 공백을 설정합니다.

부품 사이에 공백 설정하기

공백을 설정하기 위해 StackView의 Spacing을 설정합니다.
다음 그림에서 보듯이 StackView에 Spacing을 설정하면 StackView 패키지의 위젯에 공백을 남길 수 있습니다.

이렇게 되니 마음이 아주 후련해졌다.
이렇게 끝내도 되지만 이 상태에서 부품을 재배치하고 싶어요.

추가 부품

칸의 밑에 답장, 전송, 파버 세 개의 단추를 놓으세요.

기존 StackView에서 부품을 새로 구성합니다.

Medium StackView는 Small StackView, text Label, Twitter ImageView를 수직으로 구성합니다.Medium StackView에서 Buton을 재구성합니다.

이제 배치된 Buton 수평 방향에서 다른 두 Buton을 계속 배치하고 싶습니다.
두 번째 Buton을 구성하기 전에 StackView를 사용하여 첫 번째 Buton을 구성합니다.
StackView의 Axis 속성을 Horizontal로 설정합니다.버튼을 수평으로 놓고 싶어서요.

여기서 만든 StackView에 나머지 두 개의 버튼을 배치합니다.

Distribution을 위의 이미지와 같이 Fill Equally로 설정합니다.이렇게 되면 세 부품의 Width가 균일하게 구성됩니다.매우 편리합니다.
완성

그나저나 화면이 가로로 회전해도 자동으로 재설계될 수 있다.도움이 많이 됐어요.

최후

마지막으로 요점을 복습해 봅시다.

StackView는 수평, 수직으로 배열된 위젯 사이를 따뜻하게 감싸는 데 사용

hidden = true 설정된 부품이 존재하지 않는 방식으로 배치

StackView의 크기는 내부 위젯의 크기(텍스트의 양과 이미지 크기)에 따라 다름

특정 부품의 크기를 조절하려는 경우 부분적으로 AutoLayout을 설정합니다.

Spacing을 통해 StackView 내의 위젯 사이의 공백을 설정합니다

StackView 배출기 검사기를 통해 다양한 패턴의 배열(너비 등)

가능

화면 회전 시 자동으로 재배치할 수 있습니다.

응용 프로그램의 소스 코드는 다음과 같다.