[안드로이드] SharedPreference 사용과 ScrollView Event

잡다한 서론

졸업프로젝트 기획이 끝나고 안드로이드 개발을 시작하게 되었다. 그전에 우리 팀의 상황을 얘기해보자면 원래를 웹+딥러닝으로 기획을 한 터라 스프링과 리액트를 다룰 줄 아는 팀원들로 팀을 구성했다. 그런데 실시간 노트 변환을 해주는 TarsosDSP가 안드로이드에 적합하다는 것을 알게 되어서 안드로이드를 사용하게 되었고, 사용자가 노래를 하면 그것을 잘라주는 파이썬 라이브러리를 써야 하기 때문에 장고도 사용하게 되었다. 그랬더니 아래처럼 얼레벌레 구조가 나왔다.

멘토님께 여쭤보니 괜찮다고는 하셨지만, 서버의 기능이 나눠져있다는 것이 조금 이상하다고 해서 그냥 안드로이드 안에서 모든 것을 해결하기로 했다.  

이렇게 구현해도 작동하는데 문제는 없을 것 같아요. 이미 구현된 부분이 있다면 이대로 구현하셔도 상관없을 것 같아요. 다만 조금 어색한 건, 서버사이드의 기능이 여러군데 나뉘어져 있는게 조금 이상하네요. Storage 의 역할로 Firebase 를 써야하고, 음악 분석을 위해 Django 를 써야하고, 익숙한 건 Spring Boot 라 이런 구조가 된걸까요? 가장 깔끔한 구조라면 서버의 모든 기능을 하나의 프레임워크에서 구현하고, 혹시 구현 안되는 부분이 있다면 그 서버 프레임워크에서 연동하는게 제일 깔끔한 구조일 것 같아요. 아마 Django 를 써야할 것 같네요. 아마 음악 분석 쪽을 위해 Django 를 반드시 써야만 할 것 같으니...

이렇게 해서 안드로이드 경험이 없는 팀원 셋이 안드로이드 개발을 처음으로 시작하게 되었다^^

이번 포스트에서는 안드로이드를 처음 개발하면서 마주쳤던 어려운 부분을 써보려고 한다. 

 

1. SharedPreference를 이용한 상태 저장

개발을 진행하다보면, 특정 데이터를 저장해야 하는 상황이 종종 있다. 우리 팀의 경우 음역대 테스트에서 고음 테스트를 마치고 나면 isHighDone 변수가 true로 바뀌어야 하고 저음 테스트를 마치면 isLowDone 변수가 true로 바뀌어야 했다. 그래서 두 변수가 모두 true여야 다음 액티비티로 가는 버튼이 활성화되는 식이었는데, 문제는 음역대 테스트 대기 화면 -> 음역대 테스트 진행 화면 -> 음역대 테스트 완료 화면으로 액티비티가 넘어가다보니, 해당 변수의 값이 저장되지 않았다. 이걸 하나하나 intent로 넘겨줄 수도 없는 일이라 고민했는데, 그럴 때 SharedPreference를 이용해서 상태를 저장하면 좋다. 

SharedPreference란?

앱 내 개별 저장소에 xml 파일을 만들고, 해당 파일에 key/value 형태로 데이터를 저장하는 방식. 해당 데이터는 앱 내부에 저장되기 때문에, 다른 앱과 공유할 수 없으며 앱을 삭제하면 해당 데이터도 모두 사라진다. 

 

1) SharedPreference 객체 생성 및 호출

기본적으로 SharedPreference를 선언한 후, onCreate 함수 안에서 getSharedPreferences()를 이용해 해당 객체를 호출한다. 

getSharedPreferences(String name, int mode);

접근 권한에 따라 mode를 여러 개 설정할 수 있는데 그냥 기본 모드인 MODE_PRIVATE로 선언해주었다.

(MODE_PRIVATE : 생성한 어플리케이션에서만 사용할 수 있는 모드)

그리고 우리는 테스트 완료 여부를 사용자별로 저장해야 하기 때문에 sharedPrefFile이 구별되도록 생성 경로에 사용자 이름을 넣어주었다.

	private SharedPreferences mPreferences;
    
 	@Override
    protected void onCreate(Bundle savedInstanceState) {
    String sharedPrefFile = "com.example.android."+userEmail+".SharedPreferences";
    mPreferences = getSharedPreferences(sharedPrefFile, MODE_PRIVATE);
    }

2) SharedPreference에 값 저장하기

SharedPreferences.Editor를 사용해서 값을 저장한다. 

editor에 원하는 값을 key-value 형태로 넣어준 후, 마지막에 꼭 apply()나 commit() 함수를 호출해야 저장이 된다.

private void ApplySharedPreference() {
        SharedPreferences.Editor preferencesEditor = mPreferences.edit();
        if (octaveHighLow.equals("high"))
            preferencesEditor.putBoolean("isHighDone", true);
        else if (octaveHighLow.equals("low"))
            preferencesEditor.putBoolean("isLowDone", true);
        preferencesEditor.apply();
    }

3) SharedPreference에서 값 가져오기

getString, getBoolean 등을 이용해서 값을 가져올 수 있다. key값과 해당 값이 없을 때의 default value를 선언해주자.

getBoolean(key, default value)

private Boolean isHighDone;
private Boolean isLowDone;
    
isHighDone = mPreference.getBoolean("isHighDone", false);
isLowDone = mPreference.getBoolean("isLowDone", false);

 

상태를 저장하는 다른 방법들

사실 상태를 저장할 수 있는 방법은 많다. 간단하게 적어보면

1) SharedPreference

일종의 파일 쓰기와 비슷하며, 화면이 꺼져도 값이 남아있다. 그러나 오래된 방법이라 추천하지는 않는다. 

 

2) DataStore

SharedPreference의 단점을 극복한 데이터 저장소.

• 코루틴과 Flow를 통해 읽고 쓰기에 대한 비동기 API를 제공한다.
• UI 스레드를 호출해도 안전하다.
• runtime exception으로부터 안전하다.

3) ViewModel

Activity나 Fragment의 수명 주기를 고려하여 UI 관련 데이터를 저장하고 관리할 수 있도록 설계된 클래스

 

4) 서버 자체에 올리는 방법

이래도 되나 싶지만 실제로 사용자의 선택 정보를 서버에 저장하는 일이 많다고 한다! 회사들은 유저 데이터 기반으로 등 다양한 서비스를 제공하기 때문에 그런 것 같다. 

 

이번에는 안드로이드에 대한 이해가 부족한 상태에서 급하게 개발을 하느라 SharedPreference를 사용했지만, 본인이 충분한 여유가 있다면 View Model으로 개발하는 것이 훨씬 좋을 것 같다!

 

SharedPreference vs SavedInstanceState

처음에는 SavedInstanceState를 호출했으나, 액티비티 여러 개를 왔다갔다하는 우리 앱의 특성상 savedInstanceState가 아예 초기화되는 일이 잦았다. 그래서 찾아보다가 SharedPreference를 사용하게 되었는데, 이 김에 둘을 간단하게 비교해보려고 한다.

 

1) SharedPreference

• 앱 내 파일 형태로 저장되어 있으며, 주로 설정 파일로 사용된다.
• 앱을 삭제하지 않는 한 저장된 데이터가 계속 남아있다. 따라서 화면을 끄거나 앱을 종료해도 데이터가 남아있기 때문에 여러 번 호출해야 하는 데이터를 저장할 때 유용하다.

2) SavedInstanceState

 

• 액티비티 내의 상태를 저장할 때 사용되며, 주로 화면 회전 시 데이터 로딩 용도로 사용된다.
• 화면이 회전할 때는 onCreate()와 onDestroy()가 다시 불리기 떄문에 설정해둔 변수 값이 모두 초기화되는데, savedInstanceState를 이용해서 onDestroy() 전에 데이터를 저장하고, 이 데이터를 onCreate()에서 다시 불러오는 형식으로 사용한다.
• 앱을 종료하거나 다른 액티비티로 이동할 경우 데이터가 사라진다.

 

2. ScrollView와 GridView로 자동 이동하는 노래 연습화면 구현하기

우리 프로젝트에서 제일 난이도가 높은 노래 연습화면! 노래방이나 노래 연습 앱을 보면 악보가 자동으로 이동하는 화면이 있다. 우리 팀도 노래 음정을 블록으로 띄워주고, 노래가 진행됨에 따라 자동으로 블록이 이동하는 화면을 구현해야 했다. 

애증의 화면....너만 없었어도...근데 없으면 플젝 망함

 

음정을 표시하는데는 두 가지 방법이 있다.

1) GridView의 row, column의 색깔을 바꿔 cell으로 블록을 표시해주는 것

2) Background로 GridView를 그리고, 그 위에 투명도를 조절한 Fragment로 블록을 표시하는 것

이 중에서 우리는 구현 난이도가 더 낮아보이는 1번을 선택했다.

 

그리고 노래가 진행됨에 따라 화면을 맞춰서 이동시켜줘야 했는데, 이것도 두 가지 방법이 있었다.

1) GridView 내의 스크롤 기능 이용

2) 스크롤뷰 안에 GridView를 넣어서 이동

그런데 스크롤뷰에 액션을 넣는 것이 더 자연스럽게 이동이 되는 것 같아 후자로 선택했다.

Horizontal ScrollView

일단 우리는 좌->우로 이동하는 화면을 만들어야 하기 때문에 일반 scrollView가 아닌 HorizontalScrollView를 선택했다. 

1) ObjectAnimator를 이용한 자동 스크롤 이벤트 생성

ObjectAnimator란?

안드로이드에서 제공하는 애니메이션 구현 방법 중 하나로, 타겟으로 설정한 object에 애니메이션을 넣어준다. 

 

ObjectAnimator Attribute

우리가 사용한 속성은 다음과 같다.

propertyName	객체에서 animate할 속성을 지정한다.	alpha, rotationX, scrollX, translationX 등등
object	타겟 object를 지정한다
valueTo	propertyName에서 지정한 속성값의 종료값을 지정
duration	애니메이션 지속 시간

 

스크롤뷰를 object로 놓고, X축 방향으로 이동하도록 지정하였으며, 일단 화면의 끝까지 가야 하니까 valueTo에 임의로 큰 값을 넣어주었다.

애니메이션은 노래가 끝날 때까지 지속되어야 하므로 duration에는 노래 길이를 넣어주었다.

scrollView.post(new Runnable() {
            @Override
            public void run() {
                ObjectAnimator objectAnimator = ObjectAnimator.ofInt(scrollView, "scrollX", 1000000);
                objectAnimator.setDuration(Math.round(songEndTime)); // song 길이만큼 지속
                objectAnimator.start();
            }

그랬더니 잘 작동은 되는데...시작과 끝에서만 스크롤 이동 속도가 느리고 중간에는 엄청나게 빨라진다. 극적인 애니메이션 효과를 주기 위해 기본적으로 설정이 되어있는 듯한테, 우리는 일정한 속도로 뷰를 보여줘야 하기 때문에 이 효과를 없애야 한다. 이럴 때 Interpolator를 사용하면 된다.

 

2) Interpolator를 이용한 스크롤 속도 조정

Interpolator란?

애니메이션 시작 지점과 종료 지점을 연결하는 효과. (Linear가 default라는데 왜 내 스크롤뷰에서는 AccelerateDecelerate 효과가 나타나는지 모르겠다) 아무튼 우리는 LinearInterpolator를 사용해야 한다.

AccelerateInterpolator	시작 시점에서 가속한다.
AnticipateInterpolator	시작시점 뒤쪽으로 살짝 이동한 이후에 종료시점에 도착한다.
OvershootInterpolator	종료시점을 지나쳐서 살짝 이동한 이후에 다시 종료시점으로 돌아온다.
BounceInterpolator	종료 시점에 도착한 이후 몇 회에 걸쳐 튀어 오른다.
CycleInterpolator	종료 시점에 도착 후 다시 시작 지점으로 이동한다.
DecelerateInterpolator	종료 지점으로 도착할수록 가속한다.
LinearInterpolator(default)	동일한 속도로 시작 시점에서 종료 시점으로 이동한다.
AccelerateDecelerateInterpolator	시작 지점에서 가속했다가 종료 시점에 감속한다.

사용 방법은 간단한다. 그냥 선언해주고 ObjectAnimator에 설정해주면 된다!

 

  LinearInterpolator interpolator = new LinearInterpolator();
        scrollView.post(new Runnable() {
            @Override
            public void run() {
                ObjectAnimator objectAnimator = ObjectAnimator.ofInt(scrollView, "scrollX", 1000000);
                objectAnimator.setInterpolator(new LinearInterpolator()); // interpolator 설정
                objectAnimator.start();
            }
        });

 

GridView

이제 스크롤이 부드럽게 움직이는 것을 확인했으니 밑에 깔아줄 GridView를 만들어보자.

1) GridItem.java

일단 노트와 색상을 표시하는 아이템을 만든다.

@Getter
@AllArgsConstructor
public class ListItem {
    String note;
    String color;
}

2) GridViewAdapter.java

public class GridListAdapter extends BaseAdapter {

    ArrayList<ListItem> items = new ArrayList<ListItem>();
    Context context; // 어플리케이션에 대한 정보

    public void addItem(ListItem item){
        items.add(item);
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int position) {
        return items.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        context = parent.getContext();
        ListItem listItem = items.get(position);

        // listItem을 inflate하여 context를 참조
        if (convertView == null){
            LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.singing_grid_item, parent, false);
        }

        TextView noteText = convertView.findViewById(R.id.noteText);
        TextView colorText = convertView.findViewById(R.id.colorText);

        noteText.setText(listItem.getNote());
        colorText.setText(listItem.getColor());

        return convertView;
    }
}

3)  GridViewActivity.java

public class SingGridActivity extends AppCompatActivity {
	...
    private HorizontalScrollView scrollView;
    private GridView gridView;

    public static FirebaseFirestore database = FirebaseFirestore.getInstance();

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

        gridView = findViewById(R.id.gridView);
        getSongEndTime();
    }

    private void setGridViewAdapters(){
        int columnNum = (int) Math.round(songEndTime / 0.1);
        gridView.setNumColumns(10);
        GridListAdapter adapter = new GridListAdapter();

        adapter.addItem(new ListItem("B4", "빨강"));
        adapter.addItem(new ListItem("B4", "주황"));
        adapter.addItem(new ListItem("B4", "노랑"));
        adapter.addItem(new ListItem("B4", "초록"));
        adapter.addItem(new ListItem("B4", "파랑"));
        adapter.addItem(new ListItem("B4", "보라"));
        adapter.addItem(new ListItem("B4", "분홍"));
        adapter.addItem(new ListItem("B4", "갈색"));
        adapter.addItem(new ListItem("B4", "회색"));
        adapter.addItem(new ListItem("A4", "빨강"));
        adapter.addItem(new ListItem("A4", "주황"));
        adapter.addItem(new ListItem("A4", "노랑"));
        adapter.addItem(new ListItem("A4", "초록"));
        adapter.addItem(new ListItem("A4", "파랑"));
        adapter.addItem(new ListItem("A4", "보라"));
        adapter.addItem(new ListItem("A4", "분홍"));
        adapter.addItem(new ListItem("A4", "갈색"));
        adapter.addItem(new ListItem("A4", "회색"));

        gridView.setAdapter(adapter);
    }
}

GridView에서는 사용자가 정의한 아이템을 표시하기 위해 Adapter를 사용해야 한다.

GridView는 Adapter로부터 생성된 view를 받아 GridView 항목으로 배치한다.

4) activity_gridview.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Singing.activity.SingGridActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginStart="1dp"
            android:layout_marginTop="1dp"
            android:layout_marginEnd="1dp"
            android:layout_marginBottom="1dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <GridView
                android:id="@+id/gridView"
                android:layout_width="1000dp"
                android:layout_height="1000dp"
                android:layout_margin="10dp"
                android:rowCount="10"
                android:horizontalSpacing="10dp"
                android:verticalSpacing="10dp" />
        </LinearLayout>

    </HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

5) gridview_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="409dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/noteText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="음정"
            android:textColor="@android:color/black"/>

        <TextView
            android:id="@+id/colorText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:text="색깔"
            android:textColor="@android:color/black" />

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

그러면 아래처럼 잘 나타나는 것을 확인할 수 있다. 스크롤도 잘 된다!

이제 레이아웃을 다듬고 cell별 color만 넣어주면 아래와 같은 화면을 만들 수 있다.