[Android Studio] 탭바 만들기 _ 라이브러리 설치 및 사용 방법

탭바 만들기 _ 라이브러리 설치 및 사용 방법

 

 

1. 탭바를 만들기 위한 라이브러리 설치

- bulid.gradle.kts (Module)에 작성

dependencies {
    implementation("androidx.navigation:navigation-fragment:2.5.3")
    implementation("androidx.navigation:navigation-ui:2.5.3")
}

 

 

2. 메인 액티비티의 RelativeLayout 추가하고, main과 연결한다.

2-1. 메인 액티비티에 BottomNavigationView 넣고 밑에 있는 탭바로 설정하기

 

 

 

- 설정된 코드

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottonNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FFFFFF" />

 

 

 

 

 

 

 

3. 내비게이션 폴더를 만들고 사용한다.

 

3-1. 방금 만든 내비게이션 리소스 파일 안에서 프레그먼트 화면 만들기

- 원하는 프레그먼트 선택

- 3개의 탭바 아이콘을 만들 예정이어서 3가지의 Fragment를 만들었다.

 

 

4. 메인 액티비티와 프레그먼트 연결

- NavHostFragment를 가져와서 RelativeLayout에 넣어준다.

 

 

- 설정된 코드

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottonNavigationView"
    app:defaultNavHost="true"
    app:navGraph="@navigation/my_nav" />

 

 

 

 

 

 

5. 프레그먼트 화면을 잘 만들었다면, res/layout에 내가 만든 프레그먼트의 XML 파일이 있다.

   xml 파일과 같이 생성된 java파일을 활용하여 원하는 화면을 세팅한다.

 

 

6. 탭바에 아이콘 만들기

- Resource Directoty를 menu 타입으로 만들기

- menu 폴더 안에 Menu Resource File 만들기 (밑에 있는 탭바여서 이름을 bottom_menu로 지정함.)

6-1. 메뉴에 아이콘 설정

- 3가지 아이콘 종류를 가진 탭바를 만들기 위해 3개의 Menu Item 설정

 

 

7. 메인 액티비티의 bottonNagigationView에 내가 만든 bottom_menu를 이어준다.

- 이어진 상태

 

8. 화면 아이콘을 선택했을 때 해당 프레그먼트로 화면이 대체될 수 있도록 설정하기

- 메인액티비티 자바 파일에서 설정한다.

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;

    // 각각의 프레그먼트들을 멤버 변수로 만든다.
    Fragment firstFragment;
    Fragment secondFragment;
    Fragment thirdFragment;

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

        bottomNavigationView = findViewById(R.id.bottonNavigationView);

        firstFragment = new FirstFragment();
        secondFragment = new SecondFragment();
        thirdFragment = new ThirdFragment();

        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {

                int itemId = menuItem.getItemId();

                Fragment fragment = null;

                if (itemId == R.id.firstFragment) {
                    fragment = firstFragment;
                } else if (itemId == R.id.secondFragment) {
                    fragment = secondFragment;
                } else if (itemId == R.id.thirdFragment) {
                    fragment = thirdFragment;
                }
                return loadFragment(fragment);
            }
        });
    }

    // 프레그먼트 영역을 내가 선택한 것으로 대체해라 라는 함수이다.
    boolean loadFragment(Fragment fragment){
        if(fragment != null){
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment, fragment).commit();
            return true;
        }else {
            return false;
        }
    }
}