앨런 Swift 앱 만들기 UIKit | 주사위앱 만들기 / 화면과 오토레이아웃 설정하기

안녕하세요

오늘은 제가 강의를 보며 배웠던걸 정리하고자 합니다

 

 

 

⭐️인프런에서 앨런님의 swift 앱 만들기⭐️

를 통해서 정리하였습니다

 

정말 정말 잘 설명해주기 때문에 제가 정리해놓은것 보다 보시는걸 추천드립니다

---

 

 

우선 결과물을 보게되면

ROLL 버튼을 누르게되면

랜덤으로 주사위가 나오는 화면을 만들었습니다

 

 

우선 강의에서 제공하고 있는 이미지파일을

Assets에 넣어줍니다

 

 

1x, 2x, 3x

해상도 대응이라고 생각하시면 됩니다

 

 

요즘 휴대폰은 2x이고

큰 화면은 3x에 넣는다고 생각하시면 됩니다

 

 

 

 

동일한 이미지를 생성할 때 꿀팁

생성하고 싶은 이미지를 클릭하고

option key를 누른채로 놓고 싶은 곳에 드래그를 하게되면 똑같은 이미지가 나온답니다

그거말고도

command + D

도 가능하답니다

 

그러곤 위치를 잡아줍니다

 

 

라벨 같은 경우 라벨의 너비와 높이의 제약을 잡지 않아도

라벨의 크기에서 다 설정이 되어있기에 굳이 설정하지 않아도 됩니다

 

 

다음으로 같은 선상에 있는 이미지 뷰를 한 번에 묶어서

편하게 사용하는 방법에 대해서 설명하고자합니다

 

 

이미지를 드래그 한 후 

우측 아래에 있는 버튼을 클릭하면

Stack View를 클릭해줍니다

 

 

1차적으로

가로 세로 정 중앙 배치를 하고 스택뷰에서 각 객체마다 동일한 여백을 주기위해서

 

Distributon - Fill Equally를 클릭하고

spacing은 15로 잡아줍니다

그래도 아직 설정을 해야한다고 나오네요 ㅠㅠ

 

이유는 leading trailing 여백 때문입니다

 

 

여백을 동일하게 잡아도 오류가 아직 잡히지 않은걸 볼 수 있습니다

이유는 스택뷰 안에 있는 이미지 뷰에 관한 이미지 크기를 세팅하지 않았기 때문입니다

 

그래서 이 오류를 해결하기 위해서 이미지 크기 세팅에 관하여 알아봅시다

 

 

 

이미지 크기 세팅을 할 때 굳이 하나씩 할 필요 없이

하나의 이미지뷰를 클릭한후 Contro한채로 자신의 객체에게 드래그를 합니다

그리곤 1:1 Ratio 비율로 설정해주게되면

나머지 이미지도 동일하게 크기가 바뀌는걸 볼 수 있습니다

 

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var firstImageView: UIImageView!
    @IBOutlet weak var secondImageView: UIImageView!
    
    //#imageLiteral()
    private var diceArray: [UIImage] = [#imageLiteral(resourceName: "black1"), #imageLiteral(resourceName: "black2"), #imageLiteral(resourceName: "black3"), #imageLiteral(resourceName: "black5"), #imageLiteral(resourceName: "black6")]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


    
    @IBAction func rollButtonTapped(_ sender: UIButton) {
        
        //randomElement() : 랜덤으로 요소 하나 들고 오기
        
        //첫 번째 이미지 뷰 이미지 랜덤 변경
        firstImageView.image = diceArray.randomElement()
        //두 번째 이미지 뷰 이미지 랜덤 변경
        secondImageView.image = diceArray.randomElement()
    }
    
    
}

 

코드상 #이미지리터럴로 보이지만

엑스코드에서 넣게되면

 

이렇게 이미지를 넣을 수 있답니다

 

그리곤 이미지를 배열에 넣어주고

roolButtonTapped가 실행될 때마다

배열에 넣어뒀던 이미지 중 랜덤으로 가지고 오는 메서드를

실행하도록 설계했습니다

 

그래서 마지막으로 시뮬레이터로 본 결과

ROLL버튼을 누를때마다

좌 우 주사위의 이미지가 변경되는걸 볼 수 있습니다

 

 

만약 틀린 내용이 있다면 알려주시고

제가 정리해놓은것 보다 강의가 훨씬 자세히 알려주니 꼭 들어보세용!

 

🍎참고

앨런앱 만들기 강의 (추천)