스팀 앱 개발기 #11 - 검색 레이아웃을 메인 화면에 적용

이번 포스트에서는 지난 포스트에서 보여드린 검색 레이아웃을 메인 화면에 적용하는 과정을 보여 드리고자 합니다.

---

스크린샷

먼저 작업 결과를 보여드리겠습니다. 메인 화면이 시작되면, 아래 그림과 같이 태그 검색 레이아웃이 보입니다.

이 화면에서 Profile 또는 Wallet 탭을 클릭하면, 계정 검색 레이아웃이 뜹니다.

---

activity_main.xml 파일 변경

작업 내용은 다음과 같습니다.

• 데이터 바인딩 적용
• 화면 상단에 태그/계정 검색 레이아웃을 담는 RelativeLayout 레이아웃 추가
  • 태그 선택에 따라 둘 중 하나만 보여 줌
• 검색 레이아웃 추가로 인한 다른 뷰들의 위치, 크기 조정

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

    <data>
        <variable
            name="viewModel"
            type="lee.dorian.steem_ui.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/layout_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent">

            <include
                android:id="@+id/include_tag_lookup"
                layout="@layout/layout_tag_lookup"
                app:viewModel="@{viewModel}" />

            <include
                android:id="@+id/include_account_lookup"
                layout="@layout/layout_account_lookup"
                app:viewModel="@{viewModel}" />

        </RelativeLayout>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_nav_menu" />

        <fragment
            android:id="@+id/nav_host_fragment_activity_main"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:defaultNavHost="true"
            app:layout_constraintBottom_toTopOf="@id/nav_view"
            app:layout_constraintTop_toBottomOf="@id/layout_search"
            app:navGraph="@navigation/mobile_navigation" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

---

MainActivity 클래스 변경

탭 선택에 따라 다른 검색 레이아웃을 보여줘야 합니다.

• Tags 탭 선택: 태그 검색 레이아웃
• 그외 탭 선택: 계정 검색 레이아웃

이것은 탭 선택의 변경을 처리하는 리스너를 구현하면 가능합니다. 탭 선택시 OnDestinationChangedListener의 onDestinationChanged 메소드의 2번째 파라메터인 destination의 값으로 어떤 탭이 선택되었는지 파악할 수 있습니다. Tags 탭을 선택하면 이 파라메터의 값은 R.id.navigation_tags입니다. 이 값이면, 태그 검색 레이아웃을 보여주면 되는 거고요. 다른 값이면, 계정 검색 레이아웃을 보여주면 됩니다. 구현한 코드는 아래와 같습니다.

private val navDestinationChangedListener = NavController.OnDestinationChangedListener { _, dest, _ ->
    supportActionBar?.setTitle(viewModel.readTitle(dest.id))
    setViewVisibilities(dest.id)
}

fun setViewVisibilities(destID: Int) {
    val layoutTagLookup = binding.includeTagLookup.layoutTagLookup
    val layoutAccountLookup = binding.includeAccountLookup.layoutAccountLookup

    when (destID) {
        R.id.navigation_tags -> {
            layoutTagLookup.visibility = View.VISIBLE
            layoutAccountLookup.visibility = View.GONE
        }
        else ->  {
            layoutTagLookup.visibility = View.GONE
            layoutAccountLookup.visibility = View.VISIBLE
        }
    }
}

이 리스너의 적용은 NavController 객체의 addOnDestinationChangedListener(listenr) 메소드를 호출하면 됩니다.

navController.addOnDestinationChangedListener(navDestinationChangedListener)

---

GitHub Commit

• Added tag lookup layout and account lookup layout into MainActivity

---

지난 스팀 앱 개발기

• #10 - 태그 및 계정 검색 레이아웃 만들기
• #9 - BaseActivity 클래스 정의 그리고 MainActivity 클래스에 적용
• #8 - BaseFragment 클래스 정의 그리고 기존 프래그먼트들에 적용
• #7 - ProfileFragment 그리고 WalletFragment에 데이터 바인딩 적용
• #6 - 태그별 검색 내용을 보여줄 TagsFragment에 데이터 바인딩 적용
• #5 - GitHub에 소스 올리기
• #4 - 하단 내비게이션의 탭 관련 클래스 이름 수정
• #3 - 하단 내비게이션 바의 아이콘, 텍스트 수정
• #2 - 프로젝트 생성
• #1 - 시작하며...