Lesson 8: App architecture (UI Layer)

💡 Teach Android Development

구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.

Android Development Resources for Educators

Android app architecture

Avoid short-term hacks

• 촉박한 일정 같은 외부 요인으로 인해 앱 디자인 및 구조에 대해 잘못된 결정이 내려질 수 있습니다.
• 결정은 향후 작업에 영향을 미칩니다.(앱을 장기적으로 유지하기 어려울 수 있음.)
• 일정을 맞추는 것과 유지보수 부담간의 균형이 필요합니다.

Examples of short-term hacks

단기 결정에 대한 이러한 예는 기술적 부채로 이어질 수 있으며 유연하고 효율적인 방법으로 앱을 확장하는 것을 어렵게 만들 수 있습니다.

• 많은 기기를 고려하지 않고 특정 기기에 맞게 앱 조정.
• third party code를 완전히 이해하지 않고 복사하여 붙여넣기.
• Acitivty 파일에 모든 비지니스 로직 배치.
• 코드에서 사용자에게 표시되는 문자열 하드코딩.

Why you need good app architecture

우수한 app architecture는 앱이 확장 가능하고 안정적이며 관리하기 쉽습니다.

• 특정 비지니스 로직이 속하는 위치를 명확하게 정의.
• 개발자가 더 쉽게 협업할 수 있습니다.
• 코드를 더 쉽게 테스트할 수 있습니다.
• 이미 해결된 문제를 활용할 수 있습니다.
• 앱 확장에 따른 시간 절약 및 기술적 부채 감소.

Android Jetpack

• Best practice를 통합하고 앱에서 이전 버전과의 호환성을 제공하는 Android 라이브러리.
• Jetpack은 androidx.* package libraries로 구성됩니다.

Separation of concerns

Acitivty, Fragment는 데이터 표시, 사용자 입력, Android 시스템 이벤트를 담당합니다.

ViewModel에는 UI를 그리는 데 필요한 모든 데이터와 이를 최신 상태로 유지하는 기능이 포함되어 있습니다.

Architecture components

• MVVM, MVI와 같은 디자인 패턴은 앱의 구조에 대한 파악을 용이하게 합니다.
• Jetpack architecture components는 강력하고 테스트 가능하며 유지관리 가능한 앱을 설계하는데 도움이 됩니다.

ViewModel

UI 컨트롤러는 주로 사용자에게 정보를 표시하고 이벤트를 처리 역할을 하기 때문에 데이터를 관리는 ViewModel에서 진행합니다.

Gradle: lifecycle extensions

app/build.gradle 파일에 추가해 줍니다.

dependencies {
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
    implementation "androidx.activity:activity-ktx:$activity_version"
}

ViewModel

• UI용 데이터 준비
• Activity, Fragment 또는 View를 참조하지 않습니다.
• lifecycle로 scope가 지정됩니다.(Activity, Fragment에 존재.)
• configuration 변경 시에도 데이터가 유지됩니다.
• scope가 살아있는한 존재합니다.

Lifetime of a ViewModel

ViewModel class

ViewModel 클래스는 추상 클래스이므로 서브클래싱해야 합니다. 더 이상 사용되지 않고 소멸될 때 호출되는 onCleared() 메서드가 있습니다.

Implement a ViewModel

class ScoreViewModel : ViewModel() {
    var scoreA : Int = 0
    var scoreB : Int = 0
    fun incrementScore(isTeamA: Boolean) {
        if (isTeamA) {
            scoreA++
        }
        else {
            scoreB++
        }
    }
}

Load and use a ViewModel

activity-ktx artifact 포함되어있는 by viewModels()를 사용하여 가져옵니다.

class MainActivity : AppCompatActivity() {
    // Delegate provided by androidx.activity.viewModels
    val viewModel: ScoreViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        val scoreViewA: TextView = findViewById(R.id.scoreA)
        scoreViewA.text = viewModel.scoreA.toString()
    }

Data binding

ViewModels and data binding

• data binding 없이 사용할 경우.

  • 중간 UI Controller를 의존하여 통신해야 합니다.
    

• data binding 사용할 경우.

  • viewModel 객체를 dataBinding에 전달하면 view와 viewModel간의 일부 통신을 자동화 할 수 있습니다.

Data binding in XML revisited

data 테그 안에 ViewModel을 지정합니다.

<layout>
   <data>
       <variable>
           name="viewModel"
           type="com.example.kabaddikounter.ScoreViewModel" />
   </data>
   <ConstraintLayout ../>
</layout>

Attaching a ViewModel to a data binding

class MainActivity : AppCompatActivity() {

    val viewModel: ScoreViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this,
            R.layout.activity_main)

        binding.viewModel = viewModel
        ...

Using a ViewModel from a data binding

<TextView
    android:id="@+id/scoreViewA"
    android:text="@{viewModel.scoreA.toString()}" />
        ...

ViewModels and data binding

View가 인스턴스화될 때만 설정되기 때문에 클릭 이벤트가 일어났을 때 업데이트가 필요합니다. 다음 LiveData에서 이 문제를 다룰 것입니다.

override fun onCreate(savedInstanceState: Bundle?) {
    ...
   val binding: ActivityMainBinding = DataBindingUtil.setContentView(this,
        R.layout.activity_main)

   binding.plusOneButtonA.setOnClickListener {
       viewModel.incrementScore(true)
       binding.scoreViewA.text = viewModel.scoreA.toString()
   }
}

LiveData

Observer design pattern

• observer 객체가 주체에 생태 변경이 있을 때 알리기 위해 객체 목록을 유지하는 곳입니다.
• observer는 주체로부터 상태 변경을 수신하여 적절한 코드를 실행합니다.
• observer는 언제든지 추가하거나 제거할 수 있습니다.

Observer design pattern diagram

LiveData

• observe할 수 있는 lifecycle-aware 데이터 홀더
• 모든 데이터와 함께 사용할 수 있는 Wrapper
• ViewModel에서 개별 데이터 필드를 보관하는 데 자주 사용합니다.
• observer(Activity, Fragment에서 사용)를 추가하거나 제거할 수 있는 메서드.
  • observe(owner: LifecycleOwner, observer: Observer)
  • removeObserver(observer: Observer)

LiveData versus MutableLiveData

LiveData(immutable): getValue()

MutableLiveData: getValue(), postValue(value: T), setValue(value: T)

일반적으로 MutableLiveData는 ViewModel에서 private 하게 사용하여 노출 시키지 않고 변경 불가능한 LiveData를 observer에게 노출합니다.

Use LiveData in ViewModel

class ScoreViewModel : ViewModel() {

    private val _scoreA = MutableLiveData<Int>(0)
    val scoreA: LiveData<Int>
        get() = _scoreA

    fun incrementScore(isTeamA: Boolean) {
        if (isTeamA) {
            _scoreA.value = _scoreA.value!! + 1
        } 
        ...

Add an observer on LiveData

ViewModel 메서드를 호출하는 클릭 이벤트를 설정합니다.

binding.plusOneButtonA.setOnClickListener {
    viewModel.incrementScore(true)
}

팀 A의 점수를 업데이트하기 위해 observer를 생성합니다.

val scoreA_Observer = Observer<Int> { newValue ->
    binding.scoreViewA.text = newValue.toString()
}

ViewModel의 scoreA LiveData에 observe를 추가합니다.

viewModel.scoreA.observe(this, scoreA_Observer)

Two-way data binding

• XML에서 LiveData에 바인딩하면 코드에서 observer가 필요하지 않아 코드의 양을 줄 일 수 있습니다.

Example layout XML

<layout>
   <data>
       <variable>
           name="viewModel"
           type="com.example.kabaddikounter.ScoreViewModel" />
   </data>
   <ConstraintLayout ..>
       <TextView ...
           android:id="@+id/scoreViewA"
           android:text="@{viewModel.scoreA.toString()}" />
       ...
   </ConstraintLayout>
</layout>

Example Activity

class MainActivity : AppCompatActivity() {
    val viewModel: ScoreViewModel by viewModels()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil
             .setContentView(this, R.layout.activity_main)
        binding.viewModel = viewModel
        binding.lifecycleOwner = this
        binding.plusOneButtonA.setOnClickListener {
            viewModel.incrementScore(true)
        }
        ...

Example ViewModel

class ScoreViewModel : ViewModel() {
    private val _scoreA = MutableLiveData<Int>(0)
    val scoreA : LiveData<Int>
        get() = _scoreA
    private val _scoreB = MutableLiveData<Int>(0)
    val scoreB : LiveData<Int>
        get() = _scoreB
    fun incrementScore(isTeamA: Boolean) {
        if (isTeamA) {
            _scoreA.value = _scoreA.value!! + 1
        } else {
            _scoreB.value = _scoreB.value!! + 1
        }
    }
}

Transform LiveData

observer에게 전달하기 이전에 LiveData 객체에 저장된 값을 변경할 수 있습니다.
다른 값을 기반으로 하는 다른 LiveData 인스턴스를 반환할 수 있습니다.

Manipulating LiveData with transformations

LiveData는 새로운 LiveData 객체로 변환될 수 있습니다.

observer가 반환된 결과를 observing하지 않는 한 변환은 계산되지 않습니다.

• map()
• switchMap()

Example LiveData with transformations

val result: LiveData<String> = Transformations.map(viewModel.scoreA) { 
    x -> if (x > 10) "A Wins" else ""
}