[MVP] 안드로이드에 mvp 패턴 적용하기(2) - Contract 작성

<안드로이드에 mvp 패턴 적용하기 시리즈>
안드로이드에 mvp 패턴 적용하기(1) mvp 패턴이란?
안드로이드에 mvp 패턴 적용하기(2) Contract 작성
안드로이드에 mvp 패턴 적용하기(3) Model 정의
안드로이드에 mvp 패턴 적용하기(4) Presenter 만들기
안드로이드에 mvp 패턴 적용하기(5) Activity 에 View 구현

안드로이드 코드에 mvp 패턴을 적용하는 방법에 대해 알아보자.

이 포스팅은 Google 의 architecture-sample 레포지토리의 todo-mvp-kotlin 브랜치를 참고하여 작성하였다.

이 포스팅 프로젝트의 소스 코드는 깃헙에 올려두었다.

https://github.com/nukeolaf/MVP-my-first-mvp-example

 

1. MVP 패턴으로 구현할 화면에 어떤 기능이 필요할지 생각하기

우선, 간단하게 EditText 로 값을 입력하고, Submit 버튼을 누르면 입력한 값이 TextView 로 보여지는 화면을 만들어볼 것이다. 그리고 Submit 버튼을 눌렀을 때, 입력한 값을 Shared Preference 에 저장할 것이다. 그래서 앱을 다시 시작했을때 DB 에 저장된 값이 있다면, 해당 값을 TextView 로 보여주려고 한다.

이름과 이메일을 입력하고 SUBMIT 버튼을 누르면, 입력한 내용이 하단에 보이는 화면을 만들 것이다.

위 화면의 레이아웃 소스는 다음과 같다.

<?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=".MainActivity">

    <EditText
        android:id="@+id/name_input"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:hint="name"
        app:layout_constraintBottom_toTopOf="@id/email_input"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">
    </EditText>

    <EditText
        android:id="@+id/email_input"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:hint="email"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/name_input">
    </EditText>

    <Button
        android:id="@+id/button_submit"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:text="Submit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/email_input">
    </Button>

    <TextView
        android:id="@+id/name_output"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="name : "
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button_submit"/>

    <TextView
        android:id="@+id/email_output"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="email : "
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/name_output"/>

</androidx.constraintlayout.widget.ConstraintLayout>

그렇다면, 이 화면에서 우리는 어떤 기능들이 필요할까?

(1) EditText 에 입력된 값을 DB에 저장하는 기능
(2) EditText 에 입력된 값을 TextView 로 보여주는 기능
(3) 화면 초기화 시에, 저장된 값이 있다면 TextView 로 보여주는 기능

이렇게 크게 세 가지로 나눌 수 있을 것 같다. 

이 세가지 기능을 Model 과 View, Presenter 가 각자의 컨셉에 맞게 분담하여 담당하도록 만드는것이 MVP 패턴 적용의 시작이다.

 

2. Contract : View 와 Presenter 에 대한 interface 작성하기

(1) EditText 에 입력된 값을 DB에 저장하는 기능
(2) EditText 에 입력된 값을 TextView 로 보여주는 기능
(3) 화면 초기화 시에, 저장된 값이 있다면 TextView 로 보여주는 기능

다음으로, 이 세 가지 기능을 View 와 Presenter 에서 어떻게 분담하고 나눌지 미리 계획한 내용을 Contract interface 로 작성한다. Contract 란 "계약" 이라는 뜻으로, View 와 Presenter 가 무슨 기능을 할 지 미리 명세해주는 역할을 해주는 인터페이스라고 생각할 수 있다.

Contract 는 View 와 Presenter 를 각각 정의하여 이해를 돕기 위해 사용한다.
하나의 Contract interface 에 View/Presenter 를 작성하고, 이를 각각의 View 와 Presenter 에 implement 하여 사용하게 된다.

나는 위 화면의 기능을 MVP 패턴으로 구현하기 위한 Contract interface 를 다음과 같이 작성했다.

interface Contract {
    interface View {
        // TextView 에 info 데이터를 보여준다
        fun showInfo(info: JSONObject)
    }

    interface Presenter {
        // onCreate 화면 초기화시에 
        // 저장된 데이터가 있는지 Model 에서 확인하고
        // 확인한 결과에 따라 View 에 어떤 내용을 보일지 지시한다
        fun initInfo()

        // TextView 에 info 데이터를 보여주라고 View 에게 지시한다
        fun setInfo(info: JSONObject)

        // EditText 에 입력된 info 데이터를 저장하라고 Model 에게 지시한다
        fun saveInfo(info: JSONObject)
    }
}

* 나는 Model 을
{ "name" : "olaf", "email" : "olaf@naver.com" }
이런 형태의 JSONObject 로 만들어서 관리하는 방법을 사용할 것이다.

Model 에 관한 자세한 내용은 다음 포스팅에서...