Tab Layout trong Android được dùng để thiết kế màn hình với nhiều mục (tab) khác nhau trên một màn hình, giúp chuyển đổi qua lại giữa các màn hình một cách nhanh chóng và thuận lợi. Trong nội dung bài viết này hãy cùng tìm hiểu hướng dẫn thiết kế Tab Layout trong Android.
1.Sử dụng Tab Layout vào ứng dụng.
Bước 1: Đầu tiên, bạn cần tạo một số giao diện màn hình mà ở đây mình sẽ tạo ra 3 màn hình lần lượt là fragment_one.xml, fragment_two.xml và fragment_three.xml như sau
fragment_one.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ONE" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout> |
fragment_two.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TWO" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout> |
fragment_three.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="THREE" android:textSize="40dp" android:textStyle="bold" android:layout_centerInParent="true"/> </RelativeLayout> |
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:background="#EEEEEE" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" tools:layout_editor_absoluteX="8dp" tools:layout_editor_absoluteY="0dp"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <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" android:background="@color/colorPrimary" app:tabGravity="fill" app:tabMode="fixed" app:tabTextColor="#FFFFFF" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout> |
Bước 2: Tiếp theo, chúng ta sẽ xử lý thiết kế Tab Layout trong Android trong lớp MainActivity.java
– setupViewPager() dùng để gán số lượng tab cần hiển thị
– setupTabIcons() dùng để gán icon
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | package net.kenhlaptrinh.androidtablayout; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { Toolbar toolbar; TabLayout tabLayout; ViewPager viewPager; private int[] tabIcons = { R.drawable.ic_filter_1_white_24dp, R.drawable.ic_filter_2_white_24dp, R.drawable.ic_filter_3_white_24dp }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); tabLayout = (TabLayout) findViewById(R.id.tabs); viewPager= (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); tabLayout.setupWithViewPager(viewPager); setupTabIcons(); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new OneFragment(), "One"); adapter.addFragment(new TwoFragment(), "Two"); adapter.addFragment(new ThreeFragment(), "Three"); viewPager.setAdapter(adapter); viewPager.setOffscreenPageLimit(3); } private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); } 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); } } } |
Bước 3: Cuối cùng, bạn tạo 3 lớp OneFragment.java, TwoFragment.java và ThreeFragment.java kế thừa từ lớp Fragment.
OneFragment.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | package net.kenhlaptrinh.androidtablayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by TUNG DUONG on 05/08/2017. */ public class OneFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_one, null); return view; } } |
TwoFragment.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | package net.kenhlaptrinh.androidtablayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by TUNG DUONG on 05/08/2017. */ public class TwoFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_two, null); return view; } } |
ThreeFragment.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | package net.kenhlaptrinh.androidtablayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by TUNG DUONG on 05/08/2017. */ public class ThreeFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_three, null); return view; } } |
Video demo hướng dẫn thiết kế Tab Layout trong Android:
Download mã nguồn ngay tại đây.
Như vậy là bài hướng dẫn thiết kế Tab Layout trong Android của mình đã hoàn thành, bây giờ bạn hãy làm theo và chạy thử chương trình trên xem kết quả như thế nào.
Lời kết: Mong rằng qua bài viết này bạn có thể thiết kế Tab Layout trong Android. Ngoài ra, bạn có thể xem thêm các bài viết khác trong chuyên mục lập trình Android.
(Tác giả: Tùng Dương)
Nguyễn Châu Thảo Quân
- Edit
Bạn ơi, bạn cho mình hỏi là ThreeFragment làm sao để ép recyclerview vào ? có phải bước mình xử lý dữ liệu đổ vào recyclerview để vào hàm View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) trước cái View view = inflater.inflate(R.layout.fragment_three, null); phải ko
admin
- Edit
Chào bạn,
Nếu bạn muốn thêm recyclerview vào ThreeFragment thì viết mã trong onCreateView() chẳng hạn như:
@Override
public View onCreateView(LayoutInflater inflater, final ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tab3, null);
recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
// code
return view;
}
Chúc bạn một ngày vui!