안드로이드에서 당겨서 새로고침(SwipeRefreshLayout) 쉽게 구현하기

앱을 개발 하다보면 필수 기능중에 하나가 보고 있는 리스트나 상세 페이지등을 새로고침 하는 것 입니다.

몇년 전 까지만 하더라도 새로 고침 기능이라고 하면 아이폰 처럼 뷰를 당기면 공간이 벌어지면서 새로고침 하는 방식을 많이 사용 했습니다.(여전히 이 방법을 사용하는 앱은 많습니다.) 해당 새로고침을 기능을 제공 하려면 개발가 하나하나 구현 해야해서 쉽지 않은 기능 중 하나였습니다.
하지만 지금은 android 레이아웃중 SwipeRefreshLayout을 제공하여 레이아웃만 추가한다면 별다른 구현 없이도 위에서 아래로 내려오는 새로고침 기능을 사용 할수 있게 되었습니다.

SwipeRefreshLayout을 간단하게 구현하는 샘플 코드를 작성해 보겠습니다.

1단계 : 레이아웃

새로고침이 될 뷰를 SwipeRefreshLayout으로 자식뷰로 만듭니다.

      <android.support.v4.widget.SwipeRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/swipe_refresh">

            <WebView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/webView"></WebView>

        </android.support.v4.widget.SwipeRefreshLayout>
       

2단계 : 새로고침 이벤트

해당 뷰 영역을 위에서 아래로 당기면 SwipeRefreshLayout의 OnRefreshListener의 인터페이스를 통하여 onRefresh함수 가 호출됩니다.

        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                //새로고침 소스
            }
        });

새로 고침이 완료 되었을 때는 꼭 setRefreshing 함수를 false 값으로 셋팅해 주어야 합니다.

       //새로고침 종료
       refreshLayout.setRefreshing(false);

아래는 실제 웹페이지를 로딩하고 새로고침한 소스입니다.

    private SwipeRefreshLayout refreshLayout = null;
    private WebView webView = null;

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

        refreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        webView = (WebView) findViewById(R.id.webView);


        webView.setWebViewClient(new WebViewClient()
        {
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);

                refreshLayout.setRefreshing(false);

            }

        });

        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                webView.reload();
            }
        });

        webView.loadUrl("http://devstory.ibksplatform.com/");

    }

새로 고침 함수가 호출되면 웹뷰를 다시 로딩 하고 로딩이 끝나면 새로고침 상태를 바꿔주는 것을 확인 할수 있습니다.


3단계 : 아이콘 색상 변경

setColorSchemaResources 함수를 통하여 새로고침 아이콘 색상을 변경 할수 있습니다. 인자 값을 보면 리소스ID를 여러개 넣을 수 있는 것을 확인 할수 있습니다. 넣은 인자값 순서대로 한바퀴 돌때 마다 색상이 변경 됩니다.

        refreshLayout.setColorSchemeResources(
                android.R.color.holo_orange_light,
                android.R.color.holo_blue_light
        );

새로고침 UI의 요구사항이 많거나 까다롭다고 한다면 SwipeRefreshLayout으로 부족할수 있지만 충분히 앱을 개발하는데 있어서는 편리한 레이아웃이 아닐까 생각 합니다.