TabLayout常规使用
Android原生TabLayout使用的超全解析(看这篇就够了) - 爱码帮™分享编程知识和开发经验
1、xml布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="@dimen/common_dp_40"
app:tabBackground="@null"
app:tabGravity="center"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="@dimen/common_dp_0"
app:tabMaxWidth="@dimen/common_dp_200"
app:tabMinWidth="@dimen/common_dp_20"
app:tabMode="scrollable"
app:tabPaddingEnd="@dimen/common_dp_15"
app:tabPaddingStart="@dimen/common_dp_12"
app:tabSelectedTextColor="@color/common_white"
app:tabTextAppearance="@style/CommonTabLayoutTextStyle"
app:tabTextColor="@color/common_white" />
<android.support.v4.view.ViewPager
android:id="@+id/vpContent"
android:layout_width="match_parent"
android:layout_height="@dimen/common_dp_0"
android:layout_marginTop="@dimen/common_dp_14"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/tvLimitTime" />
</LinearLayout>
CommonTabLayoutTextStyle.xml
<style name="CommonTabLayoutTextStyle">
<item name="android:textSize">@dimen/common_textSize15</item>
<!--下面两句没个顶用-->
<item name="android:alpha">0.6</item>
<item name="android:textAllCaps">false</item>
</style>
TabLayout一些常用属性:
app:tabBackground="@null"//去掉背景,点击时候有阴影
app:tabRippleColor="@android:color/transparent"//去掉背景,点击时候有阴
app:tabGravity="center"
app:tabIndicatorColor="@color/colorAccent"//指示器的颜色=透明
app:tabIndicatorHeight="@dimen/common_dp_0"//指示器的高度=0
app:tabMaxWidth="@dimen/common_dp_200"
app:tabMinWidth="@dimen/common_dp_20"
app:tabMode="scrollable"//有两种scrollable 滚动,fixed 固定不滚动
app:tabPaddingEnd="@dimen/common_dp_15"//每个item右边距离
app:tabPaddingStart="@dimen/common_dp_12"每个item左边距离
app:tabSelectedTextColor="@color/common_white"//选中tab文本颜色
app:tabTextAppearance="@style/CommonTabLayoutTextStyle"//修改item文字大小吧
app:tabTextColor="@color/common_white" />//tab文本的默认颜色
2、SeckillFragmentPagerAdapter
public class SeckillFragmentPagerAdapter extends FragmentPagerAdapter {
private List<String> mTitles = new ArrayList<>();
private List<BaseFragment> mFragments = new ArrayList<>();
private List<String> tags = new ArrayList<>();//标示fragment的tag
private FragmentManager fragmentManager;
public SeckillFragmentPagerAdapter(FragmentManager fm, Collection<SeckillFragment> fragments, List<String> titles) {
super(fm);
fragmentManager = fm;
mTitles.clear();
mTitles.addAll(titles);
mFragments.addAll(fragments);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
if (mTitles != null && mTitles.size() > 0) {
return mTitles.get(position);
} else {
return mFragments.get(position).getPageTitle();
}
}
//返回PagerAdapter.POSITION_NONE保证调用notifyDataSetChanged刷新Fragment。
@Override
public int getItemPosition(Object object) {
return POSITION_NONE;//必须返回的是POSITION_NONE,否则不会刷新
}
//这个就不说了
private String makeFragmentName(int viewId, long id) {
return "android:switcher:" + viewId + ":" + id;
}
//必须重写此方法,添加tag一一做记录
@Override
public Object instantiateItem(ViewGroup container, int position) {
tags.add(makeFragmentName(container.getId(), getItemId(position)));
Fragment fragment = (Fragment) super.instantiateItem(container, position);
if(fragmentManager!=null)
this.fragmentManager.beginTransaction().show(fragment).commit();
return fragment;
}
//根据tag查找缓存的fragment,移除缓存的fragment,替换成新的
public void setNewFragments() {
if (this.tags != null) {
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
for (int i = 0; i < tags.size(); i++) {
fragmentTransaction.remove(fragmentManager.findFragmentByTag(tags.get(i)));
}
fragmentTransaction.commit();
fragmentManager.executePendingTransactions();
tags.clear();
}
notifyDataSetChanged();
}
}
3、初始化
SeckillFragmentPagerAdapter mPagerAdapter = new SeckillFragmentPagerAdapter(mFragmentManager, fragments, titles);
mBinding.vpContent.setOffscreenPageLimit(titles.size());
mBinding.vpContent.setAdapter(mPagerAdapter);
if (isReset) mPagerAdapter.setNewFragments();//这是我在FragmentPagerAdapter中定义的刷新方法,
mBinding.tabLayout.setupWithViewPager(mBinding.vpContent, false);
4、TabLayout 切换的监听
mBinding.tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
setSelectTab(tab.getPosition(), true);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
setSelectTab(tab.getPosition(), false);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
/**
* @param position
* @param select
*/
private void setSelectTab(int position, boolean select) {
TextView title = (TextView) (((LinearLayout) ((LinearLayout) mBinding.tabLayout.getChildAt(0)).getChildAt(position)).getChildAt(1));
if (select) {
title.setAlpha(1.0f);
title.setTypeface(Typeface.DEFAULT_BOLD);
title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
mBinding.tabLayout.getTabAt(position).select();
} else {
title.setAlpha(0.6f);
title.setTypeface(Typeface.DEFAULT);
title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15);
}
}
6、自定义布局两种方式
可以动态添加
private void getView() {
for (int i = 0; i < tableLayout.getTabCount(); i++) {
View view = LayoutInflater.from(this).inflate(R.layout.item, null);
((TextView) view.findViewById(R.id.tv)).setText(title[i]);
tableLayout.getTabAt(i).setCustomView(view);
}
((TextView) tableLayout.getTabAt(0).getCustomView().findViewById(R.id.tv)).setTextColor(Color.RED);
tableLayout.getTabAt(0).getCustomView().findViewById(R.id.iv).setVisibility(View.VISIBLE);
}
/**
* 设置tablayout选中状态
*
* @param tab
*/
private void setStatus(TabLayout.Tab tab) {
for (int i = 0; i < tableLayout.getTabCount(); i++) {
if (i == tab.getPosition()) {
((TextView) tableLayout.getTabAt(i).getCustomView().findViewById(R.id.tv)).setTextColor(Color.RED);
tableLayout.getTabAt(i).getCustomView().findViewById(R.id.iv).setVisibility(View.VISIBLE);
} else {
((TextView) tableLayout.getTabAt(i).getCustomView().findViewById(R.id.tv)).setTextColor(Color.BLACK);
tableLayout.getTabAt(i).getCustomView().findViewById(R.id.iv).setVisibility(View.INVISIBLE);
}
}
}