안드로이드 독학 24일차 : BottomNavigation 만들기

이번에 내가 하려는 프로젝트에서 바텀 네비게이션을 쓰기 위해 Fragment에 대해서 공부도 하고

BottonNavigation에 대해서 공부도 했다.

 

일단 BottonNavigation에 대해서 설명하기에 앞서서 내가 이전에 공부한 Frament를 보고와야지 좀더 이해가

빠를것 같다.

 

https://wpioneer.tistory.com/163?category=1011784 

안드로이드 독학 23일차 : Fragment란?

 

그럼 이제 시작!!

 

 

 

BottonNavigation을 만들려면 아래와 같은 과정을 거쳐야 한다.

 

1. builde.gradle에 dependencies 추가

2. menu 리소스 폴더 생성후 menu item 만들기

3. BottomNavigation을 사용할 layout에 FrameLayout추가하고 BottomNavigation 만들기

4. Frament Class 생성및 layout 만들기

5. BottomNavigation을 사용할 Activity에 Fragment 추가하기

 

 

 

그럼 각각의 과정에 대해서 자세히 알아보자.

 

1. builde.gradle에 dependencies 추가

이건 그냥 build.gradle(Module: app) 파일에서 dependencies 부분에 아래 내용을 추가해주면 된다.

    //바텀 네비게이터 사용을 위해서
    implementation 'androidx.navigation:navigation-fragment:2.3.2'
    implementation 'androidx.navigation:navigation-ui:2.3.2'

 

 

 

2. menu 리소스 폴더 생성후 menu item 만들기

이 부분은 menu 리소스 폴더를 res 파일에서 생성을 하면 된다.

 

위 부분을 클릭을 하면 아래와 같은 화면이 뜰텐데 거기서 아래와 같이 설정후

 

 

OK 버튼을 눌러주면 menu 리소스 파일이 생긴다. 거기서 새로운 menu resource 파일을 만들어주면 된다.

 

 

 

그리고 아래처럼 본인 상황에 맞게 아이템을 만들어주면 된다.

 

bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/ic_baseline_home_24"
        android:enabled="true"/>
    <item
        android:id="@+id/like"
        android:title="찜"
        android:icon="@drawable/ic_baseline_favorite_24"
        android:enabled="true"/>
    <item
        android:id="@+id/mypage"
        android:title="마이페이지"
        android:icon="@drawable/ic_baseline_person_24"
        android:enabled="true"/>
</menu>

 

icon 같은 경우는 File -> New -> Vector Asset을 눌러서 아이콘을 추가해줘서 추가한 icon으로 설정을 해줬다.

 

 

 

 

3. BottomNavigation을 사용할 layout에 FrameLayout추가하고 BottomNavigation 만들기

 

그럼 이제 위에서 할것은 BottomNavigation을 사용할 layout에 FrameLayout을 만들고 

BottomNavation을 만들어 줘야 한다.

FrameLayout이 뭔지 모르는 사람들은 아래 링크를 통해서 확인해보면 왜 사용하는지 알수 있을것 같다.

https://ddioniii.tistory.com/3

[Android/Java] FrameLayout (프레임 레이아웃)

 

그럼 이제 소스를 보자.

 

bottomnav_container.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_frame"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottonNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="#fff"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/bottom_nav"/>
</RelativeLayout>

이렇게 만들면 일단 화면은 아래와 같이 만들어진다.

 

그럼 이제 절반은 성공한것이다.

이제 우리가 할것은 데이터바인딩만 해주면 된다.

 

 

 

 

4. Frament Class 생성및 layout 만들기

 

이부분은 이제 Fragment 클래스랑 그에 사용할 layout을 만들어주면 된다.

 

나는 아래와 같이 layout을 만들었다.

 

mainpage_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <Button
        android:id="@+id/hot_cafe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="요즘 핫한 카페"/>
    <Button
        android:id="@+id/search_cafe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/hot_cafe"
        android:text="카페 검색하기"/>
</RelativeLayout>

 

그리고 Fragment 만들어서 해당 클래스에 위에서 만든 layout을 연결해준다.

 

HomeFragment Class

public class HomeFragment extends Fragment {

    private View view;
    private String TAG = "HomeFragment";

    //만든 layout inflate해서 View 객체를 얻어옴
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        Log.i(TAG,"onCreatView");
        
        //layoyt 불러와서 해당 layout inflate 시켜서 view create 한다.
        view = inflater.inflate(R.layout.mainpage_mainpage,container,false);
        return view;
    }
}

 

(나머지도 이와 같이 소스를 짰다)

 

 

 

5. BottomNavigation을 사용할 Activity에 Fragment 추가하기

 

이제 마지막 단계인 사용할 Activity에 Fragment를 추가하는것이다.

 

소스에 대한 자세한 설명은 주석으로 달아놨으니 확인해보면 될것 같다.

public class MainPage extends AppCompatActivity {

    //바텀 네비게이션 객체 변수
    BottomNavigationView btnv;

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

        //바텀 네비게이션 객체를 받아옴
        btnv = findViewById(R.id.bottonNav);

        //Fragment매니저를 불러와서 mainpage_mainpage_container.xml안에 Fragment들을 겹쳐서 보여줄 FrameLayout에 HomeFragment를 연결해서 화면에 띄움
        getSupportFragmentManager().beginTransaction().add(R.id.main_frame,new HomeFragment()).commit();

        //바텀 네비게이션에서 아이템이 클릭됐을때의 리스너를 설정함
        btnv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch(menuItem.getItemId()){
                    case R.id.home :
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame,new HomeFragment()).commit();
                        break;
                    case R.id.like :
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame,new LikeFragment()).commit();
                        break;
                    case R.id.mypage :
                        getSupportFragmentManager().beginTransaction().replace(R.id.main_frame,new MyPageFragment()).commit();
                        break;
                }
                return true;
            }
        });
    }
}