Google native Tablayout (com. Google. Android. Material. Tabs. Tablayout) zero invasion expansion, help you more convenient use native Tablayout implement some UI effect

preview



About tablayout – ext

Tablayout-ext is simply an extension of the TabLayout control in the Google Material library. It is designed to use some of tabLayout’s properties in a non-intrusive, easy and convenient way. As a fan of native components, I love github’s open source tablayouts, but I always want to use native controls to implement UI requirements, whether in terms of usage or plot. To use ViewPager2 | Android Developers, found native controls the mutual support between really commendable. So native controls actually smell good, so why not?

Tablayout-ext currently only implements some very general uses, using kotlin extension functions to make chain calls. So far I’m still trying to figure out how to do this without invading the TabLayout code because of the native TabLayout source structure and other requirements such as making selected text larger. At this point, if you have a good idea of how to implement it, please let me know in the comments.

This library will be updated continuously, but the update time is variable. If you use this library in your project and encounter problems, you can find me on Github and submit an issue to Tablayout-ext. I will try to deal with this problem as soon as possible.

How to introduce

Step 1. Add JitPack Repository

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}
Copy the code

Step 2. Add Gradle dependencies

dependencies { ... Implementation 'com. Google. Android. Material: material: 1.2.1' / / Google material package implementation 'com. Making. LoperSeven: tablayout - ext: 0.0.1' / / here is no guarantee that whether the latest version, the latest version, please go to dead simple view, only supports androidX}Copy the code

How to use

Note: this library only makes some convenient extensions for Tablayout. For details about Tablayout properties and usage, please refer to the developers document

Indicator

  SetHeight () sets the indicator height. By default, tabLayout specifies the tabIndicatorHeight. SetWidth () sets the indicator width. If tabLayout is set to tabIndicatorFullWidth=true, the default is TAB width. Otherwise the TAB for the actual text width * setGravity () is equivalent to Tablayout. SetSelectedTabIndicatorGravity setColor () * () is equal to Tablayout.setSelectedTabIndicatorColor() */
 tabLayout.buildIndicator<LinearIndicator>()
            .setHeight(22.toPx()) .setWidth(BaseIndicator.MATCH) .setGravity(TabLayout.INDICATOR_GRAVITY_TOP) .setColor(ContextCompat.getColor(context!! ,R.color.colorAccent)) .bind()/** * triangle indicator * buildIndicator<> Specify indicator class * setPath sets triangle style [POSITIVE] POSITIVE [NEGATIVE] NEGATIVE */
 tabLayout.buildIndicator<TriangleIndicator>()
            .setPath(TriangleIndicator.Path.NEGATIVE)// Since path is exclusive to this indicator, it should be called before any other attribute.
            .setWidth(10.toPx())
            .setHeight(10.toPx()) .setColor(ContextCompat.getColor(context!! ,R.color.colorAccent)) .setGravity(TabLayout.INDICATOR_GRAVITY_TOP) .bind()/** * Custom deawable indicator * buildIndicator<> Specifies the indicator class * setDrawable Sets the indicator drawable to pass in drawable or@DrawableResResId :Int * Other attributes, same as above, are all basic attributes */tabLayout.buildIndicator<CustomIndicator>() .setDrawable(ContextCompat.getDrawable(context!! ,R.mipmap.ic_indicator_fire)!!) .bind()Copy the code

To extend more type indicators, simply inherit from BaseIndicator, add proprietary attributes, and implement logic in the bind() method.

Text

 /** * TAB text Settings * buildText<> Specifies text Settings class * setNormalTextBold() specifies whether text is bold when unselected default false * setSelectTextBold() Specifies whether text is bold when selected Default true * /
  tabLayout.buildText<BaseText>()
            .setNormalTextBold(true)
            .setSelectTextBold(true)
            .bind()
Copy the code

confusion

-dontwarn com.loper7.tablayout-ext.** -keep class com.loper7.tablayout-ext.**{*; }Copy the code

Github

Tablayout-ext