指示器.jpg
1.布局
<!--
android design library提供的TabLayout控件
tabIndicatorColor：菜单下方移动的横线的颜色
tabSelectedTextColor ：菜单被选中之后的颜色
tabTextColor : 菜单正常的颜色
app:tabTextAppearance : 添加样式，这里加了样式主要是为了在文字前面加一个图所用，就是把textAllCaps设置成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);
//设置主题
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的状态
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()) { // 选中状态
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 {// 未选中状态
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 联动
* @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()) { // 选中状态
text.setTextColor(mTabLayout.mUnSelectTextColor);
textPaint.setFakeBoldText(true);
text.setTypeface(Typeface.DEFAULT_BOLD);
indicator.setBackgroundColor(mTabLayout.mSelectIndicatorColor);
indicator.setVisibility(View.VISIBLE);
} else {// 未选中状态
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 显示的内容
*/
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 显示的内容
*/
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>
//设置默认选中第一个
mTabLayout.setFlag(0);
//添加标题（string类型）
mTabLayout.addTab(temp);
//联动
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) {
}
});
