오늘의 명언 앱 개발하기

Side Project - Today Famous Saying
화면을 스와이프하며 오늘의 명언들을 볼 수 있는 앱을 구현한 프로젝트

 

• GitHub -> https://github.com/hwayeon351/Today-Famous-Saying

GitHub - hwayeon351/Today-Famous-Saying

---

학습 회고

오늘은 Firebase Remode Config를 활용해서 명언들을 ViewPager2에 보여주는 오늘의 명언 앱 개발을 시작하였다.

 

---

오늘 공부한 내용

• ViewPager2

ViewPager2는 스와이프 할 수 있는 뷰나 프래그먼트를 화면에 표시하는 객체이다.

페이지 간 전환을 위한 스와이프 동작이 내장되어 있어 기본적으로 화면 슬라이드 애니메이션을 표시해준다.

기존의 ViewPager는 PagerAdapter를 기반으로 구성되었는데 ViewPager2는 RecyclerView를 기반으로 만들어진 컴포넌트이다.

VIewPager2를 구현하는 과정은 다음과 같다.

 

1. 뷰 만들기

스와이프 하였을 때 표현할 레이아웃을 만든다.

오늘의 명언 앱에서는 명언과 인물을 TextView에 보여주기 위해 다음과 같이 뷰를 구성하였다.

<?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">

    <TextView
        android:id="@+id/quoteTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="end|center_vertical"
        app:layout_constraintBottom_toTopOf="@+id/nameTextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="나는 생각한다 고로 나는 존재한다." />

    <TextView
        android:id="@+id/nameTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="end|center_vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/quoteTextView"
        app:layout_constraintStart_toStartOf="@id/quoteTextView"
        app:layout_constraintTop_toBottomOf="@id/quoteTextView"
        tools:text="데카르트" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

2. 뷰 컨텐츠에 들어갈 데이터 클래스 정의

각각의 페이지에 명언과 인물을 text로 보여줄 것이기 때문에 Quote 데이터 클래스를 만들어 주었다.

package com.example.today_famous_saying

data class Quote(
    val quote: String,
    val name: String
    )

 

3. PagerAdapter 구현하기

ViewPager2는 RecyclerView 기반이기 때문에 RecyclerView Adapter를 구현하는 것과 동일하다.

package com.example.today_famous_saying

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class QuotesPagerAdapter(
    private val quotes: List<Quote>
): RecyclerView.Adapter<QuotesPagerAdapter.QuoteViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
        QuoteViewHolder(
            LayoutInflater.from(parent.context)
                .inflate(R.layout.item_quote, parent, false)
        )

    override fun onBindViewHolder(holder: QuoteViewHolder, position: Int) {
        holder.bind(quotes[position])
    }

    override fun getItemCount() = quotes.size

    class QuoteViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        private val quoteTextView: TextView = itemView.findViewById<TextView>(R.id.quoteTextView)
        private val nameTextView: TextView = itemView.findViewById<TextView>(R.id.nameTextView)

        fun bind(quote:Quote) {
            quoteTextView.text = quote.quote
            nameTextView.text = quote.name
        }
    }

}

 

4. ViewPager2에 Adapter 적용하기

private fun initViews() {
    viewPager.adapter = QuotesPagerAdapter(
        listOf(
            Quote(
                "나는 생각한다. 고로 나는 존재한다.",
                "데카르트"
            )
        )
    )
}

 

 

 

• ViewPager에서 ViewPager2로 이전

ViewPager 역시 스와이프 할 수 있는 뷰나 프래그먼트를 화면에 표시하는 객체이다.

페이지 간 전환을 위한 스와이프 동작이 내장되어 있어 기본적으로 화면 슬라이드 애니메이션을 표시해준다는 점은 동일하다.

 

ViewPager2는 ViewPager의 개선된 버전으로 향상된 기능을 제공한다.

현재 ViewPager2는 구글에서 업데이트를 계속하고 있지만 ViewPager는 그렇지 않다.

따라서 ViewPager2로 이전해서 사용해야 한다.

 

ViewPager2로 이전하여 얻을 수 있는 이점은 다음과 같다.

 

1. 세로 방향 지원

ViewPager2는 가로 페이징 뿐만 아니라 세로페이징도 지원한다.

andorid:orientation 속성을 설정하거나 setOrientation() 메서드를 사용해서 ViewPager2 요소의 페이징 방향을 설정할 수 있다.

<androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:orientation="vertical" />

 

2. RTL 페이징 지원

VIewPager2는 오른쪽에서 왼쪽으로의 페이징을 지원한다.

RTL 페이징은 언어에 따라 해당하는 경우 자동으로 설정되지만 android:layoutDirection 속성을 설정하거나 setLayoutDirection() 메서드를 사용해서 설정할 수 있다.

<androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layoutDirection="rtl" />

 

3. notifyDatasetChanged()를 사용해서 UI 업데이트 가능

ViewPager2는 런타임 시 프래그먼트 컬렉션을 동적으로 수정할 수 있고 ViewPager2는 수정된 컬렉션을 올바르게 표시한다.

 

4. DiffUtil

ViewPager2는 RecyclerView를 기반으로 빌드되기 때문에 DiffUtil 유틸리티 클래스에 액세스 할 수 있다.