Tab Layout trên Android

Hi các bạn,

Nay mình sẽ hướng dẫn các bạn qua Tab Layout trên Android nhé.

Tab Layout là gì? Đây là hình bên dưới cho các bạn dễ hình dung:

Với Tab Layout, ta có thể chứa nhiều Page trong 1 Activity, với Page ở đây là 1 Fragment. Và để chuyển qua page khác, ta sẽ đổi qua tab khác.

Đây là 1 trong những layout có tính phức tạp trung bình, đòi hỏi các bạn phải biết làm việc với Fragment (nó không khác với Activity cho lắm).

Tab Layout là một trong những layout thân thiện và rất được ưa chuộng sử dụng, ví dụ: Facebook, Momo hay Airpay.

1/ Cài đặt cần thiết cho Tab Layout trên Android (build.gradle)

Để sử dụng được Tab Layout, bạn cần cài đặt gói này từ Google:

implementation 'com.android.support:design:26.1.0'

Thêm nó vào build.gradle cấp độ app và sync lại project.

2/ Thiết lập layout xml

Đây là xml dành cho tab layout, ta sẽ kết hợp nó với ViewPager (1 layout rất hữu ích để slide qua lại)

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

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="<Activity_cua_ban>">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

</LinearLayout>

Các bạn có thể đặt TabLayout ở trên cũng được, mình đặt ở dưới cho nó look like iOS chút 😀

3/ Khởi tạo Tab ở Java Code

Khai báo 2 control ta cần xài đó là ViewPager và TabLayout

private TabLayout tabLayout;
private ViewPager viewPager;

Lưu ý khi Alt + Enter để import, các bạn nhớ ưu tiên các package là “android.support.v4” nhé, quan trọng đấy.

Và tại onCreate, ta sẽ findViewById cho 2 controls trên:

viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabs);

Trước khi các bạn khởi tạo ViewPager, các bạn cần phải có 1 số fragment nhất định, cách tạo fragment (blank) để test dễ nhất là như sau:

Các bạn cứ tạo ra 2 fragments để thử nhé, mình sẽ ví dụ là HelloFragment và WorldFragment nhé.

Và tiếp theo như trên, ta sẽ cần 1 method để khởi tạo ViewPager, như sau:

private void setupViewPager() {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new HelloFragment(this), "Hello");
        adapter.addFragment(new WorldFragment(this), "World");
        viewPager.setAdapter(adapter);
    }

Và tất nhiên, class ViewPagerAdapter sẽ không có sẵn, đó là 1 custom class mà ta kế thừa từ FragmentPagerAdapter, như sau:

class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }

Các bạn có thể bỏ class này vào chung cái class của Activity hiện tại cũng dc, và ta sẽ giữ class này xài luôn mãi nhé mỗi khi dùng Tab.

Và bây giờ quay trở lại hàm onCreate, ta gọi method vừa tạo ra (setupViewPager) và khởi tạo Tab luôn cho tabLayout:

setupViewPager();
tabLayout.setupWithViewPager(viewPager);

Bây giờ các bạn đã có thể chạy thử xem thành quả 😀 (nhớ là 2 fragments kia các bạn tạo, nên để 1 textview mỗi bên để kiểm tra nhé)

4/ Thiết lập icon cho tab

Như tấm hình Tab đầu tiên, ta có thể thấy có icon đi kèm và làm cho Tab của chúng ta có 1 phần nào đó thu hút users nhấn vào(chắc vậy :v), và làm đẹp tab.

Để gán icon cho tab rất dễ, sau khi ta chạy xong hàm setupWithViewPager, ta có thể chạy như sau để gán icon:

tabLayout.getTabAt(i).setIcon(....);

Trong đó i là index của tab bạn, bắt đầu từ 0.

setIcon cho phép chúng ta set hình ở 2 resource:

• Drawable
• ResID

Và với ví dụ bên trên, nếu mình muốn set 2 icon cho 2 tab, mình sẽ làm như sau:

private void setIcon()
    {
        tabLayout.getTabAt(0).setIcon(R.drawable.ic_hello);
        tabLayout.getTabAt(1).setIcon(R.drawable.ic_earth);
    }

Và chạy hàm này ngay bên dưới tabLayout.setupWithViewPager(…). Khi đó icon cho tab này sẽ được gán vào.

Kết luận về Tab Layout trên Android

Tab Layout trên Android là 1 trong những Layout được ng` dùng ưa chuộng sử dụng nhất, và đây là 1 setup cơ bản để các bạn có thể sử dụng tốt Tab Layout trong Android.

Full ref: https://developer.android.com/reference/android/support/design/widget/TabLayout.html

Chúc các bạn thành công!