swift 실습 - 4 : OnBoardingView

💡 work work work/swift

swift 실습 - 4 : OnBoardingView

hanwitjus 2022. 2. 21. 15:21

이런 모양의 view를 구현하는 것을 배웠다.

안에 들어가는 내용들(글, 이미지)을 하드코딩을 해서 그런지

렉도 걸리고 원활하게 안되긴 하는데 암튼 구현해야 할 것은

1. OnBoardingView

2. Page Control Bar

3. 마지막 페이지에서 확인 버튼 뜨게 만들기

(+) 확인 버튼을 누르면 메인 뷰 컨트롤러로 이동

크게 이렇게 3가지 이다.

1. OnBoardingView

먼저 OnBoardingItemViewController의 이름으로 swift파일 컨트롤러와 xib 파일을 함께 생성한다.

여기에는 화면에 보여질 온보드 화면을 구성하는 것이다.

온보드 화면의 구성은 이런식으로 될 것이다.

맨 위에 이미지뷰가 있고

그 밑에 title label, description label이 있을 것이다.

이렇게 설정해놓고 저 요소들에 의미있는 값들을 뿌려줘야 하기때문에

아웃렛으로 코드에 끌어와 필요한 소스코드를 작성한다.

class OnBoardingItemViewController: UIViewController {

    var mainText = ""
    var subText = ""
    var topImage: UIImage? = UIImage()
    
    @IBOutlet private weak var topImageView: UIImageView!
    @IBOutlet private weak var mainTitleLabel: UILabel!{
        didSet{
            mainTitleLabel.font = UIFont.systemFont(ofSize: 20, weight: .medium)
        }
    }
    
    @IBOutlet private weak var descriptionLabel: UILabel!{
        didSet{
            descriptionLabel.font = UIFont.systemFont(ofSize: 14, weight: .light)
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        mainTitleLabel.text = mainText
        descriptionLabel.text = subText
        topImageView.image = topImage
    }
}

여기서 주의할 사항은 View의 LifeCycle을 잘 기억해야 한다는 점이다.

viewDidLoad에 요소들의 내용을 뿌려주려고 하다보면 아직 View가 로드되기 전이라

아웃렛으로 가져온 요소들이 메모리에 올라가지 않은 상태일 수 있다.

그렇게 되면 값에 접근 할 수 없으니 그 점을 유의해야 할 것같다.

그리고 OnBoardingPageViewController 라는 이름의 swift 파일을 만들어서

그 안에서 레이아웃 요소들의 값을 지정해주고, Page View에서 반드시 구현해야 할

UIPageViewControllerDelegate, UIPageViewControllerDatasource 두가지를 구현한다.

(tableView에서도 그랬던 것 처럼 pageView도 꼭 저 두개는 선언해야 한다.)

func makePageVC() {
        
        let itemVC1 = OnBoardingItemViewController.init(nibName: "OnBoardingItemViewController", bundle: nil)
        
        itemVC1.mainText = "Focus on your ideal buyer"
        itemVC1.topImage = UIImage(named: "onboarding1")
        itemVC1.subText = "When you write a product description with a huge crowd of buyers in mind, your description become wishy-washy and you end up addressing no one at all."
        
        let itemVC2 = OnBoardingItemViewController.init(nibName: "OnBoardingItemViewController", bundle: nil)
        
        itemVC2.mainText = "Entice with benefits"
        itemVC2.topImage = UIImage(named: "onboarding2")
        itemVC2.subText = "When we sell a product bluh bluh something something really good cool nice man."
       
       // ... 생략
        
        setViewControllers([itemVC1], direction: .forward, animated: true, completion: nil)
        
        self.dataSource = self
    }

레이아웃 요소들에 대한 값은 그냥 이렇게 하드 코딩으로 해주고, setViewController로 뷰를 등록해준다.

2. Page Control Bar

현재 몇번째 페이지에 있는 지 등을 알려주는 인디케이터를 만드려고한다.

지금 OnBoardingPageViewController를 xib파일과 함께 생성한게 아니라 모두 다 코드로 해야한다.

var pageControl = UIPageControl()

func makePageControl(){
      self.view.addSubview(pageControl)
      pageControl.translatesAutoresizingMaskIntoConstraints = false
      pageControl.currentPageIndicatorTintColor = .black
      pageControl.pageIndicatorTintColor = .lightGray
      pageControl.numberOfPages = pages.count
      pageControl.currentPage = startIndex
        
      pageControl.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: -80).isActive = true
      pageControl.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        
      pageControl.isUserInteractionEnabled = true
        
      pageControl.addTarget(self, action: #selector(pageControlTapped), for: .valueChanged)
    }

makePageControl이라는 함수를 하나 만들어서 그 안에서 조정을 해주려고 한다.

먼저 전역변수로 UIPageControl형의 pageControl을 선언해주고

색이나, 오토레이아웃 등등을 설정해주었다.

그리고 컨트롤 부분을 눌렀을때도 페이지가 옮겨갈 수 있게 하기 위해서

pageControlTapped 라는 함수도 만들었다.

@objc func pageControlTapped(sender: UIPageControl){

     if sender.currentPage > self.currentIndex {
         self.setViewControllers([pages[sender.currentPage]], direction: .forward, animated: true, completion: nil)
        }
        else{
            self.setViewControllers([pages[sender.currentPage]], direction: .reverse, animated: true, completion: nil)
        }

위의 addTarget 메소드에서 사용할 것이기 때문에 objective-c runtime을 앞에 붙여주고, 인덱스를 잘 계산해서

direction을 forward로 할지 reverse로 할지 결정하여 넣어주면 된다.

3. 마지막 페이지의 확인 버튼

마지막 페이지에서 확인 버튼을 뜨게 만드려고 한다.

그리고 그 확인버튼은 누르면 메인뷰로 넘어간다.

func makeBottomButton(){
      let button = UIButton()
        
      button.setTitle("확인", for: .normal)
      button.setTitleColor(.black, for: .normal)
      button.backgroundColor = UIColor.systemBlue
       
      button.addTarget(self, action: #selector(dismissPageVC), for: .touchUpInside)
       
      self.view.addSubview(button)
      button.translatesAutoresizingMaskIntoConstraints = false
        
      buttonMargin = button.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: 0)
        
      button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        
      button.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
        
      button.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
        
      button.heightAnchor.constraint(equalToConstant: 50).isActive = true
      buttonMargin?.isActive = true
      hideButton()
  }

버튼도 마찬가지로 makeBottomButton이라고 함수를 만들어 코드로 만들고,

버튼을 숨겼다 나왔다 하게 해야 하므로

그 기능을 constant 값을 늘렸다 줄였다 하는 방식으로 했다.

처음에 설정해놓은 값을 기억하기 위해서 buttonMargin이라는 변수를 하나 선언해서

button의 bottomAnchor 설정 상태를 저장하게 하고

 func buttonPresentationStyle(){
        if currentIndex == pages.count - 1 {
            self.showButton()
        }else{
            self.hideButton()
        }
        UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 0.2, delay: 0, options: [.curveEaseInOut], animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
    }
    
    func showButton(){
        buttonMargin?.constant = 0
    }
    func hideButton(){
        buttonMargin?.constant = 120
    }

이렇게 각각의 조건별로 버튼을 보여주고 숨기는 코드를 적어서 각각의 타이밍에 맞게 사용하면 된다.

그리고 버튼을 눌렀을 때 메인뷰로 돌아가면서 보드 페이지가 닫히게 하기 위해서

 @objc func dismissPageVC(){
        self.dismiss(animated: true, completion: nil)
    }

이렇게 또 함수를 선언하면 된다.

마지막으로

메인 ViewController에서

override func viewDidAppear(_ animated: Bool) {
      let pageVC = OnBoardingPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: .none)
        
      if didShowOnboardingView == false {
          didShowOnboardingView = true
      pageVC.modalPresentationStyle = .fullScreen
      self.present(pageVC, animated: true, completion: nil)
      }
  }

viewDidAppear 함수를 오버라이드해서

보드 페이지를 풀스크린으로 뜨게 하게 했고,

한번 확인버튼을 누르고 메인으로 돌아가면 다시 뜨지 않게 하기 위해

flag 변수 처럼 didShowOnboardingView라고 만들어서 조건을 설정해줬다.

이렇게 하면.. 끝이다...

오늘 뭔가 좀 구찮아서 설명을 대충했다^^

LIST

저작자표시 (새창열림)