안드로이드 Tab 만들기

사진과 같이 안드로이드에서 Tab기능을 만들어 보도록 하겠습니다.

 

1. 외부라이브러리인 design을 추가해주어야 합니다.

• 환경설정(?)의 dependency에 들어가서 직접 추가해주셔도 되고,
• build.gradle에 직접 implementation해주어도 됩니다. 

2. 화면 처럼 나오게 하기 위해선 Actionbar를 없애주어야 합니다. style로 가셔서 NoActionBar로 바꿔주세요

3. 탭을 구성할 layout을 변경합니다.

총 5개의 단계로 구성되어 있습니다.

3-1  Design이라는 외부 라이브러리를 성공적으로 sync하셨다면, Coord를 치시면 1번쨰의 레이아웃을 자동으로 생성해주게 됩니다. Tab이라고 하는 액션바를 추가해주게 되면 원래 있던 View와 겹치게 보이는 현상이 나타나는데 그것을 Coord Layout이 잡아주게 됩니다. 즉, 서로의 위치를 잘 postioning하게 해줍니다.

3-2 그 안에 액션바를 추가해주게 됩니다. AppBarLayout을 사용합니다. 추가하기 위해 android:theme이라는 속성을 추가해줍니다.

3-3 Toolbar는 액션바 안에서 타이틀의 메뉴 아이콘이 보일 영역을 말하며 탭 버튼이 그 아래에 보일 수 있도록 합니다.

3-4 TabLayout아웃을 추가합니다. tabMode는 고정시키는 역할, tabGravity는 탭의 아이템이 2개이든 3개든 가로방향으로 꽉 채워주도록 합니다. tabSelectedTextColor는 선택될 떄 강조할 color를 정해줍니다.

3-5 AppBar는 상단 영역, 주로 사용자가 작업을 할 공간을 그 밑에 정해줍니다. 이때, app:layout_behavior라는 속성을 꼭 넣어줘야 안드로이드가 액션바와 사용자의 영역, 즉 FrameLayout의 영역의 위치를 구분해서 나눠주게 됩니다.

 

4. 프래그먼트는 테스트를 위해 3개를 만들어줍니다. ( 과정 생략 )

5. MainActivity 전체 코드.

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 = 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 = findViewById(R.id.tabs);
        tabs.addTab(tabs.newTab().setText("친구"));
        tabs.addTab(tabs.newTab().setText("1:1채팅"));
        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) {

            }
        });
    }

}

5-1 먼저 우리가 만들어준 Toolbar를 등록을 해줍니다.

5-2 다음으로 Tab의 id를 얻어온 뒤, addTab을 이용해 Tab에 item을 추가해주게 됩니다.

5-3 setOnTabSelectedListener를 사용하여 tab을 클릭했을 때, 우리가 만든 각각의 프래그먼트가 보이도록 합니다.