iOS) ScrollView에서 최상단으로 가는 버튼

ScrollView를 사용할 때에 페이지의 내용이 많아지게 되어서 스크롤이 길어지게 되면 아이폰을 사용하는 유저들은 상태바를 터치함으로써 최상단으로 가는 방법을 사용한다. 하지만 그 방법 외에 어플 내에서 그러한 기능을 하는 버튼을 구현할 수 있다.

 

내가 사용한 방법은 이렇다.

---

STEP 1

먼저 scrollViewDidScroll에서 scrollview를 사용하기 위해 UIScrollViewDelegate를 채택해준다.

class ViewController: UIViewController,UIScrollViewDelegate {
    code
}

 

STEP 2

다음으로 ScrollView와 위로가기 버튼에 대해서 각각 Outlet변수를 생성 해준다.

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var toTopButton: UIButton!```

 

STEP 3

ScrollVeiw를 스크롤 하게 되면 offset의 x축과 y축이 그에 따라 변하게 된다. 이러한 특성을 이용하여 scrollViewDidScroll 메소드 내에서 코드를 구현한다.

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if(scrollView.contentOffset.y > (scrollView.contentSize.height - scrollView.frame.size.height) / 3){
            toTopButton.isHidden = false 
            // 버튼을 보이게 함
        }
        else{
            toTopButton.isHidden = true 
            // 그렇지 않으면 버튼 숨김
        }
    }

위 코드에서 if문을 살펴보자.

 

사용중인 ScrollView의 y축(세로축)에 스크롤을 적용중이고, 사용자가 스크롤을 함에 따라 변하는 y축의 값이 전체 스크롤 뷰의 1/3 지점을 넘어가는 순간 최상단으로 가는 toTopButton이 보여지게 된다.

x축 ScrollView에 적용할 때에도 같은 원리로 동작한다.

 

STEP 4

이제 버튼을 눌렀을 때 최상단으로 보내야한다.
버튼 클릭 시 버튼이 사라지게 하고 Offset의 좌표를 0,0으로 설정하여 최상단으로 보내도록 하자

setContentOffset?

@IBAction func ToTheTop(_ sender: Any) {
        toTopButton.isHidden = true // 버튼을 숨기고
        scrollView.setContentOffset(CGPoint(x: 0, y: 0), animated: true) // 최상단으로 이동
    }```

 

STEP 5

ScrollView가 적용된 ViewController의 viewDidLoad() 메소드 내에
사용할 ScrollView에 처음 view가 생성될 때 delegate하게 해줌으로써 마지막 단계를 마친다.

 override func viewDidLoad() {
        super.viewDidLoad()
        toTopButton.isHidden = true 
        // 스크롤 뷰가 처음 나올 때 버튼은 없어야 함
        scrollView.delegate = self 
        // 사용할 scrollview에 처음 view가 생성되어 진입할 때
        // delegate 함
    }

 

COMPLETE

Scroll to Top Simulation