[JAVA][Android] Rxjava와 butterknife를 써서 구구단 앱 만들기

이번 포스팅에선 Rxjava와 butterknife를 써서 구구단 앱을 만드는 방법에 대해 포스팅하겠습니다.

사용된 전체 코드는 스틱코드 포스팅에서도 확인할 수 있습니다.

https://stickode.com/detail.html?no=2462 

스틱코드

 

Rxjava란?

 

Rxjava 공식 홈페이지에서는 Rxjava에 대해 아래와 같이 말하고 있습니다.

RxJava는 관찰 가능한 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 구성하기 위한 라이브러리인 Reactive Extensions의 Java VM 구현입니다

 

먼저 앱 수준 gradle 파일에 아래의 의존성 문구들을 추가합니다.

//RxJava, RxAndroid
    implementation 'io.reactivex.rxjava2:rxjava:2.1.2'
    implementation 'io.reactivex.rxjava2:rxandroid:2.0.1'
    implementation 'com.jakewharton.rxbinding2:rxbinding:2.0.0'

    //RxLifecycle 2.x
    implementation 'com.trello.rxlifecycle2:rxlifecycle-android:2.1.0'
    implementation 'com.trello.rxlifecycle2:rxlifecycle:2.1.0'
    implementation 'com.trello.rxlifecycle2:rxlifecycle-components:2.1.0'

    //Utils
    implementation 'com.jakewharton.rxbinding2:rxbinding:2.0.0'
    implementation 'com.jakewharton.timber:timber:4.4.0'

    //Utils - butter-knife
    implementation 'com.jakewharton:butterknife:10.0.0'
    annotationProcessor 'com.jakewharton:butterknife-compiler:10.1.0'

 

그리고 화면을 만들어주겠습니다. 구구단을 출력할 것이기 때문에 editText의 inputType 속성을 number로 설정한 것 말고는 특별한 부분은 없습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".GugudanActivity">

    <EditText
        android:id="@+id/ed"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:inputType="number"
        android:layout_margin="16dp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_margin="16dp"
        android:textColor="#000000"
        android:textSize="20sp" />

</LinearLayout>

 

마지막으로 자바 코드입니다. 버터나이프를 사용했기 때문에 editText, textView 위에 @BindView 어노테이션이 있는 걸 볼 수 있습니다.

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.widget.EditText;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import io.reactivex.subjects.BehaviorSubject;

public class GugudanActivity extends AppCompatActivity
{
    @BindView(R.id.ed)
    EditText editText;

    @BindView(R.id.tv)
    TextView textView;

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

        ButterKnife.bind(this);

        BehaviorSubject<String> subject = BehaviorSubject.createDefault("0");

        // editText에 입력되는 텍스트의 변경 감지
        editText.addTextChangedListener(new TextWatcher()
        {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after)
            {
                //
            }

            @SuppressLint("CheckResult")
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count)
            {
                subject.map(dan -> editText.getText().toString().equals(""))
                        .flatMap(dan -> BehaviorSubject.range(1, 9),
                                (dan, row) -> 0 + "x" + row + " = " + 0 + "\n")
                        .scan((x, y) -> x + y)
                        .doOnNext(data -> Log.d("1번째 doOnNext()", data))
                        .subscribe(text -> textView.setText(text));

                subject.map(dan -> Long.parseLong(editText.getText().toString()))
                        .flatMap(dan -> BehaviorSubject.range(1, 9),
                                (dan, row) -> dan + " x " + row + " = " + (dan * row) + "\n")
                        .scan((x, y) -> x + y)
                        .doOnNext(data -> Log.d("2번째 doOnNext()", data))
                        .subscribe(text -> textView.setText(text), Throwable::getMessage);
            }

            @Override
            public void afterTextChanged(Editable s)
            {
                //
            }
        });
    }
}

 

이렇게 작성한 후 앱을 빌드하면 아래와 같은 화면을 볼 수 있습니다.

입력한 숫자마다 1~9까지를 곱한 수가 실시간으로 바뀌어 출력되는 걸 볼 수 있습니다.