iOS Swift Parallax scrolling (패럴랙스 스크롤링)

안녕하세요 Gons 입니다.

오늘은 페럴렉스 스크롤을 한번 해보겠습니다.

Parallax scrolling

패럴렉스? 페럴랙스? 용어가 맞는지 모르겠습니다.

스크롤뷰 드래그 하는 만큼 다른뷰를 움직이게 하는 기능입니다.

구글에 Swift Parallax scroll 을 검색했는데 한국말 자료가 없어서 제가 만들어보겠습니다.

 

 

 

 

 

 

먼저 탭바로 쓰일 뷰를 하나 추가해주세요.

높이는 100을 줬고

좌, 우, 하단을 0으로 컨스트레인트 줍니다.

그리고 하단 컨스트레인트를 아울렛 변수로 연결해줍니다.

 

 

 

 

 

 

 

 

 

 

자유롭게 내용물들을 추가해주세요.

저는 테이블뷰를 하나 추가하고 탭바 위로 상,하,좌,우 전부 0으로 맞췄습니다.

 

 

 

 

 

 

 

@IBOutlet var myTableView: UITableView!

테이블뷰도 아울렛 변수로 연결해주시고요.

 

 

 

 

 

 

 

 

테이블뷰 셀과 탭바 안에 레이블도 하나 넣었습니다.

이제 스토리보드는 끝입니다. 코드를 적을게요.

 

 

 

 

 

 

 

스크롤뷰를 감지해야하기 때문에 델리게이트를 설정해주세요.

    override func viewDidLoad() {
        super.viewDidLoad()
        
        myTableView.delegate = self
        myTableView.dataSource = self
    }

 

 

 

 

 

 

 

자 이렇게 간단하게 테이블뷰 만들고요.

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = "테이블뷰 셀 \(indexPath.row)"
        return cell
    }
    
}

 

 

 

 

 

 

 

 

스크롤뷰를 스크롤할 때 발생하는 scrollViewDidScroll 함수를 사용하면 됩니다.

//스크롤뷰 스크롤할 때
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    
    //스크롤뷰 컨텐츠 y위치가 맨 위가 아닌 경우
    if scrollView.contentOffset.y > 0 {
        
        //스크롤이 옮겨진 정도가 100 미만이라면
        if scrollView.contentOffset.y < 100 {
            //컨텐츠 y 위치만큼 탭바의 바텀 제약조건을 조정해준다.
            bottomConstraint.constant = -scrollView.contentOffset.y
        } else { //스크롤 옮겨진 정도가 100 이상이라면
            //탭바의 바텀 제약조건을 -100으로 고정해줍니다.
            if bottomConstraint.constant != -100 {
                bottomConstraint.constant = -100
            }
        }
        
    } else { //맨 위로 바운스 되는 경우 또는 맨위 일 때
        //탭바의 바텀 제약조건을 0으로 고정해줍니다.
        if bottomConstraint.constant != 0 {
            bottomConstraint.constant = 0
        }
    }
    
}

 

헷갈릴 수 있어서 주석을 달아놨습니다.

끝입니다.

이제 실행해볼게요.

 

 

 

 

 

패럴랙스 스크롤링

아주 잘 되네요.

 

같은 방식으로 컬렉션뷰나 웹뷰에도 적용할 수 있습니다.

스크롤뷰를 상속받고 있는 클래스는 다 됩니다.

 

웹뷰만 한번 해보겠습니다.

 

 

 

 

이번엔 상단에 만들어보겠습니다.

Top 제약 조건을 아울렛 변수로 연결해주시고요.

 

 

 

 

웹뷰도 아울렛 변수로 연결해주세요.

@IBOutlet var myWebView: WKWebView!

 

 

 

 

 

 

웹뷰 안에 있는 스크롤뷰를 감지할 것이기 때문에 델리게이트 지정해주시고요.

    override func viewDidLoad() {
        super.viewDidLoad()
        
        myWebView.scrollView.delegate = self
        
        if let url = URL(string: "https://www.naver.com/") {
            
            let request = URLRequest(url: url)
            myWebView.load(request)
        }
        
    }

간단하게 네이버를 로드해보겠습니다.

 

 

 

 

같은방식으로 scrollViewDidScroll 함수를 이용합니다.

extension ViewController2: UIScrollViewDelegate {
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {

        if scrollView.contentOffset.y > 0 {
            
            if scrollView.contentOffset.y < 100 {
                topConstraint.constant = -scrollView.contentOffset.y
            } else {
                topConstraint.constant = -100
            }
            
        } else {
            topConstraint.constant = 0
        }

    }
}

위에 적은 것과 똑같습니다.

실행해보겠습니다.

 

 

 

 

 

Parallax scrolling

잘 되네요.

끝입니다.

 

 

 

 

 

저는 다음에 더 유익한 내용으로 글을 쓰겠습니다.

감사합니다.