본문 바로가기
안드로이드 자바

[Java][Android] 당겨서 새로고침 빠르게 구현하기

by teamnova 2021. 2. 20.

 

 

developer.android.com/training/swipe/respond-refresh-request?hl=ko

 

새로고침 요청에 응답  |  Android 개발자  |  Android Developers

이 과정에서는 사용자가 스와이프 동작이나 작업 모음 새로고침 작업을 통해 새로고침을 트리거하여 수동 새로고침을 요청하는 경우 앱을 업데이트하는 방법을 보여줍니다. 새로고침 작업에

developer.android.com

이 자료를 참고하여 글을 작성하였습니다.

 

이번에는 안드로이드에서 당겨서 새로고침 하는 기능을 구현해보려고 합니다.

요즘 앱들에 당겨서 새로고침을 하는 기능들이 많은데요 , 생각보다 간단하게 구현이 가능하고 꼭 있어야 하는 기능은 아니지만 

있으면 좋은 기능이라 저도 한 번 공부해서 구현해봤습니다.!

예제는 새로고침을 하면 랜덤으로 동물 이름이 나타나도록 구현해보았습니다.

 

먼저 레이아웃을 만든 후에 코드를 작성해 보겠습니다!

레이아웃은 SwipeRefreshLayout을 사용해야합니다.

 

 SwipeRefreshLayout을 사용하기 위해서는 build.gradle 파일의 의존성 설정에 추가합니다.

 

dependencies {
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
}  

 

 

activity_main.xml

SwipeRefreshLayout 안에 동물 이름을 넣을 TextView를 배치했습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/swipeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/animalName"
        android:gravity="center"
        android:text="동물이름"
        android:textSize="40sp"
        android:textColor="@color/colorPrimaryDark"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

 

동물 이름이 갱신되는 것을 잘 보이게 하기 위해 색상을 보라색으로 하고 , 텍스트 크기도 크게 해 주었습니다.

 

 

 

MainActivity.java

먼저 SwipeRefreshLayout에 리스너를 등록했습니다. 뷰를 아래로 당기면 onRefresh 메서드가 실행됩니다.

저는 뷰가 변경되는 부분을 메서드(updateLayoutView)로 만들었습니다.

 

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {

    SwipeRefreshLayout swipeRefreshLayout;

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

        swipeRefreshLayout = findViewById(R.id.swipeLayout);
        swipeRefreshLayout.setOnRefreshListener(this);

    }

    @Override
    public void onRefresh() {

        //새로 고침 코드
        updateLayoutView();

        //새로 고침 완
        swipeRefreshLayout.setRefreshing(false);

    }

    // 당겨서 새로고침 했을 때 뷰 변경 메서드
    public void updateLayoutView(){

      
    }
}

 

 


 

새로고침 코드를 작성할 때마다 ( 많지는 않지만..) 새로고침 코드라고 구글에 검색하는 게 귀찮아서 저는 스틱 코드에 저장을 했습니다.

스틱 코드를 사용하면 빠르게 만들수 있고 , 내가 사용했던 코드를 다시 검색하지 않아도 다시 사용할 수 있다는 점이 좋은거 같습니다.

 

 

 

저는 스틱코드를 당겨서 새로고침을 구현할 때 사용했습니다.

저는 all code, part code를 두 개를 만들어 놓았는데 영어 뜻 그대로 all code는 전체 코드이고 part code는 부분 코드입니다.

all code와 part code를 분리해서 만든 이유는 전체 코드는 아예 처음 액티비티를 만들 때 사용하면 좋을 거 같아서 만들었고 ,부분만 있는 코드는 이미 진행되어있는 프로젝트에 사용하기 좋을거 같아서 따로 만들어서 사용했습니다.

 

스틱코드 refresh - part code 사용

 

refresh - part code 저장된 코드입니다.


 

 

액티비티에 리스너를 등록하는 부분만 만들어서 이번에는 실제로 당겨서 새로고침을 할 때 동물 이름이 갱신되는 거 까지 구현을 해보겠습니다.

 

 

MainActivity.java
public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {

    TextView animalName;
    SwipeRefreshLayout swipeRefreshLayout;
    String[] animalNameList = {"강아지", "토끼", "고양이", "돼지"};

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

        animalName = findViewById(R.id.animalName);
        swipeRefreshLayout = findViewById(R.id.swipeLayout);
        swipeRefreshLayout.setOnRefreshListener(this);

    }

    @Override
    public void onRefresh() {

        //새로 고침 코드
        updateLayoutView();

        //새로 고침 완
        swipeRefreshLayout.setRefreshing(false);

    }

    // 당겨서 새로고침 했을 때 뷰 변경 메서드
    public void updateLayoutView(){

        Random random = new Random();

        //0~3까지 랜덤
        String randomAnimalName = animalNameList[random.nextInt(4)];
        animalName.setText(randomAnimalName);
    }
}

 

 

 

새로고침 아이콘 색상을 바꾸시려면 이코드를 추가하시면 됩니다.

저는 빨간색으로 했는데 원하시는 색상으로 변경하시면 될거같습니다.

 

swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_red_light);

 

 

 

마지막으로 앱 시연 영상입니다.

 

 

 


사용한 스틱코드

 

- stickode.com/code.html?fileno=9414

- stickode.com/code.html?fileno=9415