TabLayout的自定义

TabLayout的自定义，主要是通过setCustomView方法来添加自定义布局实现。

自定义TabLayout的实现主要包含以下几个步骤

●创建自定义布局（这里我加了一个动画控件，可以替换成其他控件）

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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"> <LinearLayout android:layout_width="wrap_content" android:orientation="horizontal" android:gravity="center_vertical" android:layout_centerInParent="true" android:layout_height="wrap_content"> <com.airbnb.lottie.LottieAnimationView android:layout_width="40dp" android:id="@+id/lottanim" app:lottie_autoPlay="true" app:lottie_loop="true" app:lottie_fileName="infinity.json" android:layout_height="20dp" /> <TextView android:layout_width="wrap_content" android:text="标题" android:id="@+id/tv" android:layout_height="wrap_content" /> </LinearLayout> </RelativeLayout> 

●创建Activity布局

<?xml version="1.0" encoding="utf-8"?> <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:orientation="vertical" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:id="@+id/tablayout" app:tabMode="scrollable" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> </LinearLayout> 

●在Activity中动态添加tab

 tabLayout=findViewById(R.id.tablayout); for (int x=0;x<8;x++){ TabLayout.Tab tab = tabLayout.newTab(); View inflate = View.inflate(this, R.layout.customtablayout, null); TextView textView = inflate.findViewById(R.id.tv); textView.setText("标题"+x); tab.setCustomView(inflate); tabLayout.addTab(tab); } 

此时就已经实现了自定义tab了

接下来实现绑定ViewPager

viewPager.setAdapter(new PagerAdapter() { @Override public int getCount() { return 8; } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view==object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { TextView textView=new TextView(CustomTablayout.this); textView.setText(position+""); textView.setTextSize(50); container.addView(textView); return textView; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } }); tabLayout.setupWithViewPager(viewPager); 

这里发现自定义的tab不见了，这里是因为当Tablayout绑定ViewPager的时候TabLayout会采用默认的tab布局所以才看不到效果。

解决方法：不采用setupWithViewPager方法来进行手动绑定，这里注意tab的数量要和PagerAdapter的getCount方法返回的数量一致。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { tabLayout.setScrollPosition(position, 0f, true); } @Override public void onPageScrollStateChanged(int state) { } }); 

个人博客：https://myml666.github.io