最近项目中使用到tabLayout,但是一般使用的都是纯文字,或者纯图片,再或者就是图片加文字,但是图片颜色不会变,满足不了需求,然后看网上很多说自己自定义一个view来实现,然后也就尝试写了一下,轻松搞定,废话不多说,上代码。
1,先看一下效果图
2,首先是页面布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.cui.tablayouttest.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/tab_layout" /> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" style="@style/MyCustomTabLayout" android:layout_alignParentBottom="true" android:layout_height="wrap_content"/> </RelativeLayout>3,写图片选择器
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_work_info_checked" android:state_selected="true"/> <item android:drawable="@drawable/ic_work_info"/> </selector>
4,写tabItem的自定义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"> <ImageView android:id="@+id/selector_item_imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/user_name"/> <TextView android:id="@+id/selector_item_textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text"/> </LinearLayout>
5,写适配器,重点重写getTabView方法,加载上面tebItem布局
class MyAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragments = new ArrayList<>(); final int PAGE_COUNT = 3; private String tabTitles[] = new String[]{"tab1", "tab2", "tab3"}; private int[] imageResId = {R.drawable.person_selector, R.drawable.company_selector, R.drawable.cost_selector}; public MyAdapter(FragmentManager fm) { super(fm); mFragments.add(new PersonalFragment()); mFragments.add(new WorkFragment()); mFragments.add(new MonthFragment()); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return PAGE_COUNT; } @Override public CharSequence getPageTitle(int position) { return null; } public View getTabView(int position){ View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.simple, null); TextView tv= (TextView) view.findViewById(R.id.selector_item_textView); tv.setText(tabTitles[position]); ImageView img = (ImageView) view.findViewById(R.id.selector_item_imageView); img.setImageResource(imageResId[position]); return view; } }6,适配器的使用
private ViewPager viewPager; private TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager= (ViewPager) findViewById(R.id.view_pager); tabLayout= (TabLayout) findViewById(R.id.tab_layout); MyAdapter adapter=new MyAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(adapter.getTabView(i)); } }注意:里边有个坑,加入图片后不显示,这个是因为 TabLayout创建的tab默认设置textAllCaps属性为true,这阻止了ImageSpan被渲染出来,可以通过下面的样式文件定义来改变:
<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>