Kotlin中Tablayout的用法

文章目录

• • xml
  • 获取item的view
  • item的xml
  • kotlin中tablayout渲染和点击

xml

  <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="44dp"
                    app:tabIndicatorHeight="0dp"
                    app:tabIndicatorFullWidth="false"
                    app:tabIndicatorGravity="center"
                    app:tabMaxWidth="0dp"
                    app:tabMode="fixed"
                    app:tabGravity="fill"
                    app:tabPaddingBottom="-1dp"
                    app:tabPaddingEnd="-1dp"
                    app:tabPaddingStart="-1dp"
                    app:tabPaddingTop="-1dp"
                    app:tabBackground="@android:color/transparent"
                    app:tabRippleColor="@android:color/transparent"></com.google.android.material.tabs.TabLayout>

清除tablayout默认item间距

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

获取item的view

class DataGenerator {

    companion object{
        var modeImage = arrayOf(R.mipmap.cool_test,R.mipmap.cool_test,R.mipmap.cool_test,R.mipmap.cool_test)
        val mode = arrayOf("空调","座椅","除霜","座舱清洁")
        fun getTabView(context:Context,position:Int) :View{
            val view: View =
                LayoutInflater.from(context).inflate(R.layout.select_mode, null)
//            var mode_bg:RelativeLayout = view.findViewById(R.id.mode_bg)
            var tab_content_image:ImageView = view.findViewById(R.id.tab_content_image)
            tab_content_image.setBackgroundResource(modeImage[position])
            var tab_content_text:TextView = view.findViewById(R.id.tab_content_text)
            tab_content_text.setText(mode[position])

            return view
        }
    }
}

item的xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@color/transparent">

    <RelativeLayout
        android:id="@+id/mode_bg"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:background="@drawable/tab_control_bgb"
        android:gravity="center">
        <ImageView
            android:id="@+id/tab_content_image"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@mipmap/cool_test"
            android:scaleType="centerCrop" />

    </RelativeLayout>

    <TextView
        android:id="@+id/tab_content_text"
        android:layout_width="wrap_content"
        android:layout_height="22dp"
        android:textSize="12sp"
        android:gravity="center"
        android:text="空调"
        android:textColor="@android:color/white" />
    
</LinearLayout>

kotlin中tablayout渲染和点击

   for(int i=0;i<3;i++){
            mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
        }

 initChoose(0)
        mBinding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                recoverTab()
                var view: View? = tab?.customView
                var  mode_bg:RelativeLayout = view?.findViewById(R.id.mode_bg)!!
                mode_bg.setBackgroundResource(R.drawable.tab_control_bga)
                var  tab_content_text:TextView = view?.findViewById(R.id.tab_content_text)!!
                ToastUtils.s(this@ComfortControlActivity,"点击了${tab_content_text.text}")
            }

            override fun onTabReselected(p0: TabLayout.Tab?) {

            }

            override fun onTabUnselected(p0: TabLayout.Tab?) {

            }


        })


    }

    /**
     * 恢复tab初始状态
     */
    private fun recoverTab() {
        for (x in 0..3){
            var tabAt: TabLayout.Tab? = mBinding.tabLayout.getTabAt(x)
            var view: View? = tabAt?.customView
            var  mode_bg:RelativeLayout = view?.findViewById(R.id.mode_bg)!!
            mode_bg.setBackgroundResource(R.drawable.tab_control_bgb)
        }

    }

    /**
     * 初始化指定tab选择项
     */
    private fun initChoose(i:Int) {
            var tabAt: TabLayout.Tab? = mBinding.tabLayout.getTabAt(i)
            var view: View? = tabAt?.customView
            var  mode_bg:RelativeLayout = view?.findViewById(R.id.mode_bg)!!
            mode_bg.setBackgroundResource(R.drawable.tab_control_bga)

    }