Ios AutoLayout 3 - UIStackViews와 pageController

Ios AutoLayout 3 - UIStackViews와 pageController

● 들어가기 전

이번 포스팅에서는 맨아래 부분에 네비게이션 바를 구현해보자. 왼쪽 버튼 하나, 오른쪽 버튼 하나 그리고 가운데에는 pageController객체를 이용해서 페이지의 위치를 표현해줄것이다. 즉, 총 3개의 객체필요한데 이 객체를 UIStackViews를 이용해서 위치를 시켜 줄것이다.

● 실습순서

1.버튼 객체 만들기

2.페이지 컨트롤 객체 만들기

3.버튼, 페이지 컨트롤 객체 오토레이아웃 지정해주기

4. stackview를 이용해서 레아이웃설정해주기

● 버튼객체와 페이지 컨트롤 객체 만들기

viewdidLoad() 함수위에 버튼객체와 pageController 객체를 만들어준다.

    //버튼 객체와 속성을 만들어준다.
    private let previousButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("이전", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
        button.setTitleColor(.gray, for: .normal)
        return button
    }()
    
    private let nextButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("다음", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
        button.setTitleColor(.mainPink, for: .normal)
        return button
    }()
    
    //페이지 컨트롤 객체 만들어준다.
    private let pageControl: UIPageControl = {
        let pc = UIPageControl()
//현재페이지
        pc.currentPage = 0
//총 페이지 수
        pc.numberOfPages = 4
//        let pinkColor = UIColor(red: 232/255, green: 68/255, blue: 133/255, alpha: 1)
        pc.currentPageIndicatorTintColor = .mainPink
        pc.pageIndicatorTintColor = UIColor(red: 249/255, green: 207/255, blue: 224/255, alpha: 1)
        return pc
    }()

그리고 제일 위쪽 class 위에 uicolor를 확장해서 여러 객체들이 접근해서 사용할 수 있게 해준다.

extension UIColor {
    static var mainPink = UIColor(red: 232/255, green: 68/255, blue: 133/255, alpha: 1)
}

● viewdidLoad() 함수에서 위에서 만든 객체 위치 정해주는 함수 호출

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(descriptionTextView)
        //위에서 만든 객체 위치 지정
        setupBottomControls()
        
        setupLayout()
    }
    

● view객체들의 위치 정해주고 UIStackViews를 이용해서 정렬

    //스택뷰 객세 생성과 위치 설정 함수
    fileprivate func setupBottomControls() {
 
        //uistackview 객체 만들기 배열 타입으로 view 객체들이 들어간다
        let bottomControlsStackView = UIStackView(arrangedSubviews: [previousButton, pageControl, nextButton])
        //오토레이아웃 설정 허용해주기
        bottomControlsStackView.translatesAutoresizingMaskIntoConstraints = false
        //객체들이 하나하나 보이게 설정
        bottomControlsStackView.distribution = .fillEqually
        //bottomControlsStackView.axis = .vertical
        
        //전체 뷰에 위에서 만든 stackView를 넣어준다.
        view.addSubview(bottomControlsStackView)
        
        //스택뷰 위치 지정해주기
        NSLayoutConstraint.activate([
            bottomControlsStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            bottomControlsStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            bottomControlsStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            bottomControlsStackView.heightAnchor.constraint(equalToConstant: 50)
            ])
    }

● 실행

● 마무리

이번 포스팅에서는  UIStackViews와 pageController을 이용해서 네비게이션 바(?)를 표현해보았다. UIStackViews는 배열 타입으로 view객체를 담을 수 있고, 속성값으로 세로 방향으로 정렬, 가로방향으로 정렬할 수 있다. 그리고 pageController 객체를 이용해서 현재 페이지에 대한 위치를 보여 줄 수 있다는 것을 알아 보았다.

● 소스코드