TableLayout教程，附Android Studio中的示例| Android材质设计教程

在Android中表格布局是设计支持库中引入的新元素。它提供水平布局以在屏幕上显示选项卡。我们可以使用选项卡在单个屏幕中显示更多屏幕。我们可以在标签之间快速滑动。表格布局基本上是需要将视图类添加到我们的布局（xml）中以创建滑动选项卡。我们使用不同的方法表格布局创建、添加和管理选项卡。

特别说明： 表格布局用于在屏幕上显示选项卡。我们可以使用TabLayout创建滑动选项卡和非滑动选项卡。如果我们需要没有滑动的简单选项卡，那么我们用选项卡上的片段替换布局，如果我们需要滑动选项卡，那么我们使用查看寻呼机.

1. 基本表格布局XML代码：
2. 表格布局的重要方法：
3. TabLayout的属性：
4. Android Studio中的TabLayout示例：
5. 使用ViewPager的TabLayout示例2：

基本表格布局XML代码：



表格布局的重要方法：
让我们讨论一些重要的TabLayout方法，这些方法可能被调用以管理TabLayout。
1、newTab（）： 此方法用于创建和返回新的TabLayout。选项卡。
下面我们创建一个新选项卡，并设置选项卡的文本和图标。
TabLayout   tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
表格布局。Tab firstTab=tabLayout。newTab（）；//创建新选项卡名称
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab

2、添加选项卡（Tab-Tab）： 此方法用于在表格布局中添加选项卡。通过使用此方法，我们在TabLayout中添加了使用newTab（）方法创建的选项卡。该选项卡将添加到列表的末尾，如果它是要添加的第一个选项卡，则它将成为所选选项卡。
下面我们首先创建一个新选项卡，然后将其添加到TabLayout中。






TabLayout   tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
表格布局。添加选项卡（第一个选项卡）；//将选项卡添加到表格布局

3、addTab（Tab Tab，布尔集合selected）： 此方法用于在TabLayout中添加选项卡并设置选项卡的状态。通过使用此方法，我们在TabLayout中添加了使用newTab（）方法创建的选项卡。在这个方法中，我们还设置选项卡的状态，无论它是否被选中。
下面，我们首先创建一个新选项卡，然后将其添加到TabLayout中，并设置setSelected参数的真值，使其可选择。
TabLayout   tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
表格布局。addTab（firstTab，true）；//在表格布局中添加选项卡并使其可选择

4、addTab（Tab Tab，int position）： 此方法用于在TabLayout中添加选项卡并设置选项卡的状态。通过使用此方法，我们在TabLayout中添加了使用newTab（）方法创建的选项卡。选项卡将插入到给定位置。如果它是要添加的第一个选项卡，则它将成为选定的选项卡。
下面我们首先创建一个新选项卡，然后将其添加到特定位置的表格布局中。
TabLayout   tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
表格布局。添加选项卡（第一个选项卡，2）；//在特定位置的表格布局中添加选项卡

5、addTab（Tab Tab，int position，boolean setSelected）： This method is used to add a tab at a specific position and set the state of the tab. By using this method we add the tab which we created using newTab() method in the TabLayout. The tab will be inserted at  the defined  position and a Boolean value used to set the state of the tab. True value is used to make the tab selectable.
Below we firstly create a tab and then add it in the TabLayout at a specific position and we also set true value to make the tab selectable.
TabLayout   tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab,2,true); // add  the tab at specified position in the TabLayout and makes it selectable

6. getSelectedTabPosition(): This method is used to get the position of the current selected tab. This method returns an int type value for the position of the selected tab. It returns -1 if there isn’t a selected tab.
Below we get the current selected tab position.
TabLayout   tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
int selectedTabPosition = tabLayout.getSelectedTabPosition(); // get the position for the current selected tab

7. getTabAt(int index): This method is used to get the tab at the specified index. This method returns TabLayout.Tab.
Below we get the tab at 1th index.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
TabLayout.Tab tab = tabLayout.getTabAt(1); //  get the tab at 1th in index

8. getTabCount(): This method is used to get the number of tabs currently registered with the action bar. This method returns an int type value for the number of total tabs.
Below we get the total number of tabs currently registered with the action bar.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
int tabCount= tabLayout.getTabCount(); // get the total number of tabs currently registered with the action bar.

9. setTabGravity(int gravity): This method is used to set the gravity to use when laying out the tabs.
下面我们为选项卡设置重力。
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。设置选项卡重力（TabLayout.GRAVITY\u CENTER）；//设置布局选项卡时要使用的重力。

10. getTabGravity(): This method is used to get the current gravity used for laying out tabs. This method returns the gravity which we set using setTabGravity(int gravity) method.
下面我们首先设置重力，然后获得用于布局选项卡的当前重力。
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。设置选项卡重力（TabLayout.GRAVITY\u CENTER）；//设置布局选项卡时要使用的重力。
int重力=表格布局。getTabGravity（）；//获取用于布局选项卡的当前重力

11、设置选项卡模式（int模式）： 此方法用于设置此布局中选项卡的行为模式。有效的输入选项包括：
MODE\u固定：  固定选项卡同时显示所有选项卡，最好与从选项卡之间的快速旋转中获益的内容一起使用。
模式\u可滚动： 可滚动选项卡在任何给定时刻显示选项卡的子集，它可以包含更长的选项卡标签和更多的选项卡。当用户不需要直接比较选项卡标签时，它们最适合用于在触摸界面中浏览上下文。此模式通常与 查看寻呼机.
Below we set the behaviour mode for the tabs.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。setTabMode（TabLayout.MODE\u可滚动）；//设置选项卡的行为模式

12、getTabMode（）： 此方法用于获取表格布局的当前模式。此方法返回一个int类型值，我们使用setTabMode（int mode）方法设置该值。
下面我们首先设置tab模式，然后获取TabLayout的当前模式。
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。setTabMode（TabLayout.MODE\u可滚动）；//设置选项卡的行为模式
int模式=表格布局。getTabMode（）；//获取表格布局的当前模式

13、设置选项卡文本颜色（int normalColor，int selectedColor）： 此方法用于为选项卡的不同状态（正常、选定）设置文本颜色。
下面我们为选项卡的两种状态设置选项卡文本颜色。
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。设置选项卡文本颜色（颜色。红色，颜色。白色）；//为选项卡的两种状态设置选项卡文本颜色。

14、getTabTextColors（）： 此方法用于获取选项卡不同状态（正常、选定）的文本颜色。此方法返回我们使用setTabTextColors（int normalColor，int selectedColor）方法设置的文本颜色。
下面我们首先设置文本颜色，然后获取选项卡两种状态的文本颜色。
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。设置选项卡文本颜色（颜色。红色，颜色。白色）；//为选项卡的两种状态设置选项卡文本颜色。
ColorStateList colorStateList=tabLayout.getTabTextColors(); // get the text colors for the both states of the tab

15. removeAllTabs(): This method is used to remove all tabs from the action bar and deselect the current tab.
Below we remove all the tabs from the action bar and deselect the current tab.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
tabLayout.removeAllTabs(); // remove all the tabs from the action bar and deselect the current tab

16. setOnTabSelectedListener(OnTabSelectedListener listener): This method is used to add a  listener that will be invoked when tab selection changes.
Below we show how to use addOnTabSelectedListener of TabLayout.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。setOnTabSelectedListener（新的TabLayout.OnTabSelectedListener（）{
@覆盖
public void onTabSelected（TabLayout.Tab选项卡）{
// called when tab selected
}

@覆盖
公共void onTabUnselected（TabLayout.Tab选项卡）{
// called when tab unselected
}

@覆盖
公共void onTabReselected（TabLayout.Tab选项卡）{
// called when a tab is reselected
}
});

17. removeTab(Tab tab): This method is used to remove a tab from the layout. In this method we pass the TabLayout.Tab object to remove the tab from the layout. If the removed tab was selected then it will be automatically deselected and another tab will be selected if present in the TabLayout.
Below we firstly create and add a tab and then remove it from the TabLayout.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab); // add  the tab at in the TabLayout
tabLayout.removeTab(firstTab); // remove the tab from the TabLayout

18. removeTabAt(int position): This method is used to remove a tab from the layout. In this method we pass the position of the tab that we want to remove from the layout. If the removed tab was selected then it will be automatically deselected and another tab will be selected if present in the TabLayout.
Below we remove the tab from a specified position of TabLayout.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
tabLayout.removeTabAt(1); // remove the tab from a specified position of TabLayout

19. setSelectedTabIndicatorColor(int color): This method is used to set the tab indicator’s color for the currently selected tab.
下面我们为所选选项卡指示器设置红色。
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。设置选定的标签或颜色（颜色。红色）；//设置所选选项卡指示器的红色。

20、设置SelectedTabitIndicator高度（int height）： 此方法用于为当前选定的选项卡设置选项卡指示器的高度。
Below we set the height for the selected tab’s indicator.
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。设置SelectedTabitIndicator高度（2）；//设置所选选项卡指示器的高度

21、ViewPager设置（ViewPager ViewPager）： 此方法用于使用ViewPager设置表格布局。ViewPager主要用于创建滑动选项卡。
下面我们使用ViewPager设置表格布局。
ViewPager ViewPager=（ViewPager）findViewById（R.id.ViewPager）；//获取ViewPager的引用
TabLayout TabLayout=（TabLayout）findViewById（R.id.simpleTabLayout）；//获取TabLayout的引用
表格布局。使用viewPager设置（viewPager）；//使用ViewPager设置表格布局。


TabLayout的属性：
现在，让我们讨论一下TabLayout的一些常见属性，这些属性可以帮助我们在布局（xml）中配置它。
1、id： id属性用于唯一标识TabLayout。
2、支撑。设计：选项卡背景： 此属性用于设置选项卡的背景。我们可以在标签的背景中设置颜色或可绘制。
下面我们为选项卡的背景设置黑色。

3、支撑。设计：选项卡重力： 此属性用于设置布局选项卡时要使用的重力。我们还可以使用setTabGravity（int-gravity）方法在java类中以编程方式设置重力平均值。
下面我们为选项卡设置重力。

4、支撑。设计：选项卡指示颜色： 此属性用于设置用于显示当前选定选项卡的指示器的颜色。我们还可以使用setselecttabindicatorcolor（int-color）方法在java类中以编程方式设置颜色。
Below we set the red color for the selected tab indicator


5. support.design:tabIndicatorHeight: This attribute is used to set the height of the indicator used to show the currently selected tab. We can also set height programmatically means in java class using setSelectedTabIndicatorHeight(int height) method.
Below we set the height for the selected tab’s indicator.



6. support.design:tabMaxWidth: This attribute is used to set the maximum width for the tabs.
Below we set the maximum width value for the  tabs.



7. support.design:tabMinWidth: This attribute is used to set the minimum width for the tabs.
Below we set the minimum width value for the tabs.



8. support.design:tabMode: This attribute is used to set the behavior mode for the Tabs in this layout. We can also set the mode programmatically means in java class using setTabMode(int mode) method.
Below we set the behaviour mode for the tabs.



9. support.design:tabPadding: This attribute is used to set the padding along all edges of tabs.
android.support.design:tabPaddingBottom: Set padding along the bottom edge of the tabs.
android.support.design:tabPaddingEnd: Set padding along the end edge of the tabs.
android.support.design:tabPaddingStart: Set padding along the start edge of the tabs.
android.support.design:tabPaddingTop: Set padding along the top edge of the tabs.
Below we set the padding along all edges of the tabs.

<!-- 沿选项卡的所有边缘设置填充-->

10、支撑。设计：选项卡SelectedTextColor： 此属性用于设置要应用于当前选定选项卡的文本颜色。我们还可以使用setTabTextColors（int normalColor，int selectedColor）方法以编程方式进行设置。
下面我们为所选选项卡设置文本颜色。

11、支撑。设计：选项卡文本颜色： 此方法用于设置要应用于选项卡的默认文本颜色。我们还可以使用setTabTextColors（int normalColor，int selectedColor）方法以编程方式进行设置。
下面我们为选项卡设置默认文本颜色。


Android Studio中的TabLayout示例：
表格布局示例1：
下面是TabLayout的第一个示例，其中显示三个非滑动选项卡。在本例中，我们在xml文件中定义了一个TabLayout和一个FrameLayout。在本例中，我们使用不同的TabLayout方法在TabLayout中创建并添加3个选项卡。之后，我们实现了setOnTabSelectedListener事件，并根据所选选项卡将FrameLayout替换为片段的。
下载代码

步骤1： 创建一个新项目并将其命名为TabLayoutExample
第2步： 打开生成。渐变并添加设计支持库依赖项。
应用插件：“com。安卓应用程序'

android系统{
编译SDK版本23
buildToolsVersion“23.0.2”

默认配置{
applicationId“com.abhiandroid.tablayoutexample”
MinSDK版本15
targetSdkVersion 23
版本代码1
versionName“1.0”
}
建筑类型{
发布{
minifyEnabled错误
proguardFiles getDefaultProguardFile（'proguard-android.txt'），'proguard规则。pro'
}
}
}

依赖项{
编译文件树（目录：“libs”，包括：[“*.jar]”）
编译com。安卓支持：appcompat-v7:23.1.0'
编译com。安卓支持：design:23.1.0“//设计支持库
}

步骤3：  打开res->layout->activity\u main。xml（或）main。xml并添加以下代码：
在这一步中，我们添加了在xml文件中显示TabLayout和ViewPager的代码。




<框架布局
android:id=“@+id/simpleFrameLayout”
android:layout_width="match_parent"
android:layout\u height=“match\u parent”/>



步骤4： Open   src -> package -> MainActivity.java
在这一步中，我们打开MainActivity并添加用于启动FrameLayout和TableLayout的代码。之后，我们在TabLayout中创建并添加3个选项卡。最后，我们实现了setOnTabSelectedListener事件，并根据所选选项卡将FrameLayout替换为片段。
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
导入android。支持v4.app。碎片管理器；
导入android。支持v4.app。碎片交易；
import android.support.v7.app.AppCompatActivity;
导入android。小装置。框架布局；

public class MainActivity extends AppCompatActivity {

FrameLayout simpleFrameLayout；
TabLayout tabLayout;

@覆盖
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取FrameLayout和TableLayout的参考
simpleFrameLayout=（FrameLayout）findViewById（R.id.simpleFrameLayout）；
tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout);
// Create a new Tab named "First"
TabLayout.Tab firstTab = tabLayout.newTab();
firstTab.setText("First"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the
// first tab
tabLayout.addTab(firstTab); // add  the tab at in the TabLayout
// Create a new Tab named "Second"
TabLayout.Tab secondTab = tabLayout.newTab();
secondTab.setText("Second"); // set the Text for the second Tab
secondTab.setIcon(R.drawable.ic_launcher); // set an icon for the second tab
tabLayout.addTab(secondTab); // add  the tab  in the TabLayout
// Create a new Tab named "Third"
表格布局。Tab thirdTab=tabLayout。newTab（）；
第三选项卡。setText（“第三”）；//设置第一个选项卡的文本
第三选项卡。setIcon（R.drawable.ic\U启动器）；//为第一个选项卡设置图标
表格布局。添加选项卡（第三个选项卡）；//在表格布局中添加位于的选项卡


//在TabLayout上执行setOnTabSelectedListener事件
表格布局。setOnTabSelectedListener（新的TabLayout.OnTabSelectedListener（）{
@覆盖
public void onTabSelected（TabLayout.Tab选项卡）{
//获取当前选定选项卡的位置并相应地替换片段
Fragment Fragment=空；
开关（tab.getPosition（））{
案例0：
fragment=新的FirstFragment（）；
打破
案例1：
fragment=新的SecondFragment（）；
打破
案例2：
fragment=新的第三个片段（）；
打破
}
FragmentManager fm=getSupportFragmentManager（）；
FragmentTransaction ft=fm。beginTransaction（）；
ft.replace（R.id.simpleFrameLayout，fragment）；
ft.setTransition（FragmentTransaction.TRANSIT\u FRAGMENT\u OPEN）；
ft.提交（）；
}

@覆盖
公共void onTabUnselected（TabLayout.Tab选项卡）{

}

@覆盖
公共void onTabReselected（TabLayout.Tab选项卡）{

}
});
}
}

第5步： 现在，我们需要3个片段和3个xml布局来创建三个选项卡。因此，右键单击包文件夹创建三个片段，创建类并将它们命名为FirstFragment、SecondFragment和ThirdFragment，然后分别添加以下代码。
第一个片段。班
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

公共类FirstFragment扩展了Fragment{

public FirstFragment（）{
// Required empty public constructor
}

@覆盖
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@覆盖
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
回油充气机。充气（R.layout.fragment\u first，container，false）；
}

}

第二个片段。班
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

公共类SecondFragment扩展了片段{

公共SecondFragment（）{
// Required empty public constructor
}

@覆盖
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@覆盖
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
回油充气机。充气（R.layout.fragment\u second，container，false）；
}

}

ThirdFragment.class
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ThirdFragment extends Fragment {

public ThirdFragment() {
// Required empty public constructor
}

@覆盖
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@覆盖
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_third, container, false);
}

}

步骤6：  Now create 3 xml layouts by right clicking on res/layout -> New -> Layout Resource File and name them as fragment_first, fragment_second and fragment_third and add the following code in respective files.
Here we will design the basic simple UI for all the three tabs.
fragment_first.xml






fragment_second.xml






fragment_third.xml







使用ViewPager的TabLayout示例2：
下面是TabLayout的示例，其中我们在ViewPager的帮助下显示滑动选项卡。在本例中，我们在xml文件中定义了一个TabLayout和一个ViewPager。在本例中，我们使用不同的TabLayout方法在TabLayout中创建并添加3个选项卡。之后，我们创建一个PagerAdapter，用ViewPager设置TabLayout。
下载代码

步骤1： 创建一个新项目并将其命名为TabLayoutExample
第2步： 打开生成。渐变并添加设计支持库依赖项。
应用插件：“com。安卓应用程序'

android系统{
编译SDK版本23
buildToolsVersion“23.0.2”

默认配置{
applicationId“com.abhiandroid.tablayoutexample”
MinSDK版本15
targetSdkVersion 23
版本代码1
versionName“1.0”
}
建筑类型{
发布{
minifyEnabled错误
proguardFiles getDefaultProguardFile（'proguard-android.txt'），'proguard规则。pro'
}
}
}

依赖项{
编译文件树（目录：“libs”，包括：[“*.jar]”）
编译com。安卓支持：appcompat-v7:23.1.0'
编译com。安卓支持：design:23.1.0“//设计支持库
}

步骤3：  打开res->layout->activity\u main。xml（或）main。xml并添加以下代码：








Step 4: Open   src -> package -> MainActivity.java
In this step we open MainActivity and add the code for initiate the ViewPager and TabLayout.  After that we create and add 3 tabs in the TabLayout. Finally we set an Adapter named  PagerAdapter to set up the TabLayout with ViewPager.
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

ViewPager simpleViewPager;
TabLayout tabLayout;

@覆盖
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of ViewPager and TabLayout
simpleViewPager = (ViewPager) findViewById(R.id.simpleViewPager);
tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout);
// Create a new Tab named "First"
TabLayout.Tab firstTab = tabLayout.newTab();
firstTab.setText("First"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the
// first tab
tabLayout.addTab(firstTab); // add  the tab at in the TabLayout
// Create a new Tab named "Second"
TabLayout.Tab secondTab = tabLayout.newTab();
secondTab.setText("Second"); // set the Text for the second Tab
secondTab.setIcon(R.drawable.ic_launcher); // set an icon for the second tab
tabLayout.addTab(secondTab); // add  the tab  in the TabLayout
// Create a new Tab named "Third"
表格布局。Tab thirdTab=tabLayout。newTab（）；
第三选项卡。setText（“第三”）；//设置第一个选项卡的文本
第三选项卡。setIcon（R.drawable.ic\U启动器）；//为第一个选项卡设置图标
表格布局。添加选项卡（第三个选项卡）；//在表格布局中添加位于的选项卡

PagerAdapter适配器=新PagerAdapter
（getSupportFragmentManager（），tabLayout。getTabCount（））；
SimpleViewManager。setAdapter（适配器）；
//addOnPageChangeListener事件更改幻灯片上的选项卡
SimpleViewManager。addOnPageChangeListener（新建TabLayout.TabLayoutOnPageChangeListener（TabLayout））；
}
}

第5步： 创建一个名为PagerAdapter的新类，并在类中扩展FragmentStatePagerAdapter。在这一步中，我们创建一个PagerAdapter类，并在类中扩展FragmentStatePagerAdapter，以使用ViewPager设置表格布局。
package com.abhiandroid.tablayoutexample;

import android.support.v4.app.Fragment;
导入android。支持v4.app。碎片管理器；
导入android。支持v4.app。FragmentStatePagerAdapter；

公共类PagerAdapter扩展了FragmentStatePagerAdapter{
int mNumOfTabs；

公共页面RADAPTER（FragmentManager fm，int NumOfTabs）{
超级（fm）；
这mNumOfTabs=NumOfTabs；
}

@覆盖
公共片段getItem（int位置）{

开关（位置）{
案例0：
FirstFragment tab1=新的FirstFragment（）；
返回选项卡1；
案例1：
SecondFragment tab2=新建SecondFragment（）；
返回表2；
案例2：
ThirdFragment tab3=新的ThirdFragment（）；
返回选项卡3；
违约：
返回null；
}
}

@覆盖
public int getCount（）{
返回mNumOfTabs；
}
}

步骤6： 现在，我们需要3个片段和3个xml布局来创建三个选项卡。因此，右键单击包文件夹创建三个片段，创建类并将它们命名为FirstFragment、SecondFragment和ThirdFragment，然后分别添加以下代码。
第一个片段。班
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

公共类FirstFragment扩展了Fragment{

public FirstFragment（）{
// Required empty public constructor
}

@覆盖
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@覆盖
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
回油充气机。充气（R.layout.fragment\u first，container，false）；
}

}

第二个片段。班
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

公共类SecondFragment扩展了片段{

公共SecondFragment（）{
// Required empty public constructor
}

@覆盖
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@覆盖
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
回油充气机。充气（R.layout.fragment\u second，container，false）；
}

}

ThirdFragment.class
package com.abhiandroid.tablayoutexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ThirdFragment extends Fragment {

public ThirdFragment() {
// Required empty public constructor
}

@覆盖
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@覆盖
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_third, container, false);
}

}

Step 7:  Now create 3 xml layouts by right clicking on res/layout -> New -> Layout Resource File and name them as fragment_first, fragment_second and fragment_third and add the following code in respective files.
Here we will design the basic simple UI for all the three tabs.
fragment_first.xml






fragment_second.xml






fragment_third.xml










		
		
			
					
					
							
								
							
																
																		
		
			

				
					
				
				
					Download This FREE eBook
				
				
					This free eBook will help you master the learning of Android Material Design in Android Studio!
				
				
					
						
		
			

				

							
		
		
		
		
		
		
		
		
		
		
		
				
			
						

							

											
																								Name
												 
												
																						

											

											
																								Email
												 
												
																						

																
						
					
													
								
									Subscribe & Download eBook Now >>

15 thoughts on “TabLayout Tutorial With Example In Android Studio”

David Vancina says:

February 26, 2022 at 10:41 pm

I was struggling mightily with how to change fragments in response to a tab selection. This helped a lot. Thanks!

James says:

December 13, 2021 at 9:10 am

It’s helpful! It saved my time to understand many things. Thank you.

Trevor says:

September 11, 2020 at 1:33 pm

This is a best site you saved me, i now understand better

RAJ KUMAR RATHAUR says:

2019年7月6日凌晨4:28

先生，我是否可以使用getFragementManager而不是getSupportFragmentManager；

阿卡什 says:

2018年9月20日上午7:40

先生，它没有显示标签页的Deafolt页

瓦因卡特·拉曼 says:

2017年12月2日上午7:48

嗨，请帮帮我
如何更改选项卡布局的图标颜色
帮助我abhi…

做记号 says:

2017年11月12日凌晨2:57

需要更正此行以匹配项目路径：tools:context=“info”。雄蜂座。材料实验室。碎片。“一个片段”。

此外，没有“OneFragment”XML文件。

做记号 says:

2017年11月11日晚上8:05

关于选项卡的非常有用的教程，但它确实使使用类对象编程看起来更加清晰和简单。好的

塞温 says:

2017年9月11日上午9:54

很棒的教程，虽然我已经有了与第二个示例类似的代码。我的问题是，我有一个活动，有5个按钮可以选择5个不同的类别。这些类别位于不同的活动中，其中包含tabylayout和5片段布局。单击特定于选项卡的按钮时，如何访问特定选项卡。

1. 上下快速移动 says:
  
  2017年12月4日凌晨3:49
  
  你有没有找到这个问题的答案>？
  
罗恩·阿里查 says:

2017年8月6日上午9:12

你好
我已经下载了这两个示例
第一个很好，但第二个不行
按下表格布局时不会加载碎片
你能看看吗？

1. 吕卡 says:
  
  2017年9月10日晚上8:08
  
  将此添加到SimpleViewManager之后的MainActivity底部。addOnPageChangeListener。
  
  表格布局。setOnTabSelectedListener（新建TabLayout.OnTabSelectedListener（）
  {
  @覆盖
  public void onTabSelected（TabLayout.Tab tabSelected）
  {
  SimpleViewManager。setCurrentItem（tabSelected.getPosition（））；
  }
  
  @覆盖
  public void onTabUnselected（TabLayout.Tab tabSelected）{}
  
  @覆盖
  公共void onTabReselected（TabLayout.Tab tabSelected）{
  
  }
  });
  
Jayanth G H公司 says:

2017年6月8日上午10:56

如何以编程方式（而不是在XML文件中）设置TabLayout的高度？

文森特 says:

2017年1月18日下午3:51

嗨，朋友，这个教程很可靠，非常感谢。
I wish to make an android app using tabbed layout with one of the tabs having a data entry form that submits data to the local host or remote server database of my MySQL (but strictly the form must be a sliding tabbed activity or fragment)

Ankush Kumar says:

August 4, 2016 at 5:01 am

I dont know How? but ,
tabLayout.setTextColor(),tabLayout.setSelectedTextColor()…and tabLayout.addtab(tab,state) does not works for me .

材料设计主题

Android Studio中的TabLayout教程及示例

基本表格布局XML代码：

表格布局的重要方法：

TabLayout的属性：

Android Studio中的TabLayout示例：

使用ViewPager的TabLayout示例2：

15 thoughts on “TabLayout Tutorial With Example In Android Studio”

Recommended Posts For You

RecyclerView As Staggered Grid With Example In Android Studio

RecyclerView Using GridLayoutManager With Example In Android Studio

RecyclerView As ListView With Example In Android Studio

Leave a Reply Cancel reply

材料设计主题

基本表格布局XML代码：

表格布局的重要方法：

TabLayout的属性：

Android Studio中的TabLayout示例：

使用ViewPager的TabLayout示例2：

Download This FREE eBook

15 thoughts on “TabLayout Tutorial With Example In Android Studio”

Recommended Posts For You

RecyclerView As Staggered Grid With Example In Android Studio

RecyclerView Using GridLayoutManager With Example In Android Studio

RecyclerView As ListView With Example In Android Studio

Leave a Reply Cancel reply

Download This FREE eBook

Download This FREE eBook

See How AbhiAndroid Step By Step Video Training Helps You Master Android App Development

See How AbhiAndroid　Step By Step　Video Training Helps You Master Android App Development