TabLayout是android design包内的控件； 一般情况下，它总是喜欢和ViewPager成对出现；
实现效果图：
具体代码实现如下：
1. <!-- 如果你屏幕上显示只有少数 tab 的时候，可以设置tabMode="fixed",若很多需要拖动，则设置tabMode="scroll" -->
2. <!-- 如果 tabMode 设置成 scrollable 的，则tabGravity属性将会被忽略 -->
3. <!-- 其他可设置属性
4. app:tabIndicatorColor="#FF00FF00"
5. app:tabSelectedTextColor="#FF00FF00"
6. app:tabTextColor="#FF000000"
7. >
8. <android.support.design.widget.TabLayout
9. android:id="@+id/tabLayout"
10. android:layout_width="match_parent"
11. android:layout_height="wrap_content"
12. app:tabGravity="fill"
13. app:tabMode="fixed"
14. app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
15. <android.support.v4.view.ViewPager
16. android:id="@+id/viewPager"
17. android:layout_width="match_parent"
18. android:layout_height="match_parent"
19. />
然后就是结合了，由于我们通常在ViewPager中放置的是若干个Fragment，所以还得先实现几个Fragment，典型的像下面这个：
1. public class MoveFragment extends Fragment implements
2.
3. private
4. public static
5. new
6. new
7. "Flag", flag);
8. fragment.setArguments(bundle);
9. return
10. }
11.
12. public void
13. super.onCreate(savedInstanceState);
14. Bundle args = getArguments();
15. if (args != null) {
16. "Flag");
17. }
18. }
19.
20. @Override
21. public
22. Bundle savedInstanceState) {
23. super.onCreateView(inflater, container, savedInstanceState);
24. false);
25. initViews(view);
26. return
27. }
28.
29. public void
30. TextView tv=(TextView)view.findViewById(R.id.tv);
31. tv.setText(curFlag);
32. }
33. @Override
34. public void
35.
36. }
37.
38. }
接下去就可以使用了：
首先new 几个Fragment出来：
private static final String[] titles = new String[]{"Tab 1", "Tab 2","Tab 3", "Tab 4"};
.....
Fragment[] fragments = new Fragment[titles.length];
fragments[0]=MoveFragment.newInstance(titles[0]);
fragments[1]=XFragment.newInstance(titles[1]);
fragments[2]=YFragment.newInstance(titles[2]);
fragments[3]=ZFragment.newInstance(titles[3]);
然后实现一个FragmentPagerAdapter，注意，一定要重写getPageTitle方法，这样TabLayout就可以从中取到要显示的标题了：
1. FragmentPagerAdapter pagerAdapter = new
2. @Override
3. public int
4. return
5. }
6.
7. @Override
8. public Fragment getItem(int
9. return
10. }
11.
12. @Override
13. public CharSequence getPageTitle(int
14. return
15. }
16. };
剩下就是绑定了：
1. tabLayout = (TabLayout) findViewById(R.id.tabLayout);
2. tabLayout.setupWithViewPager(viewPager);
然而偶尔也会没有ViewPager，TabLayout也会单独使用
那么这个时候需要使用addTab方法为TabLayout添加title了：
1. tabLayout = (TabLayout) findViewById(R.id.tabLayout);
2. tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
3. tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
4. tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
5. tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
//下面的内容与Tablayout无关，可以无视
///
接下去要实现一个ViewPager滑动的时候背景颜色过渡变化的效果
在网上找到一个背景颜色可以过渡变化的View，和ViewPager结合使用：
1. ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
2. viewPager.setAdapter(pagerAdapter);
3.
4. ColorAnimationView colorAnimationView = (ColorAnimationView) findViewById(R.id.colorAnimationView);
5. 0xffFF8080,0xff8080FF,0xffffffff,0xff80ff80);
6. //you can call this method like this:
7. // colorAnimationView.setViewPager(viewPager, titles.length);//use default color
8. new
9. @Override
10. public void onPageScrolled(int position, float positionOffset, int
11. }
12.
13. @Override
14. public void onPageSelected(int
15. }
16.
17. @Override
18. public void onPageScrollStateChanged(int
19. }
20. });
布局的时候需要把这个View和ViewPager重叠（FrameLayout）在一起使用，这样就能看出效果了：
1. <FrameLayout
2. "match_parent"
3. "match_parent"
4. "@string/appbar_scrolling_view_behavior"
5. >
6.
7. <com.widget.view.ColorAnimationView
8. "@+id/colorAnimationView"
9. "match_parent"
10. "match_parent"
11.
12. <android.support.v4.view.ViewPager
13. "@+id/viewPager"
14. "match_parent"
15. "match_parent"
16. />
17. </FrameLayout>
注意ViewPager中的Fragment不要设置backgroundColor（用屁股想想也知道为什么！）
该类的源码如下：
1. package
2.
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10. import
11. /**
12. *
13. * @author Administrator
14. * @see https://github.com/TaurusXi/GuideBackgroundColorAnimation
15. */
16. public class ColorAnimationView extends View implements
17. private static final int WHITE = 0xFFFFFFFF;
18. private static final int RED = 0xffFF8080;
19. private static final int BLUE = 0xff8080FF;
20. private static final int GREEN = 0xff80ff80;
21. private static final int DURATION = 3000;
22. null;
23.
24. private
25.
26. ViewPager.OnPageChangeListener onPageChangeListener;
27.
28. public void
29. this.onPageChangeListener = onPageChangeListener;
30. }
31.
32.
33.
34. /**
35. * 这是你唯一需要关心的方法
36. * @param mViewPager 你必须在设置 Viewpager 的 Adapter 这后，才能调用这个方法。
37. * @param obj ,这个obj实现了 ColorAnimationView.OnPageChangeListener ，实现回调
38. * @param count ,viewpager孩子的数量
39. * @param colors int... colors ，你需要设置的颜色变化值~~ 如何你传人 空，那么触发默认设置的颜色动画
40. * */
41. /**
42. * This is the only method you need care about.
43. * @param mViewPager ,you need set the adpater before you call this.
44. * @param count ,this param set the count of the viewpaper's child
45. * @param colors ,this param set the change color use (int... colors),
46. * so,you could set any length if you want.And by default.
47. * if you set nothing , don't worry i have already creat
48. * a default good change color!
49. * */
50. public void setViewPager(ViewPager mViewPager, int count, int... colors) {
51. // this.mViewPager = mViewPager;
52. if (mViewPager.getAdapter() == null) {
53. throw new IllegalStateException("ViewPager does not have adapter instance.");
54. }
55. mPageChangeListener.setViewPagerChildCount(count);
56.
57. mViewPager.setOnPageChangeListener(mPageChangeListener);
58. if (colors.length == 0) {
59. createDefaultAnimation();
60. else
61. createAnimation(colors);
62. }
63.
64. }
65.
66. public
67. this(context, null, 0);
68.
69. }
70.
71. public
72. this(context, attrs, 0);
73. }
74.
75. public ColorAnimationView(Context context, AttributeSet attrs, int
76. super(context, attrs, defStyleAttr);
77. new
78. }
79.
80. private void seek(long
81. if (colorAnim == null) {
82. createDefaultAnimation();
83. }
84. colorAnim.setCurrentPlayTime(seekTime);
85. }
86.
87. private void createAnimation(int... colors) {
88. if (colorAnim == null) {
89. this,"backgroundColor", colors);
90. new
91. colorAnim.setDuration(DURATION);
92. this);
93. }
94. }
95.
96. private void
97. this,"backgroundColor", WHITE, RED, BLUE, GREEN);
98. new
99. colorAnim.setDuration(DURATION);
100. this);
101. }
102.
103. @Override public void
104.
105. }
106.
107. @Override public void
108. }
109.
110. @Override public void
111.
112. }
113.
114. @Override public void
115.
116. }
117.
118. @Override public void
119. invalidate();
120. // long playtime = colorAnim.getCurrentPlayTime();
121. }
122.
123. private class PageChangeListener implements
124.
125. private int
126.
127. public void setViewPagerChildCount(int
128. this.viewPagerChildCount = viewPagerChildCount;
129. }
130.
131. public int
132. return
133. }
134.
135. @Override
136. public void onPageScrolled(int position, float positionOffset, int
137.
138. int count = getViewPagerChildCount() - 1;
139. if (count != 0) {
140. float
141. int progress = (int) (length * DURATION);
142. this.seek(progress);
143. }
144. // call the method by default
145. if (onPageChangeListener!=null){
146. onPageChangeListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
147. }
148.
149. }
150.
151. @Override
152. public void onPageSelected(int
153. if (onPageChangeListener!=null) {
154. onPageChangeListener.onPageSelected(position);
155. }
156. }
157.
158. @Override
159. public void onPageScrollStateChanged(int
160. if (onPageChangeListener!=null) {
161. onPageChangeListener.onPageScrollStateChanged(state);
162. }
163. }
164. }
165. }
有些时候或许有需求，要求TabLayout或者ViewPager在某些情况下不能滑动，这个时候就需要我们能主动控制TabLayout和ViewPager什么可以滑动，什么时候不可以滑动。
1、先要自定义一个可以自由控制viewpager是否能滑动的viewpager:
package com.example.yk.tabviewpagertest;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
* Created by yk on 2016/12/7.
*/
public class NoScrollViewPager extends ViewPager{
public void setNeedScroll(boolean needScroll) {
isNeedScroll = needScroll;
}
private boolean isNeedScroll=true;
public NoScrollViewPager(Context context) {
super(context);
}
public NoScrollViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if(isNeedScroll){
return super.onTouchEvent(ev);
}else {
return false;
}
}
// @Override
// public boolean onInterceptTouchEvent(MotionEvent ev) {
// return super.onInterceptTouchEvent(ev);
// return false;
// }
}2、自由控制TabLayout是否可以点击：
public void setTabLayoutCanClick(boolean canClick){
LinearLayout tabStrip= (LinearLayout) tabLayout.getChildAt(0);
for (int i = 0; i < tabStrip.getChildCount(); i++) {
View tabView = tabStrip.getChildAt(i);
if(tabView !=null){
tabView.setClickable(canClick);
}
}
}整体代码：
MainActivity中代码：
package com.example.yk.tabviewpagertest;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private NoScrollViewPager viewPager;
private String[] mTabTexts;
private ArrayList<Fragment> mFragmentsList;
private PurFragmentPageAdapter pageAdapter;
private Button btnCan,btnCanNot;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (NoScrollViewPager) findViewById(R.id.viewpager);
btnCan = (Button) findViewById(R.id.btn_can);
btnCanNot= (Button) findViewById(R.id.btn_can_not);
mTabTexts = new String[]{"定量", "计件", "散斤"};
mFragmentsList = new ArrayList<>();
mFragmentsList.add(new FirstFragment());
mFragmentsList.add(new SecondFragment());
mFragmentsList.add(new ThirdFragment());
for (int i = 0; i < mTabTexts.length; i++) {
tabLayout.addTab(tabLayout.newTab().setText(mTabTexts[i]));
}
tabLayout.setTabMode(TabLayout.MODE_FIXED);
pageAdapter = new PurFragmentPageAdapter(getSupportFragmentManager(), mFragmentsList, mTabTexts);
viewPager.setAdapter(pageAdapter);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(1);//设置默认选中某个tab
btnCanNot.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setNeedScroll(false);
setTabLayoutCanClick(false);
}
});
btnCan.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setNeedScroll(true);
setTabLayoutCanClick(true);
}
});
}
public void setTabLayoutCanClick(boolean canClick){
LinearLayout tabStrip= (LinearLayout) tabLayout.getChildAt(0);
for (int i = 0; i < tabStrip.getChildCount(); i++) {
View tabView = tabStrip.getChildAt(i);
if(tabView !=null){
tabView.setClickable(canClick);
}
}
}
}自定义viewPager中的代码和上面的一样，就不赘述了。
TabLayout禁止选择
项目中有个页面上面是TabLayout下面是Listview，选择TabLayout的选项卡更新下面Listview里面的数据，在请求的时候想禁用TabLayout选项卡来避免用户频繁点击选项卡造成Listview的数据错误。
如果只是调用TabLayout的setClickable方法是不起作用的，需要获取到每个选项卡的tabView然后再分别设置。
LinearLayout tabStrip = (LinearLayout) tabLayout.getChildAt(0);
for (int i = 0; i < tabStrip.getChildCount(); i++) {
View tabView = tabStrip.getChildAt(i);
if (tabView != null) {
tabView.setClickable(false);
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
