"StackView로 만드는 iOS 앱 UI: NineNine 미니게임 레이아웃 구성, progressview 크기 조절

2023.08.25 - [swift] - StackView를 통한 iOS 스토리보드 레이아웃

StackView를 통한 iOS 스토리보드 레이아웃

지난번 포스트에서는 stackView를 통한 이점을 알아보았습니다. 

 

오늘은 Appstore NineNine 미니게임의 더하게 게임의 레이아웃을 구현해보겠습니다 ! 

 

우선 뷰의 레이아웃을 크게 3등분으로 나눠보겠습니다. 

 

 

1. 시간 ~ 스코어보드 

2. 문제, 답안 입력란 

3. 번호판 입력칸 

 

1. 시간 ~ 스코어보드 

우선 스택뷰 3개를 fill Equally 로 설정해주어 전체 3등분을 합니다.

 

 

1번 뷰를 fill Equally 로 설정해주고 똑같이 2개로 나누어 주면 , tiem, 과 score 를 나타내기에 적절한 비율이 나오는데요, 이때 center 좌우로 가운데로 맞춰주면 다음과 같은 뷰를 구성할 수 있습니다. 여기서 progreeView가 높이가 너무 낮을걸 볼 수 있는데, 이는 코드에서 직접 수정하도록 하겠습니다. 

private func setupTimeBar() {
        
        // timeBar 디자인 설정
        timeBar.clipsToBounds = true
        timeBar.layer.cornerRadius = 10
        
        // 타임라벨 설정
        timeLabel.translatesAutoresizingMaskIntoConstraints = false
        controller.view.addSubview(timeLabel)
        NSLayoutConstraint.activate([
                    timeLabel.centerXAnchor.constraint(equalTo: timeBar.centerXAnchor),
                    timeLabel.centerYAnchor.constraint(equalTo: timeBar.centerYAnchor)
                ])
    }

시간이 얼마나 남았는지 보여주는 timeLabel은 timebar의 가운데에 맞춰주고 timeBar 디자인을 통해서 높이를 더 키울 수 있습니다. 

ScoreView에서도 scoreLabel 을 추가해주어 다음과 같이 점수판을 나타낼 수 있습니다. 

 

2. 문제, 정답판 구성하기 

비교적 간단한 레이아웃 입니다. 

1번 problemView는 horizontal 로 정렬을 해주고 마찬가지로 Fill Equally 로 설정해주세요. 

그리고 라벨을 하나씩 넣어주세요. 다만 이때 숫자의 공간을 가깝게 하려면 왼쪽은 라벨은 오른쪽 정렬, 오른쪽 라벨은 왼쪽 정렬 해주세요

 

 

3. 점수 번호판 

미리 등록한 이미지 배경화면으로 띄워주고 다음 뷰를 구성합니다. 

스택뷰 하나에 세로 스택뷰를 넣으면 다음과 같이 버튼이 정렬 된 것을 볼 수 있습니다. 

 

다음 포스트에서는 viewcontroller 와 연결하여 더하게 게임 연산 구현에 대해서 알아보겠습니다 !