TabLayout的自定义
2018-08-10 本文已影响0人
itfitness
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) {
}
});
