TagLayout和ViewPager的使用

转自：http://liangjingkanji.coding.me/2017/03/03/TabLayout/

TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用. 我将全面地讲解其用法. 反正我是没看过比我还详细的了. 该文章可以当做笔记来查询. 有疑惑或者补充希望能评论, 虽然我也不一定会知道答案.

演示

添加依赖

这是Android Design 包下的类, 该包是Android5.0引入的UI包

1	compile 'com.android.support:design:25.2.0'

布局

1 2 3 4 5 6

<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>

代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

public class MainActivity extends AppCompatActivity { @BindView(R.id.tab_layout) TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind( this); mTabLayout.addTab(mTabLayout.newTab().setText( "首页")); mTabLayout.addTab(mTabLayout.newTab().setText( "分类")); mTabLayout.addTab(mTabLayout.newTab().setText( "设置")); } }

第二种方式

完全通过布局创建

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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= "首页" /> <android.support.design.widget.TabItem android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "分类" /> <android.support.design.widget.TabItem android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "设置" /> </android.support.design.widget.TabLayout>

TabLayout

方法有点多

属性

修改布局的属性

显示模式

可滑动

1	app:tabMode="scrollable"

固定

1	app:tabMode="fixed"

指示器选项

1 2	app:tabIndicatorHeight= "10dp" //指示器高度 app:tabIndicatorColor= "@color/colorPrimary" // 指示器颜色

文字选项

1 2 3

app:tabSelectedTextColor= "#ffffff" // 选择的Tab的文字颜色 app:tabTextColor= "#000000" // 未选择的Tab文字颜色 app:tabTextAppearance= "@style/Base.TextAppearance.AppCompat.Large" // 文字样式

背景设置

两者没什么区别

1 2	android:background= "@color/colorAccent" // 背景 app:tabBackground= "@color/colorPrimary" //背景

标签距离

1 2 3 4 5

app:tabPaddingStart= "10dp" app:tabPaddingBottom= "10dp" app:tabPadding= "10dp" app:tabPaddingEnd= "10dp" app:tabPaddingTop= "10dp"

对齐方式

居中显示

1	app:tabGravity="center"

填充

1	app:tabGravity="fill"

偏移

从左边开始偏移距离, 必须是可滑动的模式scrollable

1	app:tabContentStart="200dp"

标签宽度限制

最大宽度

1	app:tabMaxWidth="50dp"

最小宽度

1	app:tabMinWidth="100dp"

代码

TabLayout提供的方法

标签

创建标签

1	TabLayout. Tab newTab ()

添加标签, 只有添加后才能显示

1 2 3 4 5 6 7 8 9 10 11

void addTab (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)

删除标签

1	void removeTab (TabLayout.Tab tab)

通过索引删除标签

1	void removeTabAt (int position)

删除全部标签

1	void removeAllTabs ()

得到标签

1	TabLayout. Tab getTabAt (int index)

得到标签总数

1	int getTabCount ()

设置样式

指示器

1 2	void setSelectedTabIndicatorColor (int color) // 指示器颜色 void setSelectedTabIndicatorHeight (int height) // 指示器高度

标签文本

1 2 3 4

void setTabTextColors (int normalColor, // 正常颜色 int selectedColor) // 选择状态颜色 void setTabTextColors (ColorStateList textColor) // 状态颜色

显示模式

这个之前属性里面介绍过了

1 2	int getTabMode () void setTabMode (int mode)

mode:

1. MODE_SCROLLABLE
2. MODE_FIXED

对齐方式

1 2	void setTabGravity (int gravity) int getTabGravity ()

添加View

不止是添加标签Tab还可以直接添加View

1 2 3 4 5 6 7 8 9 10 11

void addView (View child) void addView (View child, int index) void addView (View child, ViewGroup.LayoutParams params) void addView (View child, // View对象 int index, // 位置索引 ViewGroup.LayoutParams params) // 布局参数

得到当前选择的位置

1	int getSelectedTabPosition ()

选择监听器

该方法已经被废弃, 不推荐使用.

1	void setOnTabSelectedListener (TabLayout.OnTabSelectedListener listener)

替代的方法是

1	void addOnTabSelectedListener (TabLayout.OnTabSelectedListener listener)

该监听器用完后需要删除

1	void removeOnTabSelectedListener (TabLayout.OnTabSelectedListener listener)

一次性删除所有添加的选择监听器

1	void clearOnTabSelectedListeners ()

示例:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

public class MainTabSelectListener implements TabLayout.OnTabSelectedListener { @Override public void onTabSelected(TabLayout.Tab tab) { // Tab被选择 switch (tab.getPosition()) { // 我在这里处理选择不同的Tab触发不同事件 case 0: break; case 1: break; case 2: break; case 3: break; } } @Override public void onTabUnselected(TabLayout.Tab tab) { // Tab被取消选择 } @Override public void onTabReselected(TabLayout.Tab tab) { // Tab被重新选择 } }

Tab

该类是TabLayout的内部类, 表示TabLayout中的每一个标签. 我将介绍这个类的所有方法

判断是否被选择

1	boolean isSelected ()

设置为被选择状态

1	void select ()

描述内容

如果你没用设置描述内容, 默认的是标签的标题

1 2 3

TabLayout. Tab setContentDescription (int resId) // 用strings id的 TabLayout.Tab setContentDescription (CharSequence contentDesc) CharSequence getContentDescription ()

自定义标签的内容

每个标签可以尽情的自定义视图

1 2	TabLayout. Tab setCustomView (int resId) TabLayout.Tab setCustomView (View view)

标签的标签

给Tab设置tag, 然后就可以通过tag得到Tab

1 2	TabLayout. Tab setTag (Object tag) Object getTag ()

添加图标

1 2 3

TabLayout. Tab setIcon (Drawable icon) TabLayout.Tab setIcon (int resId) Drawable getIcon ()

标题的文字

1 2 3

TabLayout. Tab setText (int resId) TabLayout.Tab setText (CharSequence text) CharSequence getText ()

当前标签位置

1	int getPosition ()

关联ViewPager

​

TabLayout和ViewPager配合使用是最常见的运用方式, 可以说量身打造. 这里我将介绍两种方式.

两者配合使用后TabLayout就不能通过自己创建Tab了, 需要PagerAdapter中实现getPagerTitle()方法返回标签的文字. 标签的数量有ViewPager的分页数量决定.

布局中嵌套

布局

1 2 3 4 5 6 7 8 9 10 11

<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>

代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

public class MainActivity extends AppCompatActivity { @BindView(R.id.tab_layout) TabLayout mTabLayout; @BindView(R.id.viewpager) ViewPager mViewpager; private ArrayList<View> mList; private String[] mTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind( this); initData(); mViewpager.setAdapter( new PagerAdapter() { @Override public int getCount() { return mList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mList.get(position); container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public CharSequence getPageTitle(int position) { return mTitle[position]; } }); } private void initData() { 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[]{ "首页", "分类", "设置"}; }

代码中关联

如果布局没有嵌套

1 2 3 4 5 6 7 8 9

<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"/>

就需要在ViewPager设置PagerAdapter之前关联两者

1	mTabLayout.setupWithViewPager(mViewpager);

虽然配合ViewPager后TabLayout创建的Tab并不能正常显示, 因为setupWithViewPager内部方法是先删除所有的标签再添加.

但是还是可以通过getTabAt()得到标签之后进行修改.