效果
特点:
1、TabLayout使用setCustomView 实现带图标的tab;
2、每个Tab设置不同的背景;
1、页面布局:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
android:background="@color/cl_f4f1f4">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="16dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="16dp"
android:layout_below="@id/cl_check_statistic"
app:tabRippleColor="@color/bg_transparent"
app:tabIndicatorHeight="0dp" />
<View
android:id="@+id/divider_line"
android:layout_width="match_parent"
android:layout_height="0.33dp"
android:layout_below="@id/tablayout"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="@color/cl_ccc" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/divider_line"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp" />
</RelativeLayout>
2、自定义Tab布局(左图右文字):icon_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/tabicon"
android:layout_width="15dp"
android:layout_height="15dp" />
<TextView
android:id="@+id/tabtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:textColor="@color/cl_666"
android:textSize="14sp"
tools:text="@string/preview_text" />
</LinearLayout>
3、详细代码:
- getTabView()使用自定义布局;
- setTabBackground()设置不同背景;
@ContentView(R.layout.activity_main)
@ViewModel(MainViewModel.class)
public class MainActivity extends BaseActivity<ActivityMainBinding, MainViewModel>{
private List<Fragment> myFragment;
private String[] titleArr = {"待完成", "待提交", "主动检查"};
private int[] selectedArr = {R.mipmap.icon_pending_selected, R.mipmap.icon_uncommit_selected, R.mipmap.icon_initiative_check_selected};
private int[] unSelectedArr = {R.mipmap.icon_pending_unselected, R.mipmap.icon_uncommit_unselected, R.mipmap.icon_initiative_check_unselected};
private final int DEFAULT_POSITION = 0;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initLayout();
}
/**
* 导航栏布局:https://blog.csdn.net/xiaoshuxgh/article/details/80389570
*/
private void initLayout() {
myFragment = new ArrayList<>();
myFragment.add(new PendingFragment());
myFragment.add(new UnCommitFragment());
myFragment.add(new InitiativeCheckFragment());
mBinding.viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int i) {
return myFragment.get(i);
}
@Override
public int getCount() {
return myFragment.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titleArr[position];
}
});
mBinding.tablayout.setupWithViewPager(mBinding.viewpager);
// 注意:这个方法需要放在setupWithViewPager()后面
for (int i = 0; i < mBinding.tablayout.getTabCount(); i++) {
TabLayout.Tab tabView = mBinding.tablayout.getTabAt(i);
tabView.setCustomView(getTabView(i));
setTabBackground(tabView, false);
}
mBinding.tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//设置选中图标样式
View tabView = tab.getCustomView();
tabView.findViewById(R.id.tabicon).setBackgroundResource(selectedArr[tab.getPosition()]);
//设置选中字体颜色
TextView textView = tabView.findViewById(R.id.tabtext);
textView.setTextColor(getResources().getColor(R.color.theme_color));
setTabBackground(tab, true);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//设置未选中图标样式
View tabView = tab.getCustomView();
tabView.findViewById(R.id.tabicon).setBackgroundResource(unSelectedArr[tab.getPosition()]);
//设置未选中字体颜色
TextView textView = tabView.findViewById(R.id.tabtext);
textView.setTextColor(getResources().getColor(R.color.cl_666));
setTabBackground(tab, false);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
setTabBackground(mBinding.tablayout.getTabAt(DEFAULT_POSITION), true);
}
/**
* 使用自定义的View布局
*
* @param position
* @return
*/
private View getTabView(int position) {
View v = LayoutInflater.from(mActivity).inflate(R.layout.icon_view, null);
ImageView iv = v.findViewById(R.id.tabicon);
TextView tv = v.findViewById(R.id.tabtext);
tv.setText(titleArr[position]);
//设置默认页面
if (position == DEFAULT_POSITION) {
iv.setBackgroundResource(selectedArr[position]);
tv.setTextColor(v.getResources().getColor(R.color.theme_color));
} else {
iv.setBackgroundResource(unSelectedArr[position]);
tv.setTextColor(v.getResources().getColor(R.color.cl_666));
}
return v;
}
/**
* TabLayout每个Tab选中背景不一样。
* https://blog.csdn.net/qq_32606467/article/details/103068611
*
* @param tab
* @param selected
*/
private void setTabBackground(TabLayout.Tab tab, boolean selected) {
Drawable drawable = null;
switch (tab.getPosition()) {
case 0:
if (selected) {
drawable = mActivity.getDrawable(R.drawable.tab_background_selected_0);
} else {
drawable = mActivity.getDrawable(R.drawable.tab_background_unselected_0);
}
break;
case 1:
if (selected) {
drawable = mActivity.getDrawable(R.drawable.tab_background_selected_1);
} else {
drawable = mActivity.getDrawable(R.drawable.tab_background_unselected_1);
}
break;
case 2:
if (selected) {
drawable = mActivity.getDrawable(R.drawable.tab_background_selected_2);
} else {
drawable = mActivity.getDrawable(R.drawable.tab_background_unselected_2);
}
break;
}
ViewCompat.setBackground(tab.view, drawable);
}
}