Task 7) PhoneBook TroubleShooting ☄️

난 내가 널 잘 안다고 생각했어 . . . .

• 구현해야하는 화면

---

• 구현된 화면

ㅠ_ㅠ. . . .
나랑 지금 뭐하자는 앱이죠 , , , ?

랜덤 이미지 생성기인가요?

괜찮아 . . . .
랜덤 이미지 버튼이 뭐 그리 큰지는 모르겠다만

코드를 보겠습니다?

이번엔 처음(은 아니지만..) SnapKit을 사용해보았습니다!
이전에도 써보긴 했는데.. 그땐 그냥 하라는대로만 해서 제대로 모르고 사용했다..

• 현재 코드

private func configureConstraints() {
        addSubview(stackView)

        stackView.snp.makeConstraints { make in
		make.top.equalTo(self.safeAreaLayoutGuide.snp.top)
		make.bottom.equalTo(self.safeAreaLayoutGuide.snp.bottom)
		make.leading.equalTo(self.safeAreaLayoutGuide.snp.leading)
		make.trailing.equalTo(self.safeAreaLayoutGuide.snp.trailing)
	}

	profileImageView.snp.makeConstraints { make in
		make.height.equalTo(100)
	}

	nameTextView.snp.makeConstraints { make in
		make.height.equalTo(40)
	}
        
	numberTextView.snp.makeConstraints { make in
		make.height.equalTo(40)
	}
}

앗차차차차! 랜덤 버튼에 크기 속성을 주지 않았군요 . . . .
아래 코드를 추가해줍니다

randomImageButton.snp.makeConstraints { make in
	make.height.equalTo(30)
}

이거 아니잔아 . . . . . . .

문제점

stackView.alignment = .center
stackView.distribution = .fill

위와 같이 StackView를 설정했음에도 불구하고, 배치가 제대로 되지 않았던 이유는 애초에 StackView의 크기가 잘못 지정되어 있었기 때문이다!

이와 더불어 프로필 이미지 사진과 나머지 컴포넌트의 크기 값이 제대로 설정되어있지 않아서 대왕 큰 스택뷰와 그 속의 컴포넌트들의 자동 크기 설정 파티였음..

아래와 같이 profileImageSize를 통해 프로필 사진의 크기를 설정해주고, radius를 설정해서 동그라미로 만들어주면 완성!

private func configureConstraints() {
    let profileImageSize: CGFloat = 120
    
    addSubview(stackView)
    
    stackView.snp.makeConstraints { make in
        make.top.equalTo(self.safeAreaLayoutGuide.snp.top)
        make.leading.equalTo(self.safeAreaLayoutGuide.snp.leading)
        make.trailing.equalTo(self.safeAreaLayoutGuide.snp.trailing)
    }
    
    profileImageView.snp.makeConstraints { make in
        make.centerX.equalToSuperview()
        make.top.equalTo(self.safeAreaLayoutGuide.snp.top).offset(20)
        make.width.equalTo(profileImageSize)
        make.height.equalTo(profileImageView.snp.width) 
    }
    
    profileImageView.layer.cornerRadius = profileImageSize/2
    profileImageView.layer.masksToBounds = true
    
    randomImageButton.snp.makeConstraints { make in
        make.height.equalTo(30)
    }
    
    nameTextView.snp.makeConstraints { make in
        make.height.equalTo(40)
        make.leading.trailing.equalToSuperview().inset(30)
    }
    
    numberTextView.snp.makeConstraints { make in
        make.height.equalTo(40)
        make.leading.trailing.equalToSuperview().inset(30)
    }
}