Tab 구현하기

상단 Tab 구성하기

직접 customizing해서
상단 actionBar를 자동으로 붙이지 않고,
직접 activityMain에 작성할것임

1. 구조

Main xml에 아래 태그와 같이 구성한다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <androidx.coordinatorlayout.widget.CoordinatorLayout>

        <com.google.android.material.appbar.AppBarLayout>

            <androidx.appcompat.widget.Toolbar>
                <TextView>
            </androidx.appcompat.widget.Toolbar>

            <com.google.android.material.tabs.TabLayout>

        </com.google.android.material.appbar.AppBarLayout>

        <FrameLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</RelativeLayout>

2. AppBarLayout

main xml에 직접적으로 actionBar을 추가할 때 사용되는 material이다.
이때, toolBar안에는 Textview로 제목을 추가한다.

3. Buildgradle file

gradle은 빌드를 할 때 사용되는 폴더
그중에
Gradle Scripts > build.gradle.kts(Module:app)
을 보면 dependencies 값이 존재함

이때, 내가 layout에서 추가적인 material을 다운하여 사용하다면
dependencies에 그 material이 포함된 implementation과 버전정보가 기록된다.

dependencies {

    implementation("androidx.appcompat:appcompat:1.6.1")
    implementation("com.google.android.material:material:1.9.0")
    implementation("androidx.constraintlayout:constraintlayout:2.1.4")
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.5")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
}

4.

res>values>themes>themes.xml
에서 기본적인 theme에 대한 정보 수정가능
지금은 자동으로 ActionBar이 생기는 부분을 NoActionBar로 수정해줌

5. TabLayout

main xml에서 AppBarLayout안에 toolbar하단에
TabBar을 추가하는 태그이다.

그리고 ActionBar하단에
FramLayout을 추가하여, tab option select에 따른 fragment전환을 해본다.

6. fragment 구성

각 fragment명의 클래스르 만들어 layout을 붙여서 inflater로 리턴한다.

public class fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

7. 기본적인 mainActivty 설정

toolbar와 ActionBar를 main에 띄운다.

toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);

8. tab + fragment 설정

실질적인 layout들 불러오기 + tab 버튼 추가

fragment1 = new fragment1();
        fragment2 = new fragment2();
        fragment3 = new fragment3();

        getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();
        //처음 화면은 fragment1로 설정

        TabLayout tabs = findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("Callings"));
        tabs.addTab(tabs.newTab().setText("Spams"));
        tabs.addTab(tabs.newTab().setText("Numbers"));

9. OnTabSelectedListener설정

getPosition으로 선택된 탭의 position을 불러오고
그 position에 따라 getSupportFragmentmanager로 container에 들어갈
fragment를 replace한다.

@Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                if (position == 0){
                    getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();
                }else if (position == 1){
                    getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment2).commit();
                } else if (position == 2) {
                    getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment3).commit();
                }
            }

하단 Tab

1. BottomNavigationView

xml 에 추가되는 bottom tab에 대한 material이다.

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:itemBackground="@color/design_default_color_primary"
        app:itemIconTint="@drawable/item_color"
        app:itemTextColor="@drawable/item_color"
        app:menu="@menu/menu_bottom"
        />

그리고 그 밑에는 동일하게
fragment가 들어갈 FrameLayout을 구성한다.

2. fragment 구성

상단 tab과 동일한 구성이다

key point

return inflater.inflate(R.layout.fragment1, container, false);

3. setOnItemSelectedListener(bottom navigation)

bottom navigation을 bottomNavigationView의 변수에 갖다가 붙임

BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);

기능구현 setOnItemSelectedListener

bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int itemId = item.getItemId();
                if (itemId == R.id.tab1) {
                    getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();
                } else if (itemId == R.id.tab2) {
                    getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment2).commit();
                } else if (itemId == R.id.tab3) {
                    getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment3).commit();
                }
                return true;
            }
        });

if-else문은 당연하고

getSupportFragmentManager().beginTransaction().replace(R.id.container, fragment1).commit();

를 이용해서 fragment를 변경시켜준다.