7주차_2일차_앱 개발 숙련_ScrollView & Pull to Refresh_TIL

---

---

<TIL>

어제는 위시 리스트 만들기 개인과제 필수 구현까지 만들어보고,
오늘은 추가 구현 시도해봤다.

추가구현으로 위시 리스트 삭제, 당겨서 새로고침 구현이 있었다.
추가적으로 위시리스트에 담기 버튼을 클릭했을 때, alert가 뜰 수 있도록 추가했다.
그리고 위시리스트에서 해당 상품을 삭제를 한 후,
앱을 종료했다가 다시 키면 그대로 다시 되돌아가있는 문제가 있었다.
(내가 바보였음.. 😅코어데이터로 데이터 저장해놓고, 코어데이터에서 삭제는 안해서 생긴 문제)
그래서 데이터에서 삭제하는 delete function을 만든 후,
셀이 삭제된 이후에 실행되도록 변경해주었다.

오늘 Lv4 '위시리스트 삭제'는 완료!
이어서 Lv5 '당겨서 새로고침'을 구현하다가
scrollView에서 오토레이아웃 잡는데 어려움이 있어서
commit 해논 파일로 다시 되돌려놓고, 유튜브로 scrollView 관련해서 공부했다.

해보고 안되면 일단은 tableView로 새로고침 구현을 해보려고 한다!

과제 구현 과정에 관련해서는 내일 정리할 생각이다.
오늘은 간략하게 이번 과제에 대해서 정리하고,
scrollView에 대해서 공부한 내용과 과제에 추가한 과정을 정리해보려고 한다.

---

---

위시 리스트 만들기

---

---

0

Lv1~4 구현 현황

---

scrollView

---

 

메인화면을 아래로 스크롤하면,
새로고침이 되서 '다른 상품 보기 버튼'을 클릭했을 때와 같은 동작이 발생할 수 있도록 해야한다.

 노란색으로 표시한 부분!
imageView와 StackView로 묶었던 Label 3개
애네들만 스크롤 되로록 하려고 한다.

오늘 시도했다가 실패했던 이유가
ScrollView 추가하고, 안에 UIView 추가하고
그 안에 이 두 가지 녀석들을 넣어줬었는데,

오토레이아웃이 너무 많아져서 어느 부분을 놓친건지 알 수 없어서
이것저것 바꿔보다가 뒤죽박죽 되어버렸었다..

그래서 다시 차근차근 ScrollView 블로그를 보고 해보기!!
(참고했던 블로그 : https://nareunhagae.tistory.com/45)

[ScrollView] Auto Layout 설정이 어렵다면 이걸 보세요! - iOS

스크롤 뷰 어려우신 분들 이거 보세요..
진짜 정리 잘되어있고, 이거보고 따라해서 오토레이아웃 경고랑 에러
다 사라졌습니다!!

---

처음부터 스크롤 뷰를 사용할 걸 알고, 만들어서 시작했다면 정말 좋았겠지만..

LV5 추가 구현에 있었기 때문에
지금 만들어 놓은 부분을 수정해야했다!

---

<ScrollView 추가 과정>

① UIView를 safeArea에 추가하기

② 이 View 안에 넣으려는 요소들 넣기
(imageView, StackView(Label 3개))

③ ScrollView를 safeArea에 추가하기

④ ScrollView에 요소들 넣은 View 넣기

⑤ View를 ScrollView에 constraints를 leading, trailing, top, bottom 모두 0으로 맞추기

⑥ View 기준으로 imageView, StackView(Label 3개) 오토레이아웃 잡기

⑦ 이 View를 Frame Layout Guide에 Equal Width 해주기
(위 아래로 스크롤 하고 싶다면, Equal Width
좌우로 스크롤 하고 싶다면, Equal Height
상하좌우 자유분방하게 스크롤 하고 싶다면, 생략)

이렇게 하면 ScrollView 추가해서 오토레이아웃잡기 끝!!!

---

이제 이 ScrollView를 코드에 아울렛 연결해주고,
새로고침 코드 작성만 하면 된다!

func configureRefreshControl() {
        containerScrollView.refreshControl = UIRefreshControl()
        containerScrollView.refreshControl?.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged)
    }

 @objc func handleRefreshControl() {
        updateProduct()
        DispatchQueue.main.async {
            self.containerScrollView.refreshControl?.endRefreshing()
        }
}

 

이렇게 하면, 새로고침이 활성화 된다!
(updateProduct()는 '다른 상품 보기 버튼' 클릭했을 때, 동작하는 코드임)

그런데, viewDidLoad에 configureRefreshControl()를 추가한 후 실행해보면?
뭔가 허전한 느낌이 들 것이다.😳

그 이유는! 리프레시 인디케이터가 고정되지 않고, 바로 올라가기 때문에!
우리가 자주 사용하던 어플들의 새로고침과 살짝 이질감이 들었던 것!!

    @objc func handleRefreshControl() {
        updateProduct()
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            self.containerScrollView.refreshControl?.endRefreshing()
        }
    }

방금 위의 코드에서 async을 asyncAfter로만 바꿔주면 된다.
다시 실행해보면??

0

이렇게  0.5초동안 잠시 새로고침에 머물러있다가
endRefreshing() 메서드를 호출해서 새로고침이 완료되는 모습!

---