Introduction to the
TabLayout is a page-switching indicator provided by the Material Design package.
TabLayout can be added by creating an instance of tabLayout.tab. The following is an example:
TabLayout tabLayout = ... ; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));Copy the code
Tablayout.tab instances can change tabs’ labels or ICONS via setText and setIcon, respectively.
TabLayout + ViewPager
If ViewPager and TabLayout are used together, you can associate the two with setupWithViewPager(ViewPager), in which case the TabLayout will populate the TAB with Pager Title. The following is an example of ViewPager + TabLayout:
<? The 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"> <com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp"/> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>Copy the code
class MyFragmentPagerAdapter(private val context: Context, fragmentManager: FragmentManager, private val pagerFragments: List<Fragment>): FragmentPagerAdapter(fragmentManager, FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
override fun getItem(position: Int): Fragment {
return pagerFragments[position]
}
override fun getCount(): Int {
return pagerFragments.size
}
override fun getPageTitle(position: Int): CharSequence? {
return String.format(context.resources.getString(R.string.appbar_sample_format), position)
}
}
Copy the code
viewPager.adapter = MyFragmentPagerAdapter(this, supportFragmentManager, pagerFragmengs)
tabLayout.setupWithViewPager(viewPager)
Copy the code
Event listeners
TabLayout adds OnTabSelectedListener to listen for TAB events.
/** * public void onTabSelected(T TAB); Public void onTabUnselected(T TAB); public void onTabUnselected(T TAB); Public void onTabReselected(T TAB); public void onTabReselected(T TAB);Copy the code
TabLayout XML attributes
attribute | Introduction to the | value |
---|---|---|
tabIndicatorColor | Indicator color | color |
tabIndicatorHeight | Indicator height | dp\sp |
tabIndicatorFullWidth | Whether the indicator width is tabbed width | boolean |
tabBackground | TAB background | color\drawable |
tabMode | How tabs behave in a layout | scrollable Slide;fixed Full screen width;auto The adaptive |
tabInlineLabel | Whether the text and Icon are horizontal | boolean |
tabMinWidth | Minimum TAB width | dp\sp |
tabMaxWidth | Maximum width | dp\sp |
tabTextAppearance | Writing style | style |
tabTextColor | Text color | color |
tabSelectedTextColor | Text selection color | color |
tabIconTint | Icon color blending | color |
tabIconTintMode | Color blending mode | |
tabRippleColor | Click on the water ripple effect color | color |
tabUnboundedRipple | Whether to use the unbounded water ripple effect | boolean |
The custom Tab
TabLayout is made up of tabs. You can get the specified Tab using the getTabAt method, and modify ICONS and text using setIcon and setText. You can also use a custom layout instead of a Tab layout, using the setCustomView method to modify the Tab layout.
The following is an example of a custom TabLayout:
val view = LayoutInflater.from(this).inflate(R.layout.item_tab_layout, null) val ivTabIcon = view.findViewById<ImageView>(R.id.ivTabIcon) val tvTabContent = view.findViewById<TextView>(R.id.tvTabContent) ivTabIcon.setImageResource(tabIcons[i]) tvTabContent.text = pageTitles[i] tabLayout.getTabAt(i)?.customView = viewCopy the code