[부스트코스]안드로이드 탭(Tab)

탭 버튼(TAB)

탭은 sdk가 제공하는 위젯을 사용할 수도 있고, 직접 만들 수도 있다.

탭은 카카오톡, 인스타그램, 페이스북과 같은 sns와 많은 어플의 화면 구성에 활발하게 사용되고 있다.

 

탭의 구성방법으로는 activity버튼과 famelayout(프레임 레이아웃)이라는 위젯을 배치하여 전체적인 레이아웃을 구성하여 버튼 선택시, 해당되는 fragment를 띄우는 방식으로 구현된다.

따라서, 쉽게 설명하면 버튼을 누르면 그 버튼에 해당되는 fragment가 프레임레이아웃에 실행

아래의 코드 참조

 

MainActivity.java

package com.example.actionbar_ex;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.ScrollingTabContainerView;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;

import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;

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

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

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();

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

        TabLayout tabs = (TabLayout)findViewById(R.id.tabs);

        tabs.addTab(tabs.newTab().setText("친구"));
        tabs.addTab(tabs.newTab().setText("일대일채팅"));
        tabs.addTab(tabs.newTab().setText("기타"));

        tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                //몇번째탭인지 인덱스값이 넘어옴

                Fragment selected = null;
                if(position==0){
                    selected = fragment1;
                }
                else if(position ==1){
                    selected = fragment2;
                }
                else if(position == 2){
                    selected = fragment3;
                }
                getSupportFragmentManager().beginTransaction().replace(R.id.container, selected).commit();
            }


            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });



    }
}

activity_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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                android:id="@+id/toolbar">

            </androidx.appcompat.widget.Toolbar>

            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/background_light"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextColor="@color/colorPrimary"
                app:tabSelectedTextColor="@color/colorAccent">

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

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/container">

        </FrameLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>

fragment.xml (1,2,3 형식 동일)

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="593dp"
        android:gravity="center"
        android:text="@string/fragment1"
        android:textColor="#000000"
        android:textSize="30sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/next">

    </Button>

</LinearLayout>

Fragment.java(1,2,3 동일)

package com.example.actionbar_ex;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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

        return rootview;
    }
}

 

---

!내가 발견한 오류!

xml파일에서 android:text="next"에서 오류가 발생해서

strings.xml이라는 파일을 따로 생성하여 스트링으로 쓸 수 있게 만들었다.

fragment.xml파일에서 android:text="@string/next"로 작성해주면 오류가 해결된다.

<resources>
    <string name="app_name">Actionbar_ex</string>
    <string name="fragment2">fragment2</string>
    <string name="next">next</string>
    <string name="fragment3">fragment3</string>
    <string name="fragment1">fragment1</string>
</resources>