Tablayout-自定义TAB

高糊演示

Tablayout自定义TAB实现

需求:选中放大,放大的字体和小字要在同一高度上.

tab

一.布局准备

1.在需要的地方加入design包下的tablayout

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();
                }
            }
        });

    }