[My Note] 노트 페이지 구현하기

이번에는 비밀번호를 입력하고 넘어가는 노트 페이지를 만들어보도록 하겠습니다.

 

우선 노트페이지를 위한 액티비티를 아래와 같이 생성해줍니다.

액티비티에 들어갈 레이아웃도 생성하도록 합니다. 아래 코드와 같이, 테두리를 지닌 하얀색 배경의 EditText 뷰를 추가합니다. EditText 뷰는 노트 기능을 할 것입니다.

 

EditText 뷰의 폭과 높이는 0으로 지정해, Constraint Layout과 맞춰주고, Constraint Top, Bottom, Start, End를 모두 부모 크기로 맞춰줍니다. Gravity 속성 또한 Start 또는 Top으로 주어서, 글자를 쓸 때 상단 왼쪽에서 시작될 수 있도록 정의합니다.

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="30dp"
    android:background="@color/teal_200">

    <EditText
        android:id="@+id/noteEditText"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/white"
        android:gravity="start|top"
        android:padding="15dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

이후, 아래와 같이 액티비티를 레이아웃과 연결시켜줍니다.

class NoteActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.note_activity)
    }
}

AndroidManifest.xml 파일에 액티비티를 추가하여, 빌드 후 실행될 수 있도록 합니다.

<activity android:name=".NoteActivity"
          android:theme="@style/Theme.Secret_Diary.NoActionBar">
</activity>

onCreate 함수에서 뷰를 그려줄 때, 기존에 저장된 글이 불러올 수 있도록 동작을 코딩해줘야 합니다.  이번에도 SharedPreferences를 사용하여, 기존에 저장된 글을 불러오도록 합니다. onCreate 함수를 벗어날 필요가 없기 때문에 로컬 변수로 noteEditText를 선언하고, 레이아웃을 넘겨줍니다.

 

noteEditText에 setText를 통해 글을 저장하도록 합니다. "note"로 정의된 detailPreferences에서 getString 메소드로 글을 저장하도록 합니다. 이렇게 저장되는 DB는 "detail"이란 명칭을 부여했으며, 디폴트값은 Empty String으로 주도록 합니다. 이렇게 하면, onCreate 실행 시 이미 저장된 글을 노트로 불러와 뿌려주게 됩니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.note_activity)

    val noteEditText = findViewById<EditText>(R.id.noteEditText)
    val detailPreferences = getSharedPreferences("note", Context.MODE_PRIVATE)
    noteEditText.setText(detailPreferences.getString("detail", ""))
}

이제는 글을 작성할때마, 자동적으로 글이 저장되는 기능을 구현해봅니다.

 

해당 기능은 addTextChangedListener를 통해 구현이 가능한데, 글이 추가될 때마다 람다 함수가 실행될 수 있도록 합니다. 아래와 같이 리스너를 추가하여, 람다 안에는 noteEditText의 글을 가져와서 "detail"에 넣어주도록 합니다.

noteEditText.addTextChangedListener {
    detailPreferences.edit {
        putString("detail", noteEditText.text.toString())
    }
}

글이 저장될 때, 일정 시간의 텀을 두고 저장시키기 위해 스레드를 사용할 것입니다.

스레드 사용을 위해 Runnerable 인터페이스를 구현합니다. 인터페이스 안에 SharedPreferences의 에디터를 열고, 저장하는 기능을 완성합니다. 특별히 commit을 true로 명시하지 않아, false로 둠으로써, 스레드가 비동기 방식으로 apply() 메소드를 통해 글을 수시로 저장하도록 합니다. 

val runnable = Runnable {
    getSharedPreferences("note", Context.MODE_PRIVATE).edit {
        putString("detail", noteEditText.text.toString())
    }
}

메인 스레드/UI 스레드와 새로운 스레드의 연결을 위해 핸들러를 구현하도록 합니다. 메인 스레드가 아닌 곳에서는 UI가 변경되는 기능을 수행할 수 없기에, 핸들러가 필요합니다.

반응형

아래와 같이 안드로이드 OS에서 제공하는 핸들러 기능을 구현해줍니다. 인자로는 Looper.getMainLooper를 사용합니다. 메인 루퍼를 넣게되면, 메인 스레드에 연결된 핸들러가 완성이 됩니다. 기본적으로 안드로이드 스튜디오에서 작업 시 액티비티에 핸들러가 하나 작동되고 있어, 핸들러 기능을 사용할 수 있는 것입니다.

private val handler = Handler(Looper.getMainLooper())

핸들러를 구현했으니, noteEditText에 핸드러를 사용해야 겠죠?

 

핸들러의 여러가지 기능 중에서 postDelayed를 사용할 것입니다. 1000이라는 숫자는 밀리초의 시간 단위 인데, 1초 단위로 runnable을 실행하여 저장할 수 있도록 합니다. 그 이전에 pending 상태의 runnable을 삭제할 수 있도록 removeCallbacks도 완성해줍니다.

noteEditText.addTextChangedListener {
     handler.removeCallbacks(runnable)
     handler.postDelayed(runnable, 1000)
}

노트 액티비티를 완성했으니, 메인 액티비티로 이동 후, 노트 페이지 여는 부분을 완성해줍니다.

액티비티 간의 데이터를 연결할 수 있도록 인텐트(intent)를 사용합니다.

this로 액티비티 본인을 명시하고, 다음으로 넘어가는 노트 액티비티를 명시합니다.

//노트 페이지 열기
startActivity(Intent(this, NoteActivity::class.java))

메인 액티비티 완성 후, 로그 코드를 작성해 실제 테스트해보니 글을 작성할때마다 글이 저장되는 것을 로그를 통해 확인하실 수 있습니다. 아래 사진은 실제 테스트하여 기록된 로그입니다.

 

이상으로 노트 기능 구현을 마치겠습니다.