Android TabLayout 浅显总结

 

环境搭建

 

1.Android design支持包和Android v4 支持包。

2.在build.gradle中添加

dependencies {
    compile files('libs/android-support-v4.jar')
    compile 'com.android.support:design:23.1.0'
}

3.如果TabLayout的Title想自己定义Layout则需根据需求自己添加Layout文件。

示例代码（如何使用）

 

布局文件：activity_sxp_tablayout.xml

  

TabLayout Title 样式

 

1.tabMaxWidth：tab item的最大宽度，当app:tabMode="fixed"时不起作用，当app:tabMode="fixed"时才起作用。其中：

2.tabIndicatorColor：TabLayout指示器的颜色

3.tabIndicatorHeight：TabLayout指示器高度

4.tabPaddingStart：距离开始的长度

5.tabPaddingEnd：距离结束的长度

6.tabBackground：背景

7.tabTextAppearance：TabLayout title字体属性

8.tabSelectedTextColor：当前选择的tab的字体颜色

9.textAllCaps：TabLayout创建的Tab默认的是true，如果设置图标的话要设置成false。

初始化TabLayout和ViewPager

//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置适配器
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
// 初始化TabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
// 为TabLayout设置ViewPager
tabLayout.setupWithViewPager(viewPager);

  

ViewPager适配器

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    // TabLayout title
    private String tabTitles[] = new String[]{"TAB1", "TAB2", "TAB3"};
    // TabLayout 图标
    private int[] imageResId = {R.mipmap.icon_tab,
            R.mipmap.icon_tab,
            R.mipmap.icon_tab};

    public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // 返回纯文字
        // return tabTitles[position];

        // 返回ICON和文字
        Drawable image = context.getResources().getDrawable(imageResId[position]);
        image.setBounds(0, 0, image.getIntrinsicWidth() * 2, image.getIntrinsicHeight() * 2);
        SpannableString sb = new SpannableString(tabTitles[position]);
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;
    }

    /**
     * 自定义TabLayout title
     * @param position
     * @return
     */
    public View getTabView(int position){
        View view = LayoutInflater.from(context).inflate(R.layout.view_sxp_tab_title, null);
        TextView tv= (TextView) view.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) view.findViewById(R.id.imageView);
        img.setImageResource(imageResId[position]);
        return view;
    }

}

  

其中getTagView()方法是自己定义的方法，作用是自定义TabLayout Title，需要在初始化TabLayout的时候调用：

//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置适配器
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
// 初始化TabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
// 为TabLayout设置ViewPager
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    tab.setCustomView(pagerAdapter.getTabView(i));
}

  

 

常见问题

1.自定义TabLayout Title时需要自己在ViewPager的OnPageChangeListener中自己处理。