高糊演示
Tablayout自定义TAB实现
需求:选中放大,放大的字体和小字要在同一高度上.
tab
一.布局准备
1.在需要的地方加入design包下的tablayout
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
app:tabPaddingBottom="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabPaddingTop="-1dp" />
2.小Tab的布局,依照你的需求随便自定义
<?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">
<TextView
android:id="@+id/tv_tab_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标签名"
android:textColor="@drawable/tab_color"
android:textSize="15sp" />
<TextView
android:id="@+id/tv_tab_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:visibility="gone"
android:textColor="@drawable/tab_color"
android:textSize="14sp" />
</LinearLayout>
一.代码设置
1.写了一个setTablayout的方法:
private void setTablayout() {
holder = null;
for (int i = 0; i < mTabs.size(); i++) {
//依次获取标签
if (tablayout != null) {
TabLayout.Tab tab = tablayout.getTabAt(i);
//为每个标签设置布局
tab.setCustomView(R.layout.tab_item);
holder = new ViewHolder(tab.getCustomView());
//为标签填充数据
holder.tvTabName.setText(mTabs.get(i).getName());
holder.tvTabNumber.setText(String.valueOf(mTabs.get(i).getId()));
//默认选择第一项
if (i == 0) {
holder.tvTabName.setSelected(true);
holder.tvTabNumber.setSelected(true);
TextPaint tp = holder.tvTabName.getPaint();
tp.setFakeBoldText(true);
holder.tvTabName.setTextSize(18);
holder.tvTabNumber.setTextSize(18);
ViewCompat.animate(holder.tvTabName)
.translationY(2)
.start();
}
}
}
//tab选中的监听事件
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab != null) {
holder = new ViewHolder(tab.getCustomView());
if (holder.tvTabName != null) {
TextPaint tp = holder.tvTabName.getPaint();
tp.setFakeBoldText(true);
holder.tvTabName.setSelected(true);
holder.tvTabNumber.setSelected(true);
//选中后字体变大
holder.tvTabName.setTextSize(18);
holder.tvTabNumber.setTextSize(18);
//选中后字体向下移
ViewCompat.animate(holder.tvTabName)
.translationY(2)
.start();
//让Viewpager跟随TabLayout的标签切换
viewPager.setCurrentItem(tab.getPosition());
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
if (tab != null) {
if (holder.tvTabName != null) {
holder = new ViewHolder(tab.getCustomView());
holder.tvTabName.setSelected(false);
holder.tvTabNumber.setSelected(false);
TextPaint tp = holder.tvTabName.getPaint();
tp.setFakeBoldText(false);
//恢复为默认字体大小
holder.tvTabName.setTextSize(15);
holder.tvTabNumber.setTextSize(15);
//选中后字体向下移
ViewCompat.animate(holder.tvTabName)
.translationY(0)
.start();
}
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
reflex(tablayout);
}
2.如果觉得tab的间距太宽这里提供一个修改tab宽度的方法reflex,原本这个方法我是用来修改tab下面的下划线宽度用的,这里也可以拿来用.
public void reflex(final TabLayout tabLayout) {
//了解源码得知 线的宽度是根据 tabView的宽度来设置的
tabLayout.post(new Runnable() {
@Override
public void run() {
try {
//拿到tabLayout的mTabStrip属性
LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
int dp10 = dip2px(tabLayout.getContext(), 10);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
//拿到tabView的mTextView属性 tab的字数不固定一定用反射取mTextView
Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
mTextViewField.setAccessible(true);
TextView mTextView = (TextView) mTextViewField.get(tabView);
tabView.setPadding(-1, -1, -1, -1);
//因为我想要的效果是 字多宽线就多宽，所以测量mTextView的宽度
int width = 0;
width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}
//设置tab左右间距为10dp 注意这里不能使用Padding 因为源码中线的宽度是根据 tabView的宽度来设置的
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = (int) (width * 1.5);
params.leftMargin = dp10;
params.rightMargin = dp10;
tabView.setLayoutParams(params);
tabView.invalidate();
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
});
}
