스팀 앱 - 개발 완료: 프로필 화면에서 오류 보여주는 레이아웃

개발 완료: 프로필 화면에서 오류 보여주는 레이아웃

---

시작하며...

프로필 화면에서 오류 보여주기를 구현했습니다. 이것은 주로 모바일 인터넷 연결이 끊어졌을 때 발생하는데요. 레이아웃 그리고 추가 수정 코드를 이제야 공유합니다.

오류 보여주는 레이아웃

이 레이아웃은 이미지 뷰 1개와 텍스트 뷰 1개로 구성되어 있습니다.

layout_loading_error.xml

<?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:id="@+id/layout_loading_error"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    (html comment removed:  Image from "https://pixabay.com/ko//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=63628" )
    <ImageView
        android:id="@+id/image_loading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/img_loading_error"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/img_loading_error" />

    <TextView
        android:id="@+id/text_error"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image_loading"
        android:text="Cannot load data.\nCheck internet connection."
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="16sp"
        android:textStyle="bold" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

프로필 화면의 레이아웃에 layout_loading_error 레이아웃 추가

다른 레이아웃들과 동일한 방식으로 include 요소를 활용하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout
    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">

    <data>
        <variable
            name="viewModel"
            type="lee.dorian.steem_ui.ui.profile.ProfileViewModel" />
        <variable
            name="activityViewModel"
            type="lee.dorian.steem_ui.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        (html comment removed:  Show input a Steemit account )
        <include
            android:id="@+id/include_input_account"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            layout="@layout/layout_input_account" />

        (html comment removed:  Loading )
        <include
            android:id="@+id/include_loading"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            layout="@layout/layout_loading" />

        (html comment removed:  Loading error )
        <include
            android:id="@+id/include_loading_error"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            layout="@layout/layout_loading_error" />

        (html comment removed:  content of profile (편의상 생략) )

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

---

오류 레이아웃 보여주는 메소드

ProfileFragment 클래스의 showLoadingError 메소드

private fun showLoadingError() {
    binding.includeInputAccount.layoutInputAccount.visibility = View.GONE
    binding.includeLoading.layoutLoading.visibility = View.GONE
    binding.includeLoadingError.layoutLoadingError.visibility = View.VISIBLE
    binding.scrollProfile.visibility = View.GONE
}

ProfileFragment 클래스에서 상태 값 변화 처리

업데이트 된 상태 값이 State.Error 또는 State.Failure이면, showLoadingError()를 호출하여 오류가 있음을 보여줍니다.

private val profileStateCollector = FlowCollector<State<SteemitProfile>> { newState ->
    when (newState) {
        is State.Empty -> showEmpty()
        is State.Loading -> showLoading()
        is State.Success -> showProfile(newState.data)
        is State.Error, is State.Failure -> showLoadingError()
    }
}

마치며...

이런 저런 사정들로 사이드 프로젝트가 미뤄지기도 했지만, 제가 게을러진 건 아닌가 하는 반성도 해봅니다. 정신차리고 다시 열심히 해보겠습니다.

---

Posted through the ECblog app (https://blog.etain.club)