꾸준히 안타치기

SideBar / 계정관리 눌러 -> 새창 프로필화면으로 전환 본문

iOS/기본편 | 실전편 -꼼꼼한재은씨

SideBar / 계정관리 눌러 -> 새창 프로필화면으로 전환

글자줍기 2022. 2. 17. 11:34
반응형

계정관리 눌러서 새창띄우기

ProfileVC.swift파일 생성

import UIKit
class ProfileVC: UIViewController {

메인스토리보드에 프로필화면을 처리할 네비게이션 컨트롤러와 뷰컨트롤러를 추가한다. 추가한 뷰 컨트롤러의 Class속성을 ProfileVC로 설정한다.

코드로 처리할것이므로 세그웨이로 연결하지 않아도됨

프론트 컨트롤러 앞에 위치한 네비게이션 컨트롤러를 선택하고, StoryboardID 속성값을 "_Profile"로 입력한다.

어트리뷰터 인스펙터 탭에서 네비게이션 컨트롤러의 HideBar 속성 중 다음 항목에 체크한다.

사용자가 화면을 탭하거나 키보드가 등장했을 때와 같은 특정상황에서 네비게이션바를 숨겨주는 역할을 한다.

ProfileVC에 테이블뷰 구현을 위해 필요한 프로토콜을 선언한다.

UIImageView, UITableView 객체를 프로퍼티로 선언한다.

import UIKit

// 테이블뷰가 사용되긴 했지만, 테이블뷰컨트롤러는 아니다. 따라서 테이블뷰를 위한 프로토콜을 직접추가해주어야
// 원하는 테이블 뷰를 구현할수 있다.UITableViewDelegate, UITableViewDataSource 추가
class ProfileVC: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    let profileImage = UIImageView() //프로필사진이미지
    let tv = UITableView() //프로필목록

UITableViewDataSource 프로토콜의 필수 메소드를 구현합니다.

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // 여기에 셀구현 내용
        return cell
    }

네비게이션 바에 타이틀과 닫기 버튼을 추가합니다.

    override func viewDidLoad() {
        self.navigationItem.title = "프로필"

        //뒤로가기 버튼 처리
        let backBtn = UIBarButtonItem(title: "닫기", style: .plain, target: 
        self, action: #selector(close(_:)))
        self.navigationItem.leftBarButtonItem = backBtn
        }
 // 프레젠트메소드방식으로 처리될예정이므로, 닫을때에도 dismiss 메소드를 사용한다.
    @objc func close(_ sender: Any){
        self.presentingViewController?.dismiss(animated: true)
    }

 SideBarVC클래스에서 계정관리 메뉴를 클릭했을 때 화면전환 코드가 실행되도록 코드를 추가한다.

******부분 테이블 행을 눌렀을때 코드 하단.

전체화면으로 전환되더라도 사이드 바는 닫아주어야한다. 따라서 revealToggle()메소드를 호출해 주어야한다.

iOS 13부터 modalPresentationStyle의 기본값이 automatic으로 바뀌었다. 따라서 해당속성을 설정하지 않고 화면을 전환 처리하면 레이어링 디자인이 적용되어, 원래의 뷰 컨트롤러가 뒤쪽에 남아있게 된다. 이를 피하고 원래대로 전체 화면으로 전환하기 위해서는 프레젠트 메소드를 호출하기 전에 뷰 컨트롤러의 modalPresentationStyle값을 fullScreen으로 변경해주어야한다. (635P)

프레젠트메소드를 이용하여 화면을 전환한다. 프로필화면의 특성상 굳이 프론트영역에 열릴 필요가 없기 때문이다.

 // 행이 선택됬을때 메소드
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        if indexPath.row == 0 { // 선택된 행이 새글 작성 메뉴일때
            // MemoForm값을 식별자로하는 뷰 컨트롤러 인스턴스를 스토리보드 객체로부터 가져온다.
            let uv = self.storyboard?.instantiateViewController(withIdentifier: "MemoForm")
            
            let target = self.revealViewController().frontViewController as! UINavigationController
            target.pushViewController(uv!, animated: true)
            //revealViewController() 메소드를 통해 메인컨트로러의 참조정보를 읽어온다음, 이를 통해 호출한다.
            self.revealViewController().revealToggle(self)
            
        }else if indexPath.row == 5 { //계정관리 선택 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            let uv = self.storyboard?.instantiateViewController(withIdentifier: "_Profile")
            uv?.modalPresentationStyle = .fullScreen
            self.present(uv!, animated: true){
                self.revealViewController().revealToggle(self)
            }
        }
    }

SideBarVC 전체코드

import UIKit

class SideBarVC: UITableViewController {
    
    let nameLabel = UILabel()// 이름레이블
    let emailLabel = UILabel() //이메일 레이블
    let profileImage = UIImageView() //프로필이미지
    
    
    //목록 데이터 배열
    let titles = ["새글 작성하기","친구 새글","달력으로보기", "공지사항", "통계", "계정관리"]
    
    //아이콘 데이터 배열
    let icons = [
        UIImage(named: "icon01.png"),
        UIImage(named: "icon02.png"),
        UIImage(named: "icon03.png"),
        UIImage(named: "icon04.png"),
        UIImage(named: "icon05.png"),
        UIImage(named: "icon06.png")
    ]
    
    override func viewDidLoad() {
        //테이블 뷰의 헤더 역할을 할 뷰를 정의한다.
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width,
                                              height: 70))
        headerView.backgroundColor = .brown
        
        //테이블 뷰의 헤더 뷰로 지정한다.
        self.tableView.tableHeaderView = headerView
        
        //이름 레이블의 속성을 정의하고, 헤더 뷰에 추가한다.
        self.nameLabel.frame = CGRect(x: 70, y: 15, width: 100, height: 30)
        self.nameLabel.text = "해리포터"
        self.nameLabel.textColor = .white
        self.nameLabel.font = UIFont.boldSystemFont(ofSize: 15)
        self.emailLabel.backgroundColor = .clear
        headerView.addSubview(self.nameLabel)//헤더뷰에 추가
        
        //이메일 레이블의 속성을 정의하고, 헤더 뷰에 추가한다.
        self.emailLabel.frame = CGRect(x: 70, y: 30, width: 100, height: 30)
        self.emailLabel.text = "abc@gmail.com"
        self.emailLabel.textColor = .white
        self.emailLabel.font = UIFont.boldSystemFont(ofSize: 11)
        self.emailLabel.backgroundColor = .clear
        headerView.addSubview(self.emailLabel)//헤더뷰에 추가
        
        //기본이미지를 구현한다.
        let defaultProfile = UIImage(named: "account.jpg")
        self.profileImage.image = defaultProfile
        self.profileImage.frame = CGRect(x: 10, y: 10, width: 50, height: 50)
        view.addSubview(self.profileImage)
        // 이미지 둥글게 만들기
        self.profileImage.layer.cornerRadius = (self.profileImage.frame.width / 2)
        self.profileImage.layer.borderWidth = 0
        self.profileImage.layer.masksToBounds = true //마스크효과
        view.addSubview(self.profileImage)//헤더뷰에 추가
    }
    
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.titles.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 재사용 큐에서 테이블 셀을 꺼내 온다. 없으면 새로 생성한다.
        let id = "menucell"
        let cell = tableView.dequeueReusableCell(withIdentifier: id) ??
        UITableViewCell(style: .default, reuseIdentifier: id)
        
        //타이틀과 이미지를 대입한다.
        cell.textLabel?.text = self.titles[indexPath.row]
        cell.imageView?.image = self.icons[indexPath.row]
        
        //폰트설정
        cell.textLabel?.font = UIFont.systemFont(ofSize: 14)
        return cell
    }
    
    // 행이 선택됬을때 메소드
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        if indexPath.row == 0 { // 선택된 행이 새글 작성 메뉴일때
            // MemoForm값을 식별자로하는 뷰 컨트롤러 인스턴스를 스토리보드 객체로부터 가져온다.
            let uv = self.storyboard?.instantiateViewController(withIdentifier: "MemoForm")
            
            let target = self.revealViewController().frontViewController as! UINavigationController
            target.pushViewController(uv!, animated: true)
            //revealViewController() 메소드를 통해 메인컨트로러의 참조정보를 읽어온다음, 이를 통해 호출한다.
            self.revealViewController().revealToggle(self)
            
        }else if indexPath.row == 5 { //계정관리 선택 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            let uv = self.storyboard?.instantiateViewController(withIdentifier: "_Profile")
            uv?.modalPresentationStyle = .fullScreen
            self.present(uv!, animated: true){
                self.revealViewController().revealToggle(self)
            }
        }
    }
}

개인프로필 영역 구현

import UIKit

// 테이블뷰가 사용되긴 했지만, 테이블뷰컨트롤러는 아니다. 따라서 테이블뷰를 위한 프로토콜을 직접추가해주어야
// 원하는 테이블 뷰를 구현할수 있다.UITableViewDelegate, UITableViewDataSource 추가
class ProfileVC: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    let profileImage = UIImageView() //프로필사진이미지
    let tv = UITableView() //프로필목록
    
    
    override func viewDidLoad() {
        self.navigationItem.title = "프로필"

        //뒤로가기 버튼 처리
        let backBtn = UIBarButtonItem(title: "닫기", style: .plain, target: self, action: #selector(close(_:)))
        self.navigationItem.leftBarButtonItem = backBtn
        
        //배경이미지 설정
        let bg = UIImage(named: "profile-bg")
        let bgImg = UIImageView(image: bg)
        bgImg.frame.size = CGSize(width: bgImg.frame.size.width, height: bgImg.frame.size.height)
        bgImg.center = CGPoint(x: self.view.frame.width / 2, y: 40)
        
        bgImg.layer.cornerRadius = bgImg.frame.size.width / 2
        bgImg.layer.borderWidth = 0
        bgImg.layer.masksToBounds = true
        self.view.addSubview(bgImg)
        //프로필 이미지와 테이블뷰 객체를 뷰 계층의 맨앞으로 가져오는 구문
//        self.view.bringSubviewToFront(self.tv)
//        self.view.bringSubviewToFront(self.profileImage)
        // 네비게이션바 숨김처리
        // 네비게이션바가 처음부터 표시되지 않도록 속성을 true로 설정한다.
        self.navigationController?.navigationBar.isHidden = true
        
        
        //1.프로필 사진에 들어갈 기본이미지
        let image = UIImage(named: "account.jpg")
        // 2.프로필 이미지 처리
        self.profileImage.image = image
        self.profileImage.frame.size = CGSize(width: 100, height: 100)
        // 이미지 중앙정렬
        self.profileImage.center = CGPoint(x:self.view.frame.width / 2, y: 270)
        // 3.이미지둥글게
        self.profileImage.layer.cornerRadius = self.profileImage.frame.width / 2
        self.profileImage.layer.borderWidth = 0
        self.profileImage.layer.masksToBounds = true
        // 4.루트뷰에 추가
        self.view.addSubview(self.profileImage)

테이블뷰 프로퍼티의 기본 속성을 설정

  //테이블뷰의 기본 프로퍼티의 기본 속성을 설정합니다.
        self.tv.frame = CGRect(x: 0, y: self.profileImage.frame.origin.y + self.profileImage.frame.size.height + 20, width: self.view.frame.width, height:100)
        self.tv.dataSource = self
        self.tv.delegate = self
        
        self.view.addSubview(self.tv)
        
    }

프로그래밍 방식에서는 테이블뷰를 다루는 기본적인 방식인 UITableViewDataSource 프로토콜과 그 메소드를 이용하여 목록을 구성해야한다. 그러나 사용해야할 데이터 자체가 동적으로 늘어나는것이 아니므로 굳이 배열형식의 데이터 소스를 정의하여 사용할 필요가 없습니다. 위와 같이 각 행 번호별로 셀 형태를 직접 정의해 주는 것으로도 충분하다.

.value1 은 테이블 셀스타일중 1개 

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> 
    UITableViewCell {
        
        // 여기에 셀구현 내용
        let cell = UITableViewCell(style: .value1, reuseIdentifier: "cell")
        
        cell.textLabel?.font = UIFont.systemFont(ofSize: 14)
        cell.detailTextLabel?.font = UIFont.systemFont(ofSize: 13)
        cell.accessoryType = .disclosureIndicator
        
        switch indexPath.row {
        case 0:
            cell.textLabel?.text = "이름"
            cell.detailTextLabel?.text = "해리포터씨"
        case 1:
            cell.textLabel?.text = "계정"
            cell.detailTextLabel?.text = "abc@gmail.com"
        default:
            ()
        }
        return cell
    }
    
    // 프레젠트메소드방식으로 처리될예정이므로, 닫을때에도 dismiss 메소드를 사용한다.
    @objc func close(_ sender: Any){
        self.presentingViewController?.dismiss(animated: true)
    }
}

SideBarVC 전체코드

import UIKit

class SideBarVC: UITableViewController {
    
    let nameLabel = UILabel()// 이름레이블
    let emailLabel = UILabel() //이메일 레이블
    let profileImage = UIImageView() //프로필이미지
    
    
    //목록 데이터 배열
    let titles = ["새글 작성하기","친구 새글","달력으로보기", "공지사항", "통계", "계정관리"]
    
    //아이콘 데이터 배열
    let icons = [
        UIImage(named: "icon01.png"),
        UIImage(named: "icon02.png"),
        UIImage(named: "icon03.png"),
        UIImage(named: "icon04.png"),
        UIImage(named: "icon05.png"),
        UIImage(named: "icon06.png")
    ]
    
    override func viewDidLoad() {
        //테이블 뷰의 헤더 역할을 할 뷰를 정의한다.
        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width,
                                              height: 70))
        headerView.backgroundColor = .brown
        
        //테이블 뷰의 헤더 뷰로 지정한다.
        self.tableView.tableHeaderView = headerView
        
        //이름 레이블의 속성을 정의하고, 헤더 뷰에 추가한다.
        self.nameLabel.frame = CGRect(x: 70, y: 15, width: 100, height: 30)
        self.nameLabel.text = "해리포터"
        self.nameLabel.textColor = .white
        self.nameLabel.font = UIFont.boldSystemFont(ofSize: 15)
        self.emailLabel.backgroundColor = .clear
        headerView.addSubview(self.nameLabel)//헤더뷰에 추가
        
        //이메일 레이블의 속성을 정의하고, 헤더 뷰에 추가한다.
        self.emailLabel.frame = CGRect(x: 70, y: 30, width: 100, height: 30)
        self.emailLabel.text = "abc@gmail.com"
        self.emailLabel.textColor = .white
        self.emailLabel.font = UIFont.boldSystemFont(ofSize: 11)
        self.emailLabel.backgroundColor = .clear
        headerView.addSubview(self.emailLabel)//헤더뷰에 추가
        
        //기본이미지를 구현한다.
        let defaultProfile = UIImage(named: "account.jpg")
        self.profileImage.image = defaultProfile
        self.profileImage.frame = CGRect(x: 10, y: 10, width: 50, height: 50)
        view.addSubview(self.profileImage)
        // 이미지 둥글게 만들기
        self.profileImage.layer.cornerRadius = (self.profileImage.frame.width / 2)
        self.profileImage.layer.borderWidth = 0
        self.profileImage.layer.masksToBounds = true //마스크효과
        view.addSubview(self.profileImage)//헤더뷰에 추가
    }
    
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.titles.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 재사용 큐에서 테이블 셀을 꺼내 온다. 없으면 새로 생성한다.
        let id = "menucell"
        let cell = tableView.dequeueReusableCell(withIdentifier: id) ??
        UITableViewCell(style: .default, reuseIdentifier: id)
        
        //타이틀과 이미지를 대입한다.
        cell.textLabel?.text = self.titles[indexPath.row]
        cell.imageView?.image = self.icons[indexPath.row]
        
        //폰트설정
        cell.textLabel?.font = UIFont.systemFont(ofSize: 14)
        return cell
    }
    
    // 행이 선택됬을때 메소드
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        if indexPath.row == 0 { // 선택된 행이 새글 작성 메뉴일때
            // MemoForm값을 식별자로하는 뷰 컨트롤러 인스턴스를 스토리보드 객체로부터 가져온다.
            let uv = self.storyboard?.instantiateViewController(withIdentifier: "MemoForm")
            
            let target = self.revealViewController().frontViewController as! UINavigationController
            target.pushViewController(uv!, animated: true)
            //revealViewController() 메소드를 통해 메인컨트로러의 참조정보를 읽어온다음, 이를 통해 호출한다.
            self.revealViewController().revealToggle(self)
            
        }else if indexPath.row == 5 { //계정관리 선택 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
            let uv = self.storyboard?.instantiateViewController(withIdentifier: "_Profile")
            uv?.modalPresentationStyle = .fullScreen
            self.present(uv!, animated: true){
                self.revealViewController().revealToggle(self)
            }
        }
    }
}

ProfileVC 전체코드

//
//  ProfileVC.swift
//  TextMemory
//
//  Created by 이청준 on 2022/02/17.
//

import UIKit

// 테이블뷰가 사용되긴 했지만, 테이블뷰컨트롤러는 아니다. 따라서 테이블뷰를 위한 프로토콜을 직접추가해주어야
// 원하는 테이블 뷰를 구현할수 있다.UITableViewDelegate, UITableViewDataSource 추가
class ProfileVC: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    let profileImage = UIImageView() //프로필사진이미지
    let tv = UITableView() //프로필목록
    
    
    override func viewDidLoad() {
        self.navigationItem.title = "프로필"

        //뒤로가기 버튼 처리
        let backBtn = UIBarButtonItem(title: "닫기", style: .plain, target: self, action: #selector(close(_:)))
        self.navigationItem.leftBarButtonItem = backBtn
        
        //배경이미지 설정
        let bg = UIImage(named: "profile-bg")
        let bgImg = UIImageView(image: bg)
        bgImg.frame.size = CGSize(width: bgImg.frame.size.width, height: bgImg.frame.size.height)
        bgImg.center = CGPoint(x: self.view.frame.width / 2, y: 40)
        
        bgImg.layer.cornerRadius = bgImg.frame.size.width / 2
        bgImg.layer.borderWidth = 0
        bgImg.layer.masksToBounds = true
        self.view.addSubview(bgImg)
        //프로필 이미지와 테이블뷰 객체를 뷰 계층의 맨앞으로 가져오는 구문
//        self.view.bringSubviewToFront(self.tv)
//        self.view.bringSubviewToFront(self.profileImage)
        // 네비게이션바 숨김처리
        self.navigationController?.navigationBar.isHidden = true
        
        
        //1.프로필 사진에 들어갈 기본이미지
        let image = UIImage(named: "account.jpg")
        // 2.프로필 이미지 처리
        self.profileImage.image = image
        self.profileImage.frame.size = CGSize(width: 100, height: 100)
        // 이미지 중앙정렬
        self.profileImage.center = CGPoint(x:self.view.frame.width / 2, y: 270)
        // 3.이미지둥글게
        self.profileImage.layer.cornerRadius = self.profileImage.frame.width / 2
        self.profileImage.layer.borderWidth = 0
        self.profileImage.layer.masksToBounds = true
        // 4.루트뷰에 추가
        self.view.addSubview(self.profileImage)
        
        //테이블뷰의 기본 프로퍼티의 기본 속성을 설정합니다.
        self.tv.frame = CGRect(x: 0, y: self.profileImage.frame.origin.y + self.profileImage.frame.size.height + 20, width: self.view.frame.width, height:100)
        self.tv.dataSource = self
        self.tv.delegate = self
        
        self.view.addSubview(self.tv)
        
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // 여기에 셀구현 내용
        let cell = UITableViewCell(style: .value1, reuseIdentifier: "cell")
        
        cell.textLabel?.font = UIFont.systemFont(ofSize: 14)
        cell.detailTextLabel?.font = UIFont.systemFont(ofSize: 13)
        cell.accessoryType = .disclosureIndicator
        
        switch indexPath.row {
        case 0:
            cell.textLabel?.text = "이름"
            cell.detailTextLabel?.text = "해리포터씨"
        case 1:
            cell.textLabel?.text = "계정"
            cell.detailTextLabel?.text = "abc@gmail.com"
        default:
            ()
        }
        return cell
    }
    
    // 프레젠트메소드방식으로 처리될예정이므로, 닫을때에도 dismiss 메소드를 사용한다.
    @objc func close(_ sender: Any){
        self.presentingViewController?.dismiss(animated: true)
    }
    
    
}

 

반응형

'iOS > 기본편 | 실전편 -꼼꼼한재은씨' 카테고리의 다른 글

② 프로필 화면 / 프사눌러 이미지 변경하기  (0) 2022.02.18
①프로필화면 /사용자정보관리객체생성/로그인/ 로그아웃 정보 저장하기  (0) 2022.02.18
SideBar / 새글작성 눌러 -> 프론트뷰로 화면전환  (0) 2022.02.16
SideBar / 라이브러리 사용X  (0) 2022.02.15
② Picker View - customPlist / 커스텀  (0) 2022.02.12
'iOS/기본편 | 실전편 -꼼꼼한재은씨' Related Articles more
Comments