[iOS] 2주 차 미션 - Auto layout을 활용해서 클론 코딩을 해보자!

 

2주 차 미션

💡 실제 앱을 하나 정해서, 특정 화면 구성해보기

💡 버튼 터치를 통해 다른 화면 (다른 스토리보드와 ViewController)으로 화면 전환하기(Present, Navigation)

✅ 다양한 Auto Layout을 활용해보기
✅ Safe Area 지키기
✅ 모든 디바이스 크기에 대응하기

 

 

1. 스탠다드 미션

내가 정한 어플리케이션 

'런데이': 런닝이나 걷기 운동을 할 때 사용하는 어플이다. 간단하게 실습해보기 좋을 것 같아서 선택했다.

런데이 메인페이지 화면

 

---

 

 

결과물

디바이스 크기에 맞도록 auto layout을 설정해서 메인 페이지를 만들어봤다

 

 

 

---

✅ 스크롤 되는 버튼 만들기

실제로 horizontal scroll 버튼을 이렇게 만들어서 구동되는지는 모르지만, 스크롤이 되는 화면을 만드는 것을 목표로 했다.

 

스크롤되는 탭버튼

 

 

1️⃣ 스토리보드에서 ScrollView를 만든 뒤, View에 자식 요소들을 넣어서 ScrollView에 넣어준다.

초록색 배경 부분이 Scroll View이고, 버튼들이 들어가있는 View가 또 Scroll View 안에 들어있는 상태이다

 

---

2️⃣ View에 constraints 속성을 부여한다.

 

---

3️⃣ Ctrl 누른 상태에서 View 클릭 -> Scroll View의 Content Layout Guide에 드래그 앤 드랍

나같은 경우는 수평 스크롤을 구현할 것이기 때문에 Equal Heights로 설정해준다(세로폭은 고정, 가로만 스크롤 되도록 함)

 

---

4️⃣ 스크롤 하고싶은 만큼 View의 width를 늘려주고, 빨간 선은 제거해준다.

---

🔗 참고1

🔗 참고2

---

2. 챌린지 미션

화면 전환: 프로필 버튼을 누르면 마이페이지로 이동해보자!

 

1️⃣ 스토리보드 생성하기

mainViewController에 프로필 버튼을 누르면 화면 이동을 할 수 있도록 스토리보드를 만들어준다

 

---

2️⃣ 뷰컨트롤러 생성하기

cocoa touch class로 ProfileViewController를 먼저 생성해준다.

 

스토리보드에서 View Controller를 생성한 뒤 Class를 연결해준다.

Storyboard ID는 'ProfileVC'로 작성해준다.

 

        
    // 2. 뷰컨트롤러 생성
        let profileViewController = storyboard.instantiateViewController(withIdentifier: "profileVC") as! ProfileViewController

MainViewController에서 코드는 이렇게 작성해주면 된다

 

 

 

3️⃣ 화면 전환 메소드를 이용해서 화면 전환하기

    // 3. 화면 전환 메소드를 이용해서 화면 전환
        self.present(profileViewController, animated: true, completion: nil)
    }

 

여기까지 구현에 성공한 경우 결과

 

그런데... 새로운 탭화면으로 떴으면 좋겠는데???

조금 더 진행해보자

 

 

---

1️⃣ 네비게이션 컨트롤러를 추가한다.

 

2️⃣ 코드를 구현해준다

    // 3. 화면 전환 메소드를 이용해서 화면 전환
       // self.present(profileViewController, animated: true, completion: nil)
        
        self.navigationController?.pushViewController(profileViewController, animated: true)

 

 

 

---

최종 결과