Materail Design 入门（六）—— TabLayout之标题中添加自定义View（2）

上一篇我们介绍了TabLayout的简单实用方法，本节来说说如何在TabLayout的标题上添加自定义View,目前来说几乎每个App中都会有Tab样式，而且多数还都是主页直接就放置了几个Tab按钮，有的是文字的，有的还会有图标，下面我们就来说说如何给Tab按钮加上漂亮的图片。

1、自定义View布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginTop="2dp"
android:src="@mipmap/ic_launcher"/>

<TextView
android:id="@+id/news_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="@color/tab_text"
android:textSize="14sp"/>
</LinearLayout>

2、实现方式一

public class BottomTabActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_tab);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.title_buttom_tab);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});

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

SampleFragmentPagerAdapter pagerAdapter =
new SampleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);

tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(pagerAdapter.getTabView(i));
}
}

//        viewPager.setCurrentItem(1);
tabLayout.getTabAt(0).getCustomView().setSelected(true);
}

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 3;
private String tabTitles[] = new String[]{"TAB1","TAB2","TAB3"};
private Context context;

public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) v.findViewById(R.id.news_title);
tv.setText(tabTitles[position]);
ImageView img = (ImageView) v.findViewById(R.id.imageView);
//img.setImageResource(imageResId[position]);
return v;
}

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

@Override
public int getCount() {
return PAGE_COUNT;
}

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

@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}

public static class PageFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";

private int mPage;

public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
PageFragment fragment = new PageFragment();
fragment.setArguments(args);
return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
TextView textView = (TextView) view;
textView.setText("Fragment #" + mPage);
return view;
}
}
}

划重点划重点！！！

（1）首先在ViewPager的Adapter中添加getTabView（）方法；

（2）在tabLayout.setupWithViewPager(viewPager);之后循环设置自定义View：

for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(pagerAdapter.getTabView(i));
}
}

3、实现方式二：使用SpannableString结合ImageSpan来实现

private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three
};

// ...

@Override
public CharSequence getPageTitle(int position) {
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
// Replace blank spaces with image icon
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;
}

注意：

1、当TabLayout创建的tab默认设置textAllCaps属性为true时，阻止了ImageSpan被渲染出来，也就是说这时图片是不会显示出来的，所以要记得修改textAllCaps属性为false啊。

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>

2、new SpannableString(” “);时多加了一个空格，这个空格是用来放置图片的。

4、如何设置图片的点击效果？

（1）利用selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/book1" android:state_selected="true"/>
<item android:drawable="@drawable/ic_favorite"/>
</selector>

这种方法适合方式一的自定义View实现使用。