[Android] SwipeRefreshLayout / PullRefreshLayout / 아래로 당겨서 새로고침 기능

 

이번 포스팅에서는 '아래로 당겨서 새로고침' 이라 불리는 기능을 소개한다.

 

위 기능을 수행해주는 대표적인 라이브러리 2개를 모두 사용해 볼 것이다.

 

 

---

 

SwipeRefreshLayout

 

androidx에 포함된 라이브러리다.

 

공식 문서에서는 다음과 같이 간단하게 설명한다.

 

'스와이프하여 새로고침 UI 패턴을 구현합니다.'

 

최신 버전 및 자세한 내용을 원한다면 공식 문서를 확인하기 바란다.

 

 

✅ 안드로이드 공식 문서

 

Swiperefreshlayout  |  Android 개발자  |  Android Developers

 

 

---

 

✅ build.gradle 의존성 추가

 

build.gradle(모듈 수준)에 다음 의존성을 추가해준다.

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

 

최신 버전은 위 공식 문서 링크에서 확인하기 바란다.

 

 

---

 

✅ xml 파일 작성

 

xml 파일에 다음과 같이 작성해준다.

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        
        // Child View
        
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

 

SwipeRefreshLayout이 포함할 Child View를 작성해주면 된다.

 

SwipeRefreshLayout은 1개의 Child View만을 허용한다.

 

각자의 앱에 알맞는 Child View를 사용하기 바란다.

(LinearLayout, ScrollView 등)

 

 

---

 

✅ java 파일 작성

 

java 파일은 onCreate() 부분만 작성하겠다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_swiperefresh);

    SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.swipeRefreshLayout);

    swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
        
        // TODO
        
        swipeRefreshLayout.setRefreshing(false);
        
        }
    });

}

 

// TODO 부분에 새로고침 후 해야할 작업을 구현하면 된다.

 

작업이 끝나면 setRefreshing(false) 처리를 꼭 해줘야 한다.

작성해 주지 않으면 새로고침 UI가 무한히 돌아간다.

 

 

---

 

✅ 결과 출력

 

새로고침 후 TextView가 추가되는 간단한 예제를 만들어 보았다.

 

 

잘 동작하는 것을 확인할 수 있다.

 

 

---

 

PullRefreshLayout

 

baoyongzhang 이라는 분이 배포한 라이브러리다.

 

공식 GitHub에서는 다음과 같이 설명한다.

 

'이 컴포넌트는 SwipeRefreshLayout 과 유사하지만, 더 아름답습니다.'

 

자세한 내용을 원한다면 공식 GitHub를 확인하기 바란다.

 

 

✅ 공식 GitHub

 

GitHub - baoyongzhang/android-PullRefreshLayout: This component like SwipeRefreshLayout, it is more beautiful than SwipeRefreshL

 

 

---

 

✅ build.gradle 의존성 추가

 

build.gradle(모듈 수준)에 다음 의존성을 추가해준다.

implementation 'com.baoyz.pullrefreshlayout:library:1.2.0'

 

 

버전 문제로 오류가 난다면, 다음 의존성을 추가하면 된다.

implementation 'com.baoyz.pullrefreshlayout:library:1.2.0@aar'

 

 

---

 

✅ xml 파일 작성

 

xml 파일에 다음과 같이 작성해준다.

    <com.baoyz.widget.PullRefreshLayout
        android:id="@+id/pullRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        
        // Child View
        
    </com.baoyz.widget.PullRefreshLayout>

 

PullRefreshLayout이 포함할 Child View를 작성해주면 된다.

 

SwipeRefreshLayout과 마찬가지로 1개의 Child View만을 사용해야 하며,

스크롤이 존재하는 View를 사용 해야 한다.

ex) ScrollView, ListView, RecyclerView 등

 

스크롤이 존재하지 않는 View를 사용하면

아래로 당기는 모션 자체가 동작하지 않을 수 있다.

 

 

---

 

✅ java 파일 작성

 

java 파일은 onCreate() 부분만 작성하겠다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_pullrefresh);
    
    pullRefreshLayout.setOnRefreshListener(new PullRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            
            // TODO
            
            pullRefreshLayout.setRefreshing(false);
            
        }
    });
    
}

 

SwipeRefreshLayout과 사용법은 거의 똑같다.

 

// TODO 부분에 새로고침 후 해야할 작업을 구현하면 된다.

 

작업이 끝나면 setRefreshing(false) 처리를 꼭 해줘야 한다.

 

 

---

 

✅ 결과 출력

 

SwipeRefreshLayout 예제와 마찬가지로,

새로고침 후 TextView가 추가되는 간단한 예제를 만들어 보았다.

 

 

잘 동작하는 것을 확인할 수 있다.

 

 

---

 

● PullRefreshLayout.setRefreshStyle() 메서드

 

PullRefreshLayout은 다양한 Style을 지원한다.

// 기본
setRefreshStyle(PullRefreshLayout.STYLE_MATERIAL);

// 원
setRefreshStyle(PullRefreshLayout.STYLE_CIRCLES);

// 물방울
setRefreshStyle(PullRefreshLayout.STYLE_WATER_DROP);

// 링
setRefreshStyle(PullRefreshLayout.STYLE_RING);

// 화살표 링
setRefreshStyle(PullRefreshLayout.STYLE_SMARTISAN);

 

 

- STYLE_CIRCLES

 

 

- STYLE_WATER_DROP

 

 

- STYLE_RING

 

 

- STYLE_SMARTISAN

 

 

원하는 Style을 골라서 사용할 수 있다.

 

 

---

 

라이브러리를 변경하게 된 배경

 

준비하던 프로젝트에서는 SwipeRefreshLayout 라이브러리를 사용했었다.

 

 

그러던 어느 날, 클라이언트의 요구 사항이 생겼다.

 

"View를 아래로 당길 때 View가 같이 당겨져 내려오면 좋겠다."

 

 

SwipeRefreshLayout

 

SwipeRefreshLayout은 당길 때 새로고침 UI만 내려오고

Child View는 고정되어 있다.

 

그리하여 SwipeRefreshLayout 라이브러리 내에서 Child View를

컨트롤 할 수 있는 방법을 열심히 찾아보았지만 끝내 찾을 수 없었다.

 

결국 Child View가 같이 당겨져 내려오는게 기본 설정인

PullRefreshLayout 을 사용하게 되었다.

 

 

PullRefreshLayout

 

 

비록 공식 문서 라이브러리는 아니지만,

그래도 SwipeRefreshLayout을 참고하여 만들어진 라이브러리기 때문에

비교적인 부족함은 못 느꼈다.

 

 

---