TabLayout is a container control that provides horizontal display of Tab. It's often used in conjunction with ViewPager. I'll give you a full explanation of its usage. I haven't seen it in more detail than I have.
Demonstration
Adding dependencies
This is the class under the Android Design package, which is the UI package introduced by Android 5.0.
compile 'com.android.support:design:25.2.0'
layout
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
Code
public classMainActivityextendsAppCompatActivity{
@BindView(R.id.tab_layout)
TabLayout mTabLayout;
@Override
protectedvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mTabLayout.addTab(mTabLayout.newTab().setText("home page"));
mTabLayout.addTab(mTabLayout.newTab().setText("classification"));
mTabLayout.addTab(mTabLayout.newTab().setText("Set up"));
}
}
The second way
Create it entirely through layout
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="home page"
/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="classification"
/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Set up"
/>
</android.support.design.widget.TabLayout>
TabLayout
There are a few ways to do it.
attribute
Modify the attributes of the layout
display mode
Sliding
app:tabMode="scrollable"
fixed
app:tabMode="fixed"
Indicator options
app:tabIndicatorHeight="10dp" //Indicator Height
app:tabIndicatorColor="@color/colorPrimary" // Indicator color
Text Options
app:tabSelectedTextColor="#ffffff" // Selected Tab text color
app:tabTextColor="#000000" // Unselected Tab text color
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large" // Text Style
Background settings
There is no difference between the two.
android:background="@color/colorAccent" // background
app:tabBackground="@color/colorPrimary" //background
Tag distance
app:tabPaddingStart="10dp"
app:tabPaddingBottom="10dp"
app:tabPadding="10dp"
app:tabPaddingEnd="10dp"
app:tabPaddingTop="10dp"
align
Centralized display
app:tabGravity="center"
Fill
app:tabGravity="fill"
deviation
The offset distance from the left must be a sliding scrollable
app:tabContentStart="200dp"
Label width limitation
Maximum width
app:tabMaxWidth="50dp"
Minimum width
app:tabMinWidth="100dp"
Code
Method provided by TabLayout
Label
create label
TabLayout.TabnewTab()
Add a label, and it will not be displayed until it is added.
voidaddTab(TabLayout.Tab tab)
void addTab (TabLayout.Tab tab,
int position)
void addTab (TabLayout.Tab tab,
boolean setSelected)
void addTab (TabLayout.Tab tab,
int position,
boolean setSelected)
delete a tap
voidremoveTab(TabLayout.Tab tab)
Delete labels by index
voidremoveTabAt(intposition)
Delete all labels
voidremoveAllTabs()
Get the label
TabLayout.TabgetTabAt(intindex)
Get the total number of tags
intgetTabCount()
Setting Styles
indicator
voidsetSelectedTabIndicatorColor(intcolor)// Indicator color
void setSelectedTabIndicatorHeight (intheight) // Indicator Height
Tag text
voidsetTabTextColors(intnormalColor, // Normal color
int selectedColor) // Select status color
void setTabTextColors (ColorStateList textColor) // State color
display mode
This was introduced in the previous properties.
intgetTabMode()
void setTabMode (intmode)
mode:
- MODE_SCROLLABLE
- MODE_FIXED
align
voidsetTabGravity(intgravity)
int getTabGravity ()
Add View
Not only is Tab tagged, but View can also be added directly.
voidaddView(View child)
void addView (View child,
int index)
void addView (View child,
ViewGroup.LayoutParams params)
void addView (View child, // View object
int index, // Location Index
ViewGroup.LayoutParams params) // Layout parameters
Get the current selected location
intgetSelectedTabPosition()
Monitor
selection provider-selection listener
This method has been abandoned and is not recommended for use.
voidsetOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)
The alternative is
voidaddOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)
The listener needs to be deleted after it is used up
voidremoveOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)
Delete all added selection listeners at once
voidclearOnTabSelectedListeners()
Tab
This class is the internal class of TabLayout, representing each tag in TabLayout. I'll introduce all the methods of this class.
Judging whether or not to be selected
booleanisSelected()
Set to Selected State
voidselect()
Description Content
If you don't have to set the description content, the default is the label title.
TabLayout.TabsetContentDescription(intresId)// With strings id
TabLayout.Tab setContentDescription (CharSequence contentDesc)
CharSequence getContentDescription ()
Content of custom tags
Custom view for each tag
TabLayout.TabsetCustomView(intresId)
TabLayout.Tab setCustomView (View view)
Label of label
Set tag to Tab, and then you can get Tab through tag.
TabLayout.TabsetTag(Object tag)
Object getTag ()
Add icons
TabLayout.TabsetIcon(Drawable icon)
TabLayout.Tab setIcon (intresId)
Drawable getIcon ()
Text of the title
TabLayout.TabsetText(intresId)
TabLayout.Tab setText (CharSequence text)
CharSequence getText ()
Current Label Location
intgetPosition()
Associate ViewPager
TabLayout and ViewPager are the most common ways to use them. It can be said that they are tailored. Here I will introduce two ways.
TabLayout can't create Tab by itself after using the two methods together. It needs to implement the getPagerTitle() method in PagerAdapter to return the text of the tag. The number of tags depends on the number of pages of ViewPager.
Nesting in layout
layout
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.view.ViewPager>
Code
public classMainActivityextendsAppCompatActivity{
@BindView(R.id.tab_layout)
TabLayout mTabLayout;
@BindView(R.id.viewpager)
ViewPager mViewpager;
private ArrayList<View> mList;
private String[] mTitle;
@Override
protectedvoidonCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initData();
mViewpager.setAdapter(new PagerAdapter() {
@Override
publicintgetCount(){
return mList.size();
}
@Override
publicbooleanisViewFromObject(View view, Object object){
return view == object;
}
@Override
publicObjectinstantiateItem(ViewGroup container,intposition){
View view = mList.get(position);
container.addView(view);
return view;
}
@Override
publicvoiddestroyItem(ViewGroup container,intposition, Object object){
container.removeView((View) object);
}
@Override
publicCharSequencegetPageTitle(intposition){
return mTitle[position];
}
});
}
privatevoidinitData(){
View viewpagerA = getLayoutInflater().inflate(R.layout.viewpager_a, null);
View viewpagerB = getLayoutInflater().inflate(R.layout.viewpager_b, null);
View viewpagerC = getLayoutInflater().inflate(R.layout.viewpager_c, null);
mList = new ArrayList<>();
mList.add(viewpagerA);
mList.add(viewpagerB);
mList.add(viewpagerC);
mTitle = new String[]{"home page", "classification", "Set up"};
}
Association in Layout
If the layout is not nested
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
You need to associate the two before the ViewPager sets up the Pager Adapter
mTabLayout.setupWithViewPager(mViewpager);
Although the Tab created with TabLayout after ViewPager does not display properly, the internal method of setupWithViewPager is to delete all tags before adding them.
However, the tag can still be modified by getTabAt().