Swift 프로젝트 FestaGram 03/ 메인(피드)화면 00

이번에는 메인화면 피드가 올라오고 제가 팔로우한 유저들을 볼 수있는 화면을 만들겁니다 그런데 

양이 너~~~~~~~무 많아서 분할로 올리고 일단은 틀만 먼저 만드는 포스팅으로 시작할게요

완성 후 사용하는 화면

 

사실상 이 화면이 가장 핵심적이라서 공부할겸 시작한게 코딩하면서 새로만들고 개조하고 갈아 엎고 난리부르스를 춘 결과라서

네이밍이라던가 굉장히 어색한 부분이 있을 수도 있지만 일단 구현은 되었고 하자가 없어서 올려봅니다.

 

회원 가입 후 처음 로그인 시 맨 처음 나타나는 화면은 이렇습니다

밑의 Bar는 UITabBar(이하 탭바) 탭바 컨트롤러를 연결되있고 탭바의 index 0번에 해당하는 뷰입니다.

팔로우라거나 포스팅을 한 기록이 없기에 가운데에 안내 UILabel이 나타나게 서비스적인 안내문구를 만들었습니다.

이 로그인/회원가입 후 이 화면으로 넘어가기 위해선 먼저 스토리보드 작업을 해야합니다.

 

스토리보드에 Tab Bar Controller를 찾아 놓으면 이렇게 나타납니다 

회색 배경이고 가운데에 Tab Bar Controller로 써있는 컨트롤러를 선택하고 오른쪽의 4번째 메뉴로 들어가면

Storyboard ID 칸에 이름을 지정해주세요 간단하고 명확하고 기능과 알맞는 이름을 지어주면 됩니다.

스토리 보드에 탭바 컨트롤러와 연결되어 있는 Item 1 뷰컨트롤러를 선택하고 위와 같이 클래스를 연결하고 storyboard ID를 지어주세요

새로운 swift파일을 만들어 import UIKit을 해주고 UIViewController를 상속하는 클래스를 만듭니다

이전에 만든 로그인 화면에서 넣은 로그인 하고 난 후 이동하는 코드입니다

 @IBAction func loginBtn(_ sender : UIButton) {
        let email = emailTextField.text ?? ""
        let password = passwordTextField.text ?? ""
        Auth
            .auth()
            .signIn(withEmail: email,
                    password: password) { [weak self] authResult, error in
                        guard let self = self else { return }
                        if let error = error {
                            print("error = \(error.localizedDescription)")
                            let alert = UIAlertController(title: "정보 불일치",
                                                          message: "이메일 혹은 비밀번호가 일치하지 않거나 존재하지 않습니다", preferredStyle: .alert)
                            let okaction = UIAlertAction(title: "확인",
                                                         style: .default)
                            alert.addAction(okaction)
                            self.present(alert,animated: true)
                        }
                        
                        if let user =  authResult?.user {
                            let uid = user.uid
                            self.activityIndicatorView.startAnimating()
                            guard let startView = self.storyboard?.instantiateViewController(withIdentifier: "tab") as? UITabBarController else { return }
                            self.navigationController?.pushViewController(startView, animated: true)
                            self.appDelegate.currentUID = uid
                            self.activityIndicatorView.stopAnimating()
                        }
        }
    }

전체 코드는 이렇고 이메일과 비밀번호가 일치하면 로그인이 승인되어 그 다음 화면으로 이동하는 코드입니다.

navigationController?.pushViewController을 보시면 맨처음 로그인 화면 제작시 embed in 하여 네비게이션 컨트롤러 연결을 하였고 그것을 통해서 tab ID를 가진 화면으로 이동하라는 명령입니다 그 위에를 보시면

guard로 탭바를 초기화하였어요. 왜냐면 tab이라는 id를 가진 뷰가 있는지 모르니까요 그래서 ID를 잘 정해주어야 컴파일 에러가 나지 않는답니다.

 

자아 이렇게 해서 로그인 양식에 맞춰 로그인에 성공하면 화면이동에 성공하실거에요 다만 아무런 내용도 없는 화면이 나타날겁니다.

왜냐면 안내문이 담긴 UILabel도 아무것도 안넣고 뷰컨트롤러만 만들고 연결만 했으니까요.

 

그리고 아래에 맨 위 화면처럼 아래 탭바가 5개가 아니라 2개만 있을겁니다. 맨처음 탭바를 스토리보드에 설치했을 때 item이라고 적힌 뷰컨트롤러는 2개였으니까요 3개를 더 만들어서 파일을 만든후 UIVIewcontroller 상속하는 클래스를 알맞게 연결해준후 tab bar controller와 연결해주면 5개의 탭바가 될겁니다

위에 처럼 tab bar controller을 누른 상태에서 viewcontroller 쪽으로 드래깅 하면 오른쪽 사진의 가운데의

view controllers라는 항목을 선택하면 탭바와 연결되 아래의 탭바를 누르고 이동할 수 있게 됩니다.

 

이제 첫 번째 화면에 안내 UILabel을 만들어 줄건데요 스토리보드가 아닌 코드로 작성해줄 겁니다.

 var firstAlertLabel : UILabel = {
      let label = UILabel()
      label.translatesAutoresizingMaskIntoConstraints = false
      label.numberOfLines = 0
      label.font = .boldSystemFont(ofSize: 20)
      label.textColor = .black
      label.text = "처음 사용이신 분들은 \n페스타 찾기 버튼을 클릭하셔서\n 페스타님들의 게시물을 구경해보세요! "
      label.textAlignment = .center
      return label
   }()

저는 이름을 첫번째 안내 레이블라는 뜻을 직역으로 지어주었습니다. 더 나은 이름이 있으면 자유롭게 지어주세요

클로져를 이용하여 설정을 넣어주고 text 안의 \n은 한줄 띄는걸 의미합니다.

UILabel을 만들었으니 넣어주어야 나타나겠지요?

참고로 translatesAutoresizingMaskIntoConstraints = false는 꼭 해주셔야합니다.  길지만 레이아웃 설정을 제어한다는 코드에요!

override func viewDidLoad() {
      super.viewDidLoad()
      view.addSubview(firstAlertLabel)
      firstAlertLabel.isHidden = false
      firstAlertLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
      firstAlertLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
   }

 

조금(?) 어려운 코드가 나타났는데요 AutoLayout을 코드로 하는 것이라고 생각하면 됩니다.

viewdidload를 만들고 

그안에 가로(x) 가운데, 세로(y)가운데에 위치를 고정시킨다는 코드입니다. 참고로 저는 한창 공부할 때 Anchor를 아쳐라고 읽었었는데

알고보니까 앵커였다는...앵커라고 하니까 메소드가 무엇을 의미하는지 알 것 같지 않으신가요? ㅎㅎ;;

view.addSubview()는 뷰에 넣는 다는 뜻이고 크기는 위에서 글씨크기/밑에 레이아웃을 준 코드로 정해집니다.

 

이제 실행시키면! 

 

 

가운데에 위치되었고 글자도 줄에 맞춰 잘 구현되었네요! 탭바 밑의 이미지는 www.falticon.com  에서 무료이미지를 가져와 넣은겁니다

 

탭바컨트롤러와 연결된 뷰컨트롤러 아래에 생긴 탭바 영역을 선택하고 오른쪽 어트리튜브 뷰의 Bar Item 항목의 image에서 아이콘 이미지를 줄 수 있습니다.

이미지 사이즈도 잘 정해줘야 하는데

https://makeappicon.com

Developer Tool - App Icon Resizer

이 사이트서 ios로 변환하여 이메일로 받는게 가능합니다. 조정된 이미지 중  40@40사이즈를 넣어주면 되요!

 

 

이번에는 말 그대로 '틀'만 짠거라고 보면 되는데 다 만들고 코드 줄수만 1000줄은 되는지라...코드를 분리시켜서 가독성 있게 만드는 것 까지 해야하기에 포스팅이 아득하게 길어질거 같지만 꾸준히 해볼게요~~~