내 인생 이대로 ㅈ될 수 없다

코틀린 기반으로 쓰여짐

구글에서는 안드로이드 제트팩의 일부분인 프레그먼트를 지원하며 이를 권장한다.

https://developer.android.com/guide/components/fragments?hl=ko 

쉽게 얘기하면 밑에 네비게이션 바가 있고 이를 누르면 전체 페이지가 바뀌는게 아니라 아래 네비게이션 바는 그대로 두고 위의 내용만 바뀌는거다.

1) 뷰바인딩 활성화하기

이번 예제에서는 뷰 바인딩을 이용하여 프레그먼트를 구현해볼것이다.

안드로이드 아래에다 추가해주면 된다.

buildFeatures {
    viewBinding true
}

2)프레그먼트 만들어주고 꾸미기

프레그먼트 디렉토리 하나 만들어주고 빈 프레그먼트(원하는 갯수만큼) 만들어 주면 된다.

그런 다음 프레그먼트간 구분이 가게 해준다. 여기서는 꾸미기 귀찮으니까 첫째 두번쨰 세번쨰 이런식으로만 하겠음.

3) 뷰바인딩 이용하기

package com.example.navigation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.navigation.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private val binding : ActivityMainBinding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)
    }
}

binding 선언해주고 쓰면된다.

프레그먼트에 뷰 바인딩 적용하는 방법은 조금 다르다.

아래와 같이 해주면 된다

package com.example.navigation.Fragment

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


class FirstFragment : Fragment() {
    private var _binding: FragmentFirstBinding? = null
    private val binding: FragmentFirstBinding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        _binding = FragmentFirstBinding.inflate(inflater, container, false)
        return binding.root
    }
    override fun onDestroyView() {
        _binding = null
        super.onDestroyView()
    }
}

이런식으로 모든 프레그먼트에 다 적용 해주면 된다.

4)이미지 파일 추가하기

drawable 파일 밑에 원하는 이미지를 추가해준다

안드로이드 스튜디오 자체적으로도 지원한다. 만약에 찾기 귀찮으면 저기서 적당한 이미지 파일 찾아서 쓰면 된다.

5)네비게이션 뷰 리소스 추가해주기

리소스 아래에 안드로이드 리소스파일을 하나 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/fragment_first"
        android:title="first"
        android:icon="@drawable/ic_first_24"/>
    <item android:id="@+id/fragment_second"
        android:title="second"
        android:icon="@drawable/ic_second_24"/>
    <item android:id="@+id/fragment_third"
        android:title="third"
        android:icon="@drawable/ic_third_24"/>
</menu>

바텀 네비게이션 메뉴에 아이템들을 추가해준다.

6)메인 엑티비티 꾸미기

<?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=".MainActivity">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view"
        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_view"
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

프레그먼트 공부하면서 알았는데 디자인에 관련된 표준안도 있었다. 

표준안에 따르면 네비게이션 바의 높이는 56dp 이다.

https://developer.android.com/guide/topics/ui/look-and-feel?hl=ko 

7) 메인엑티비티에 기능 추가해주기

package com.example.navigation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.navigation.Fragment.FirstFragment
import com.example.navigation.Fragment.SecondFragment
import com.example.navigation.Fragment.ThirdFragment
import com.example.navigation.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private val binding : ActivityMainBinding by lazy {
        ActivityMainBinding.inflate(layoutInflater)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

        setupBottomNavigationView()
    }

    private fun setupBottomNavigationView() {
        binding.bottomNavigationView.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.fragment_first -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.frame_layout, FirstFragment())
                        .commit()
                    true
                }
                R.id.fragment_second -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.frame_layout, SecondFragment())
                        .commit()
                    true
                }
                R.id.fragment_third -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.frame_layout, ThirdFragment())
                        .commit()
                    true
                }
                else -> false
            }
        }
    }


}

완성된 페이지

참고

https://www.inflearn.com/course/알기쉬운-modern-android