Tablayout-自定义TAB Tablayout-自定义TAB

高糊演示 Tablayout自定义TAB实现需求:选中放大,放大的字体和小字要在同一高度上.

文章图片
tab 一.布局准备
1.在需要的地方加入design包下的tablayout

【Tablayout-自定义TAB】2.小Tab的布局,依照你的需求随便自定义

一.代码设置
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(); } } }); }