安卓TabLayout+Viewpager实现自定义选项卡

在布局文件中添加TabLayout和ViewPager控件。

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable"
    app:tabGravity="center"/>

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

创建自定义的TabLayout中每个选项卡的布局文件。

例如，可以创建一个custom_tab.xml布局文件，包含一个ImageView和一个TextView，用于显示图标和文本。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="@android:color/black"/>

</LinearLayout>

创建一个自定义的TabLayout中每个选项卡的实现类CustomTab，用于设置选项卡的图标和文本。

public class CustomTab {

    private int icon;
    private String text;

    public CustomTab(int icon, String text) {
        this.icon = icon;
        this.text = text;
    }

    public View getView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_icon);
        TextView tabText = (TextView) view.findViewById(R.id.tab_text);
        tabIcon.setImageResource(icon);
        tabText.setText(text);
        return view;
    }
}

在Activity中创建一个自定义的TabLayoutAdapter，用于管理ViewPager和TabLayout的关联。

public class TabLayoutAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    private List<CustomTab> tabs;
    private Context context;

    public TabLayoutAdapter(Context context, FragmentManager fm, List<Fragment> fragments, List<CustomTab> tabs) {
        super(fm);
        this.context = context;
        this.fragments = fragments;
        this.tabs = tabs;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return null;
    }

    public View getTabView(int position) {
        return tabs.get(position).getView(context);
    }
}

在Activity中，创建一个CustomTab列表和Fragment列表，并将它们传递给TabLayoutAdapter。

List<CustomTab> tabs = new ArrayList<>();
tabs.add(new CustomTab(R.drawable.tab1, "Tab 1"));
tabs.add(new CustomTab(R.drawable.tab2, "Tab 2"));
tabs.add(new CustomTab(R.drawable.tab3, "Tab 3"));

List<Fragment> fragments = new ArrayList<>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
TabLayoutAdapter adapter = new TabLayoutAdapter(this, getSupportFragmentManager(), fragments, tabs);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabs.size(); i++) {
    View tabView = adapter.getTabView(i);
    tabLayout.getTabAt(i).setCustomView(tabView);
}

运行程序，查看自定义的选项卡效果