指示器.jpg

1.布局

<!--
        android design library提供的TabLayout控件
        tabIndicatorColor：菜單下方移動的橫線的顏色
        tabSelectedTextColor ：菜單被選中之后的顏色
        tabTextColor : 菜單正常的顏色
        app:tabTextAppearance : 添加樣式期虾，這里加了樣式主要是為了在文字前面加一個圖所用咽块，就是把textAllCaps設(shè)置成false
    -->
<com.wwww.wwwwwwwww.view.EnhanceTabLayout
     android:id="@+id/eagle_tab_title"
     android:layout_width="match_parent"
     android:layout_height="40dp"
     android:background="@color/sys_white"
     android:padding="0dp"
     app:tabGravity="fill"
     app:tabIndicatorColor="@color/sys_transparent"
     app:tabIndicatorHeight="2dp"
     app:tabIndicatorWidth="10dp"
     app:tabMode="fixed"
     app:tabPadding="0dp"
     app:tabSelectedTextColor="@color/home_sys_blue"
     app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
     app:tabTextColor="@color/sys_BlackTextColor" />

public class EnhanceTabLayout extends FrameLayout {
    private TabLayout mTabLayout;
    private List<String> mTabList;
    private List<View> mCustomViewList;
    private int mSelectIndicatorColor;
    private int mSelectTextColor;
    private int mUnSelectTextColor;
    private int mIndicatorHeight;
    private int mIndicatorWidth;
    private int mTabMode;
    private int mTabTextSize;

    public EnhanceTabLayout(@NonNull Context context) {
        super(context);
        init(context, null);
    }

    public EnhanceTabLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public EnhanceTabLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public EnhanceTabLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void readAttr(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.EnhanceTabLayout);
        //選中指示器的顏色
        mSelectIndicatorColor = typedArray.getColor(R.styleable.EnhanceTabLayout_tabIndicatorColor, context.getResources().getColor(R.color.home_sys_blue));
        //未選中指示器的顏色
        mUnSelectTextColor = typedArray.getColor(R.styleable.EnhanceTabLayout_tabTextColor, Color.parseColor("#333333"));
        //選中時文字的顏色
        mSelectTextColor = typedArray.getColor(R.styleable.EnhanceTabLayout_tabSelectTextColor, context.getResources().getColor(R.color.home_sys_blue));
        //指示器的高度
        mIndicatorHeight = typedArray.getDimensionPixelSize(R.styleable.EnhanceTabLayout_tabIndicatorHeight, 1);
        //指示器的寬度
        mIndicatorWidth = typedArray.getDimensionPixelSize(R.styleable.EnhanceTabLayout_tabIndicatorWidth, 0);
        //文字大小
        mTabTextSize = typedArray.getDimensionPixelSize(R.styleable.EnhanceTabLayout_tabTextSize, 13);
        //設(shè)置主題
        mTabMode = typedArray.getInt(R.styleable.EnhanceTabLayout_tab_Mode, 2);
        typedArray.recycle();
    }

    private int flag = -1;
    public void setFlag(int flag) {
        this.flag = flag;
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    }

    private int fontSize = -1;
    public void setFontSize(int fontSize) {
        this.fontSize = fontSize;
    }

    private void init(Context context, AttributeSet attrs) {
        readAttr(context, attrs);
        mTabList = new ArrayList<>();
        mCustomViewList = new ArrayList<>();
        View view = LayoutInflater.from(getContext()).inflate(R.layout.enhance_tab_layout, this, true);
        mTabLayout = view.findViewById(R.id.enhance_tab_view);

        // 添加屬性
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                // onTabItemSelected(tab.getPosition());
                // Tab 選中之后婚陪，改變各個Tab的狀態(tài)
                for (int i = 0; i < mTabLayout.getTabCount(); i++) {
                    View view = mTabLayout.getTabAt(i).getCustomView();
                    if (view == null) {
                        return;
                    }
                    TextView text = (TextView) view.findViewById(R.id.tab_item_text);
                    View indicator = view.findViewById(R.id.tab_item_indicator);
                    if (i == tab.getPosition()) { // 選中狀態(tài)
                        text.getPaint().setFakeBoldText(true);
                        if (flag == 0) {
                            text.setTextColor(mSelectTextColor);
                            text.setTypeface(Typeface.DEFAULT_BOLD);
                        } else {
                            text.setTextColor(mUnSelectTextColor);
                            text.setTypeface(Typeface.DEFAULT);
                        }
                        indicator.setBackgroundColor(mSelectIndicatorColor);
                        indicator.setVisibility(View.VISIBLE);
                    } else {// 未選中狀態(tài)
                        text.getPaint().setFakeBoldText(false);
                        text.setTextColor(mUnSelectTextColor);
                        indicator.setVisibility(View.INVISIBLE);
                    }
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });
    }

    public List<View> getCustomViewList() {
        return mCustomViewList;
    }

    public void addOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) {
        mTabLayout.addOnTabSelectedListener(onTabSelectedListener);
    }

    /**
     * 與TabLayout 聯(lián)動
     * @param viewPager
     */
    public void setupWithViewPager(@Nullable ViewPager viewPager) {
        mTabLayout.addOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager, this));
    }

    /**
     * retrive TabLayout Instance
     * @return
     */
    public TabLayout getTabLayout() {
        return mTabLayout;
    }

    /**
     * 添加tab
     * @param tab
     */
    public void addTab(String tab) {
        mTabList.add(tab);
        View customView = getTabView(getContext(), tab, mIndicatorWidth, mIndicatorHeight, fontSize);
        customView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,-2));
        mCustomViewList.add(customView);
        mTabLayout.addTab(mTabLayout.newTab().setCustomView(customView));
        Log.i("TAG", "addTab: customView="+customView.getMeasuredWidth());
    }

    /**
     * 刪除tab
     */
    public void removeAllTabs() {
        mTabList.clear();
        mTabLayout.removeAllTabs();
    }

    public static class ViewPagerOnTabSelectedListener implements TabLayout.OnTabSelectedListener {
        private final ViewPager mViewPager;
        private final WeakReference<EnhanceTabLayout> mTabLayoutRef;
        public ViewPagerOnTabSelectedListener(ViewPager viewPager, EnhanceTabLayout enhanceTabLayout) {
            mViewPager = viewPager;
            mTabLayoutRef = new WeakReference<EnhanceTabLayout>(enhanceTabLayout);
        }

        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            mViewPager.setCurrentItem(tab.getPosition());
            EnhanceTabLayout mTabLayout = mTabLayoutRef.get();
            if (mTabLayoutRef != null) {
                List<View> customViewList = mTabLayout.getCustomViewList();
                if (customViewList == null || customViewList.size() == 0) {
                    return;
                }
                for (int i = 0; i < customViewList.size(); i++) {
                    View view = customViewList.get(i);
                    if (view == null) {
                        return;
                    }
                    TextView text = (TextView) view.findViewById(R.id.tab_item_text);
                    TextPaint textPaint = text.getPaint();
                    View indicator = view.findViewById(R.id.tab_item_indicator);
                    if (i == tab.getPosition()) { // 選中狀態(tài)
                        text.setTextColor(mTabLayout.mUnSelectTextColor);
                        textPaint.setFakeBoldText(true);
                        text.setTypeface(Typeface.DEFAULT_BOLD);
                        indicator.setBackgroundColor(mTabLayout.mSelectIndicatorColor);
                        indicator.setVisibility(View.VISIBLE);
                    } else {// 未選中狀態(tài)
                        textPaint.setFakeBoldText(false);
                        text.setTextColor(mTabLayout.mUnSelectTextColor);
                        indicator.setVisibility(View.INVISIBLE);
                        text.setTypeface(Typeface.DEFAULT);
                    }
                }
            }
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            // No-op
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            // No-op
        }
    }

    /**
     * 獲取Tab 顯示的內(nèi)容
     */
    public static View getTabView(Context context, String text, int indicatorWidth, int indicatorHeight) {
        View view = LayoutInflater.from(context).inflate(R.layout.tab_item_layout, null);
        TextView tabText = (TextView) view.findViewById(R.id.tab_item_text);
        if (indicatorWidth > 0) {
            View indicator = view.findViewById(R.id.tab_item_indicator);
            ViewGroup.LayoutParams layoutParams = indicator.getLayoutParams();
            layoutParams.width = indicatorWidth;
            layoutParams.height = indicatorHeight;
            indicator.setLayoutParams(layoutParams);
        }
        tabText.setText(text);
        return view;
    }

    /**
     * 獲取Tab 顯示的內(nèi)容
     */
    public static View getTabView(Context context, String text, int indicatorWidth, int indicatorHeight, int textSize) {
        View view = LayoutInflater.from(context).inflate(R.layout.tab_item_layout, null);
        TextView tabText = (TextView) view.findViewById(R.id.tab_item_text);
        if (indicatorWidth > 0) {
            View indicator = view.findViewById(R.id.tab_item_indicator);
            ViewGroup.LayoutParams layoutParams = indicator.getLayoutParams();
            layoutParams.width = indicatorWidth;
            layoutParams.height = indicatorHeight;
            indicator.setLayoutParams(layoutParams);
        }
        if (textSize != -1) {
            tabText.setTextSize(textSize);
        }
        tabText.setText(text);
        return view;
    }
}

enhance_tab_layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content">

    <android.support.design.widget.TabLayout
        android:id="@+id/enhance_tab_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        >
    </android.support.design.widget.TabLayout>
</FrameLayout>

attrs.xml

<declare-styleable name="EnhanceTabLayout">
        <attr name="tab_Mode" format="enum">
            <enum name="mode_fixed" value="1"/>
            <enum name="mode_scrollable" value="2"/>
        </attr>
        <attr name="tabIndicatorColor" format="color"/>
        <attr name="tabSelectTextColor" format="color"/>
        <attr name="tabTextColor" format="color"/>
        <attr name="tabIndicatorHeight" format="dimension"/>
        <attr name="tabIndicatorWidth" format="dimension"/>
        <attr name="tabTextSize" format="dimension"/>
    </declare-styleable>

//設(shè)置默認(rèn)選中第一個
mTabLayout.setFlag(0);
//添加標(biāo)題（string類型）
mTabLayout.addTab(temp);
//聯(lián)動
mTabLayout.setupWithViewPager(mViewPager);
//選中拱绑，未選中
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                currentPosition = tab.getPosition();
                if (currentPosition == 0) {
                    eagleHotQuickFragment = (EagleHotQuickRecyclerFragment) list_fragment.get(currentPosition);
                } else {
                    currentFragment = (EagleInfoRecyclerFragment) list_fragment.get(currentPosition);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });