【Android】TabLayout设置使用自定义的样式的图片显示问题

自定义的样式的图片显示问题"/>

【Android】TabLayout设置使用自定义的样式的图片显示问题

序言

TabLayout我们经常使用，用来和ViewPager2进行组合使用，做多Fragment切换页面效果。
TabLayout我们经常看到的的显示效果是上面文字，下面一个线段，在各大浏览器/新闻类APP可以看到，这个效果也是对TabLayout配置参数可以实现的，但是我们想要实现这种效果

我们有两个Tab，左边和右边的，选中左边的之后，左边的就是橙色，然后箭头指向右边，选中右边的，右边变成橙色，然后箭头指向左边。

这个需要对TabLayout进行配置。

实现

首先Tablayout在xml里面的配置

    <com.google.android.material.tabs.TabLayoutandroid:id="@+id/tab"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="fill"android:background="@color/white"android:paddingStart="0dp"android:paddingEnd="0dp"app:tabGravity="fill"app:tabIndicatorColor="@color/white"app:tabIndicatorHeight="0dp"app:tabMaxWidth="0dp"app:tabMode="fixed"app:tabPaddingEnd="-1dp"app:tabPaddingStart="-1dp"app:tabRippleColor="@null" />

其中这个

      app:tabPaddingEnd="-1dp"app:tabPaddingStart="-1dp"

是因为Tab本身自己是有默认的Padding的，这样是为了能让我们图片充满TabLayout的空间。

然后我们需要准备好这种图片放在项目里面
接下来就是很正常的操作了，创建Adapter继承FragmentStateAdapter，然后往里面加内容

class TabAdapter(val fragment: FragmentActivity,val mContext: Context,val index: Int
) : FragmentStateAdapter(fragment) {private class ViewPagerData(var imageBgId: Int, var imageIcon: Int, var textId: Int)private val viewPagerDataList: MutableList<ViewPagerData> = mutableListOf()init {viewPagerDataList.add(ViewPagerData(R.drawable.ic_un_selected,R.mipmap.ic_un_change,R.string.lable_type))viewPagerDataList.add(ViewPagerData(R.drawable.ic_un_selected,R.mipmap.ic_un_change,R.string.installation))}override fun getItemCount(): Int = viewPagerDataList.sizeoverride fun createFragment(position: Int): Fragment {return when (position) {0 -> OneFragment()1 -> TwoFragment()else -> OneFragment()}}@SuppressLint("MissingInflatedId")fun getTabView(position: Int): View? {val view =LayoutInflater.from(mContext).inflate(R.layout.view_layout, null)val tabBg = view.findViewById<LinearLayout>(R.id.ll_bg)val tabTextView = view.findViewById<TextView>(R.id.tv_name)val tabImageView = view.findViewById<ImageView>(R.id.iv_icon)// 在这里设置初始颜色和图标tabTextView.setText(viewPagerDataList[position].textId)tabTextView.setTextColor(mContext.resources.getColor(R.color.color_first_level_word))tabImageView.setImageResource(viewPagerDataList[position].imageIcon)tabBg.setBackgroundResource(viewPagerDataList[position].imageBgId)return view}
}

里面的view_layout文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""android:id="@+id/ll_bg"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><ImageViewandroid:id="@+id/iv_tab_icon"android:layout_width="@dimen/agree_user_width_22"android:layout_height="@dimen/agree_user_width_22"android:layout_gravity="center_vertical" /><TextViewandroid:id="@+id/tv_name"android:layout_width="wrap_content"android:layout_height="@dimen/Standard_height48"android:layout_marginStart="@dimen/margin_8"android:gravity="center_vertical"android:textColor="@color/color_first_level_word"android:textSize="@dimen/textSize_18sp" />
</LinearLayout>

注意：在设置这个Tab的高度的时候，有时候可能因为系统的问题，导致我们设置的Tab图片无法充满这个TabLayout的空间，解决办法上面有提到，其中左右无法充满就是使用这个方法解决，在TabLayout里面加

      app:tabPaddingEnd="-1dp"app:tabPaddingStart="-1dp"

这个上面提到了，但是上下不充满的话就无法使用这个设置了，
需要我们在设置TabLayout的时候
1.设置TabLayout的上下高度

   android:layout_height="wrap_content"

2.在设置我们每个Tab的xml文件时，就是上面的view_layout文件里面设置高度，但是不要在父View里面设置高度，就像上面的view_layout里面，父View是LinearLayout，不能将LinearLayout的高度设置成我们需要的，要将其设置成

  android:layout_height="wrap_content"

然后在里面的子View里面，将某个高度设置成我们需要的高度，撑起这个布局，比如我们将TextView的高度设置成48dp，这也是我们需要的TabLayout的高度，这样的话可以解决我们的Tab图片在上下方向上不能充满TabLayout的空间的问题。

然后我们就可以在Activity里面使用了

val adapter = TabAdapter(this, this, 0)
binding.viewPager.adapter = adapter
binding.viewPager.setIsFocusableInTouchModeKtx(false)
binding.viewPager.isUserInputEnabled = false
TabLayoutMediator(binding.tab, binding.viewPager) { tab: TabLayout.Tab, position: Int ->tab.customView = adapter.getTabView(position)
}.attach()
binding.tab.isTabIndicatorFullWidth = false
binding.viewPager.setCurrentItem(0, false)
//初始修改选中的item文字图片颜色
binding.tab.getTabAt(0)?.customView?.findViewById<LinearLayout>(R.id.ll_bg)?.setBackgroundResource(R.mipmap.ic_select)
binding.tab.getTabAt(0)?.customView?.findViewById<ImageView>(R.id.iv_icon)?.setImageResource(R.mipmap.ic_change)
binding.tab.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tv_name)?.setTextColor(getColor(R.color.color_brand))

这样我们就已经将TabLayout和ViewPager2绑定成功了，但是我们在选择Tab的时候，还是要根据选择的Tab更换相应的背景和图片的。
我们要对这个TabLayout监听

binding.tab.addOnTabSelectedListener(object :TabLayout.OnTabSelectedListener {//选中的item处理override fun onTabSelected(tab: TabLayout.Tab) {val view = tab.customViewif (view != null) {val tabBg = view.findViewById<LinearLayout>(R.id.ll_bg)val tabImageView =view.findViewById<ImageView>(R.id.iv_icon)val tabTextView =view.findViewById<TextView>(R.id.tv_name)val position = tab.positionif (position == 0) {//因为我们只有两个Item的Tab，所以这个0代表的是第一个，也就是左边的Tab被选中了，//此时我们要更换图片和其他需要更换的东西，同理当我们选中其他的Tab也是要这么做的tabBg.setBackgroundResource(R.mipmap.ic_select)tabImageView.setImageResource(R.mipmap.ic_change)abTextView.setTextColor(getColor(R.color.color_brand)) // 替换成选中颜色} else {tabBg.setBackgroundResource(R.mipmap.ic_right_select)tabImageView.setImageResource(R.mipmap.ic_change)tabTextView.setTextColor(getColor(R.color.color_brand)) // 替换成选中颜色}}}//未选中的item处理override fun onTabUnselected(tab: TabLayout.Tab) {val view = tab.customViewif (view != null) {val tabBg = view.findViewById<LinearLayout>(R.id.ll_bg)val tabImageView =view.findViewById<ImageView>(R.id.iv_icon)val tabTextView =view.findViewById<TextView>(R.id.tv_name)val position = tab.positionif (position == 0) {//0代表第一个没有被选中//跟上面的处理逻辑一样} else {//跟上面的处理逻辑一样        }}}override fun onTabReselected(tab: TabLayout.Tab) {// 不需要处理}
})