Use android.support.design.widget.TabLayout in android's design support package combined with ViewPager/Fragment to write multi-tab applications. Only one code is needed to complete the linkage between Tab and ViewPager switching, saving a lot of trouble.
mTabLayout.setupWithViewPager(mViewPager);
First write a main layout file, you only need to add ViewPager and TabLayout. Tab can be above ViewPager or below, depending on their needs:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/container_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/color_white" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/tabbar_def_height"
app:tabBackground="@color/color_f7f7f7"
app:tabIndicatorHeight="@dimen/margin_0"
app:tabMode="fixed" />
</LinearLayout>
In the java code, ViewPager can be used to set a PagerAdapter as usual, but it needs to be associated with Tab, and the call to setupWithViewPager() needs to be added:
mViewPager = (ViewPager) findViewById(R.id.container_viewpager); mTabLayout = (TabLayout) findViewById(R.id.tab_layout); ... mViewPager.setAdapter(pagerAdapter); mTabLayout.setupWithViewPager(mViewPager);
After that, I found that ViewPager can be used normally, but the title of TabLayout is not displayed. At this time, if only the text title needs to be displayed on the TabLayout, it is very easy. Rewrite the getPageTitle method in our custom PagerAdapter. After the combination of TabLayout and ViewPager It will read from here to display:
public class MainPagerAdapter extends FragmentPagerAdapter {
...
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
The title of the Tab is displayed, and the linkage is also possible. If the style is to be set, it can be set in the properties of the TabLayout control. What? Is it not enough to have text in the title? That's okay, just want to add an icon on the top, if you want to imitate the WeChat style, you don't need to customize the layout file. There are two main ways. The first is to set the icon for a single Tab after the setupWithViewPager:
mTabLayout.setupWithViewPager(mViewPager); mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher); mTabLayout.getTabAt(1).setIcon(R.mipmap.ic_launcher); mTabLayout.getTabAt(2).setIcon(R.mipmap.ic_launcher);
Another way is to directly write the Tab layout to death, just use the control android.support.design.widget.TabItem, like this:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Android"/>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_launcher"/>
</android.support.design.widget.TabLayout>
In this way, the effect is to set an icon and a text title for the TabItem. Of course, if you want to customize a more complex TabLayout, you can also get the Tab first and set a custom View for it:
mTabLayout.getTabAt(i).setCustomView(view);
The complete custom code is as follows:
First, I customized a structure TabItemInfo, which is used to add Items of Tab and ViewPager with code. It is clear at a glance:
public class TabItemInfo {
private Class<? extends Fragment> fragmentClass;
private int nameResource;
private int iconResource;
public TabItemInfo(Class<? extends Fragment> fragmentClass, @StringRes int nameResource,
@DrawableRes int iconResource) {
this.fragmentClass = fragmentClass;
this.nameResource = nameResource;
this.iconResource = iconResource;
}
public Class<? extends Fragment> getFragmentClass() {
return fragmentClass;
}
public int getNameResource() {
return nameResource;
}
public int getIconResource() {
return iconResource;
}
}
PagerAdapter, nothing special, just adds a method to get a custom TabView according to the position, so that it can be easily obtained when setting the TabLayout in the Activity:
public class MainPagerAdapter extends FragmentPagerAdapter {
private Context mContext;
private List<TabItemInfo> mTabItems;
public MainPagerAdapter(Context context, FragmentManager fm, List<TabItemInfo> tabItems) {
super (fm);
mContext = context;
mTabItems = tabItems;
}
@Override
public Fragment getItem(int position) {
try {
return mTabItems.get(position).getFragmentClass().newInstance();
} catch (InstantiationException e) {
e.printStackTrace ();
} catch (IllegalAccessException e) {
e.printStackTrace ();
}
return null;
}
@Override
public int getCount() {
return mTabItems.size();
}
public View getTabView(int position) {
TabItemInfo itemInfo = mTabItems.get(position);
View view = LayoutInflater.from(mContext).inflate(R.layout.custom_view_tab_item, null);
TextView tv = (TextView) view.findViewById(R.id.tab_text);
tv.setText(itemInfo.getNameResource());
ImageView img = (ImageView) view.findViewById(R.id.tab_image);
img.setImageResource(itemInfo.getIconResource());
return view;
}
}
Set ViewPager and TabLayout in Activity:
mViewPager = (ViewPager) findViewById(R.id.container_viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
List<TabItemInfo> tabItems = new LinkedList<>();
tabItems.add(new TabItemInfo(CashLoanFragment.class, R.string.cash_loan, R.drawable.apply_tab_icon_drawable));
tabItems.add(new TabItemInfo(GoodsLoanFragment.class, R.string.apply_credit, R.drawable.phone_tab_icon_drawable));
tabItems.add(new TabItemInfo(UserCenterNewFragment.class, R.string.user_center, R.drawable.my_tab_icon_drawable));
MainPagerAdapter pagerAdapter = new MainPagerAdapter(this, getSupportFragmentManager(), tabItems);
mViewPager.setAdapter(pagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(pagerAdapter.getTabView(i));
}
}
After this, the custom TabItemView is set up. Note that in the custom layout, background, textColor, etc., you can use the selector to specify different resources for the selected state and the non-selected state, so that when the TabLayout is switched left and right, only will work.