[Java][Android] 바텀 네비게이션 with 프래그먼트 만들기

이번시간에는 안드로이드 자바로 바텀네비게이션을 만들어보려고합니다.

 

빠르고 쉽게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다. 

 

스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고, 

다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 

좋은 코드가 쌓일수록 강력해지는 플러그인 입니다. 

 

 

프로젝트생성

새로운 프로젝트를 생성해줍니다.  

 

빌드 스크립트 설정

이번시간에는 마테리얼 디자인에서 제공하는 바텀네비게이션을 사용해보겠습니다.

 

먼저 gradle 파일에 들어가서 dependencies 에 아래와 같이 추가해주시고, sync Now 를 해주시면 됩니다.

dependencies {
    // 마테리얼 디자인
    implementation 'com.google.android.material:material:1.3.0'
}

 

XML 파일 설정

프로젝트 생성시 생성된 activity_main.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=".MainActivity">

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

    </FrameLayout>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@android:color/white"
        app:labelVisibilityMode="unlabeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_menu"/>


</androidx.constraintlayout.widget.ConstraintLayout>

바텀네비게이션은 메뉴파일을 아래와 같이 첨부해주어야 합니다. 

app:menu="@menu/bottom_menu" 

 

현재 bottom_menu 파일이 없기 때문에 만들어주겠습니다.

 

res 폴더에 menu 폴더를 만들고, 

bottom_menu.xml 파일을 만들어줍니다.

 

저는 bottom_menu.xml 파일의 셋팅을 스틱코드에 저장해서 사용했습니다. 

아래와 같이 bottom_menu.xml에서 스틱코드를 사용해보겠습니다.

bottom_menu_setting 포스팅을  사용하면 자동완성되는 것을 확인 하실 수 있습니다. 

출처 : stickode.com/detail.html?no=1893

xml 기본정보가 셋팅 된것을 확인 할 수 있습니다. 

 

icon은 원하는 icon을 다운받아 설정해주시면 됩니다. 

item 의 id, title도 본인에게 맞게 변경해주시면 됩니다.

(*참고: 바텀네비게이션의 아이템은 5개까지 가능합니다.)

 

이제 bottom_menu.xml 파일의 셋팅이 끝났습니다. 

이 파일이 메인 XML 파일에 menu 옵션으로 설정이 됩니다. 

(*참고: labelVisibilityMode 를 수정하여 메뉴 아이템의 타이틀을 보이게 처리할 수 있습니다.)

 

이제 다음과 같은 화면이 만들어졌습니다.

 

바텀 네비게이션의 위 화면은 프래그먼트로 구성해주겠습니다. 

 

해당 메뉴에 들어갈 프래그먼트를 생성해보겠습니다. 

 

프래그먼트 생성

프래그먼트로 사용할 클래스 파일을 생성해줍니다.

저는 다음과 같이 프래그먼트로 사용할 클래스파일들을 생성해주었습니다.

 

새로운 클래스파일에 프래그먼트를 상속해주고, 

 

스틱코드를 사용하여 프래그먼트를 기본 셋팅을 해주었습니다. 

출처 : stickode.com/detail.html?no=1892

레이아웃은 XML 파일을 만들어주시면됩니다. 

 

저는 아래와 같이 간단한 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="홈 프래그먼트"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

이와 같은 방법으로 바텀네비게이션의 개수가 4개임으로 

4개의 프래그먼트 클래스 파일을 만들어주었습니다.

바텀네비게이션 클릭 설정

이제 마지막으로 메인액티비티로 이동해 

바텀네비게이션을 클릭하면 해당 프래그먼트가 보이도록 설정해보록하겠습니다. 

 

메인액티비티에서 프래그먼트와 바텀네비게이션을 선언해주겠습니다.

이제 변수선언이 끝났으니 

바텀네비게이션의 클릭리스너를 만들어보도록 하겠습니다. 

 

클릭 리스너 또한 스틱코드를 통해 만들어보겠습니다.

출처 : stickode.com/detail.html?no=1894 

아래와 같이 초기 셋팅이 완료된 클릭리스너가 단숨에 만들어졌습니다. ^^

이제 메뉴 아이템의 id를 switch문에 case id로 넣어주어 어떤 어아템을 선택했는지 알수있도록 수정해 보겠습니다. 

 

해당 아이템을 클릭하면 아이템에 맞는 프래그먼트로 변경되게 설정해 주었습니다. 

 

이제 한번 실행해보도록 하겠습니다.

 

이렇게 바텀 네비게이션을 스틱코드를 이용하여 손쉽게 만들어 보았습니다.

 

 

아래 코드는 mainActivity 전문입니다.

package com.example.mytestapp;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import android.os.Bundle;
import android.util.Log;
import android.view.MenuItem;

import com.example.mytestapp.Fragment.FragFriend;
import com.example.mytestapp.Fragment.FragHome;
import com.example.mytestapp.Fragment.FragHotel;
import com.example.mytestapp.Fragment.FragStar;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    // 바텀 네비게이션
    BottomNavigationView bottomNavigationView;
    
    private String TAG = "메인";

    // 프래그먼트 변수
    Fragment fragment_home;
    Fragment fragment_star;
    Fragment fragment_group;
    Fragment fragment_hotel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 프래그먼트 생성
        fragment_home = new FragHome();
        fragment_star = new FragStar();
        fragment_group = new FragFriend();
        fragment_hotel = new FragHotel();


        // 바텀 네비게이션
        bottomNavigationView = findViewById(R.id.bottomNavigationView);

        // 초기 플래그먼트 설정
        getSupportFragmentManager().beginTransaction().replace(R.id.main_layout, fragment_home).commitAllowingStateLoss();


        // 바텀 네비게이션
        bottomNavigationView = findViewById(R.id.bottomNavigationView);


        // 리스너 등록
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Log.i(TAG, "바텀 네비게이션 클릭");

                switch (item.getItemId()){
                    case R.id.home:
                        Log.i(TAG, "home 들어옴");
                        getSupportFragmentManager().beginTransaction() .replace(R.id.main_layout,fragment_home).commitAllowingStateLoss();
                        return true;
                    case R.id.star:
                        Log.i(TAG, "star 들어옴");
                        getSupportFragmentManager().beginTransaction() .replace(R.id.main_layout,fragment_star).commitAllowingStateLoss();
                        return true;
                    case R.id.group:
                        Log.i(TAG, "group 들어옴");
                        getSupportFragmentManager().beginTransaction() .replace(R.id.main_layout,fragment_group).commitAllowingStateLoss();
                        return true;
                    case R.id.hotel:
                        Log.i(TAG, "hotel 들어옴");
                        getSupportFragmentManager().beginTransaction() .replace(R.id.main_layout,fragment_hotel).commitAllowingStateLoss();
                        return true;
                }
                return true;
            }
        });


        

    }
}

 

이 예제에서 사용된 스틱코드

출처 : stickode.com/detail.html?no=1893 - 바텀 메뉴 XML 셋팅 

출처 : stickode.com/detail.html?no=1892 - 프래그먼트 초기셋팅

출처 : stickode.com/detail.html?no=1894 -바텀네비게이션 클릭 리스너