책 검색 앱 만들기 (1) - View Binding, BottomNavigationView

  ->  구글 앱 아키텍쳐 패턴을 이용해   카카오 책 검색 앱을 만들도록 하겟습니다.

---

• 3개의 Fragment
• Activity
• 뷰바인딩
• BottomNavigationView

 

View.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.view.MainActivity">

    <FrameLayout
        android:id="@+id/FrameLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation_memu"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_memu"
        app:itemIconTint="@color/black"
        app:itemTextColor="@color/purple_200"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:menu="@menu/bottom_navigation_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

• itemIconTint : 아이콘 색상을 변경해줌
• itemTextColor :  이름 색상을 변경해줌

 

•   res/values/string.xml

<resources>
    <string name="app_name">카카오책</string>
    <string name="search">검색</string>
    <string name="favorite">좋아요</string>
    <string name="settings">설정</string>
</resources>

 

• BottomNavigation.xml

-> res / android resource file 클릭해 menu 파일을 생성해준다

---

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/fragment_search"
        android:title="@string/search"
        android:icon="@drawable/ic_baseline_search_24"/>
    <item android:id="@+id/fragment_favorite"
        android:title="@string/favorite"
        android:icon="@drawable/ic_baseline_favorite_24"/>
    <item  android:id="@+id/fragment_settings"
        android:title="@string/settings"
        android:icon="@drawable/ic_baseline_settings_24"/>

</menu>

 

• ui.view 프래그먼트

---

package com.example.kakaobook.ui.view

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.kakaobook.databinding.FragmentFavoriteFrgmentBinding


class FavoriteFragment : Fragment() {
 private var mbinding : FragmentFavoriteFrgmentBinding? = null
    private val binding get() = mbinding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mbinding = FragmentFavoriteFrgmentBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onDestroyView() {
        mbinding = null
        super.onDestroyView()
    }
}

package com.example.kakaobook.ui.view

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.kakaobook.databinding.FragmentSearchBinding


class SearchFragment: Fragment() {
    private var mbinding: FragmentSearchBinding? = null
    private val binding get() = mbinding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mbinding = FragmentSearchBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onDestroyView() {
        mbinding = null
        super.onDestroyView()
    }
}

package com.example.kakaobook.ui.view

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.kakaobook.databinding.FragmentSettingsFrgmentBinding


class SettingsFragment: Fragment() {
    private var mbinding: FragmentSettingsFrgmentBinding? = null
    private val binding get() = mbinding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mbinding = FragmentSettingsFrgmentBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onDestroyView() {
        mbinding = null
        super.onDestroyView()
    }
}

 

 

• ui.view 액티비티

package com.example.kakaobook.ui.view

import android.os.Bundle
import android.provider.Settings
import android.text.TextUtils.replace
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.example.kakaobook.R
import com.example.kakaobook.databinding.ActivityMainBinding
import com.example.kakaobook.databinding.FragmentFavoriteFrgmentBinding
import com.example.kakaobook.databinding.FragmentSearchBinding
import com.example.kakaobook.databinding.FragmentSettingsFrgmentBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private lateinit var fragmentSettingsFrgment: SettingsFragment
    private lateinit var fragmentFavoriteFrgment: FavoriteFragment
    private lateinit var fragmentSearchFragment: SearchFragment

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        fragmentFavoriteFrgment = FavoriteFragment()
        fragmentSettingsFrgment = SettingsFragment()
        fragmentSearchFragment = SearchFragment()
    
        //처음 실행했을떄 화면을 보여준다.
        replaceFragment(fragmentSearchFragment)
        BottomNavigationMenuView()
    }
    private fun BottomNavigationMenuView() {
        binding.bottomNavigationMemu.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.fragment_search -> replaceFragment(fragmentSearchFragment)
                R.id.fragment_favorite -> replaceFragment(fragmentFavoriteFrgment)
                R.id.fragment_settings -> replaceFragment(fragmentSearchFragment)
            }
            true
        }
    }
    //프래그먼트 동적제어
    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .apply {
                replace(binding.FrameLayout.id, fragment)
                    .commit()
            }
    }
}