———-方法一:———-

效果图:

须要的组件:

ViewPager+PagerTabStrip

布局文件代码:

  1. <!--xmlns:android_custom="http://schemas.android.com/apk/res/com.pengkv.bigo"-->
  2. <RelativeLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:gravity="center"
  7. >
  8. <android.support.v4.view.ViewPager
  9. android:id="@+id/vp_view"
  10. android:layout_width="match_parent"
  11. android:layout_height="match_parent">
  12. <android.support.v4.view.PagerTabStrip
  13. android:id="@+id/pts_view"
  14. android:layout_width="match_parent"
  15. android:layout_height="wrap_content">
  16. </android.support.v4.view.PagerTabStrip>
  17. </android.support.v4.view.ViewPager>
  18. </RelativeLayout>

页面代码:

  1. package com.pengkv.bigo;
  2. import android.app.Activity;
  3. import android.graphics.Color;
  4. import android.os.Bundle;
  5. import android.support.v4.view.PagerAdapter;
  6. import android.support.v4.view.PagerTabStrip;
  7. import android.support.v4.view.ViewPager;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.view.ViewGroup;
  11. import java.util.ArrayList;
  12. import java.util.List;
  13. /**
  14. * Created by peng on 2015/6/10.
  15. */
  16. public class ThreeActivity extends Activity {
  17. private ViewPager mViewPager;
  18. private PagerTabStrip mTabStrip;//一个viewpager的指示器,效果就是一个横的粗的下划线
  19. private LayoutInflater mInflater;
  20. private List<String> mTitleList = new ArrayList<>();//页卡标题集合
  21. private View view1, view2, view3, view4, view5;//页卡视图
  22. private List<View> mViewList = new ArrayList<>();//页卡视图集合
  23. @Override
  24. protected void onCreate(Bundle savedInstanceState) {
  25. super.onCreate(savedInstanceState);
  26. setContentView(R.layout.activity_three);
  27. mViewPager = (ViewPager) findViewById(R.id.vp_view);
  28. //对分页条进行设置
  29. mTabStrip = (PagerTabStrip) findViewById(R.id.pts_view);
  30. mTabStrip.setDrawFullUnderline(true); //设置Tab是否显示下划线
  31. mTabStrip.setTabIndicatorColor(Color.MAGENTA); //设置Tab选中时的颜色
  32. mTabStrip.setBackgroundColor(Color.DKGRAY); //设置Tab背景色
  33. mTabStrip.setTextColor(Color.WHITE);//设置字体颜色
  34. mInflater = LayoutInflater.from(this);
  35. view1 = mInflater.inflate(R.layout.activity_main, null);
  36. view2 = mInflater.inflate(R.layout.activity_main, null);
  37. view3 = mInflater.inflate(R.layout.activity_main, null);
  38. view4 = mInflater.inflate(R.layout.activity_main, null);
  39. view5 = mInflater.inflate(R.layout.activity_main, null);
  40. //加入页卡视图
  41. mViewList.add(view1);
  42. mViewList.add(view2);
  43. mViewList.add(view3);
  44. mViewList.add(view4);
  45. mViewList.add(view5);
  46. //加入页卡标题
  47. mTitleList.add("No:1");
  48. mTitleList.add("No:2");
  49. mTitleList.add("No:3");
  50. mTitleList.add("No:4");
  51. mTitleList.add("No:5");
  52. mViewPager.setAdapter(new MyPagerAdapter(mViewList));
  53. }
  54. //ViewPager适配器
  55. class MyPagerAdapter extends PagerAdapter {
  56. private List<View> mViewList;
  57. public MyPagerAdapter(List<View> mViewList) {
  58. this.mViewList = mViewList;
  59. }
  60. @Override
  61. public int getCount() {
  62. return mViewList.size();//页卡数
  63. }
  64. @Override
  65. public boolean isViewFromObject(View view, Object object) {
  66. return view == object;//官方推荐写法
  67. }
  68. @Override
  69. public Object instantiateItem(ViewGroup container, int position) {
  70. container.addView(mViewList.get(position));//加入页卡
  71. return mViewList.get(position);
  72. }
  73. @Override
  74. public void destroyItem(ViewGroup container, int position, Object object) {
  75. container.removeView(mViewList.get(position));//删除页卡
  76. }
  77. @Override
  78. public CharSequence getPageTitle(int position) {
  79. return mTitleList.get(position);//页卡标题
  80. }
  81. }
  82. }

———-方法二———-:

效果图:

须要的组件:

ViewPager+SlidingTabLayout+SlidingTabStrip(源代码见附录)

布局代码:

  1. <RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:gravity="center">
  6. <com.pengkv.bigo.SlidingTabLayout
  7. android:id="@+id/stl_square"
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"/>
  10. <android.support.v4.view.ViewPager
  11. android:id="@+id/vp_view"
  12. android:layout_width="match_parent"
  13. android:layout_height="match_parent"
  14. android:layout_below="@+id/stl_square">
  15. </android.support.v4.view.ViewPager>
  16. </RelativeLayout>

标题的布局代码:

  1. <TextView
  2. android:id="@+id/tv_text"
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="0dp"//宽度为0。配合权重
  5. android:layout_height="wrap_content"
  6. android:layout_weight="1"//这样能够使全屏显示
  7. android:gravity="center"
  8. android:paddingBottom="16dp"
  9. android:paddingTop="16dp"
  10. android:textColor="@color/primary"
  11. android:textSize="20dp"/>

页面代码:

  1. public class FourActivity extends Activity {
  2. private ViewPager mViewPager;
  3. private SlidingTabLayout mSlidingTabLayout;
  4. private LayoutInflater mInflater;
  5. private List<String> mTitleList = new ArrayList<>();//页卡标题集合
  6. private View view1, view2, view3, view4, view5;//页卡视图
  7. private List<View> mViewList = new ArrayList<>();//页卡视图集合
  8. @Override
  9. protected void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_four);
  12. mViewPager = (ViewPager) findViewById(R.id.vp_view);
  13. mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.stl_square);
  14. mInflater = LayoutInflater.from(this);
  15. view1 = mInflater.inflate(R.layout.activity_main, null);
  16. view2 = mInflater.inflate(R.layout.activity_main, null);
  17. view3 = mInflater.inflate(R.layout.activity_main, null);
  18. view4 = mInflater.inflate(R.layout.activity_main, null);
  19. view5 = mInflater.inflate(R.layout.activity_main, null);
  20. //加入页卡视图
  21. mViewList.add(view1);
  22. mViewList.add(view2);
  23. mViewList.add(view3);
  24. mViewList.add(view4);
  25. mViewList.add(view5);
  26. //加入页卡标题
  27. mTitleList.add("No:1");
  28. mTitleList.add("No:2");
  29. mTitleList.add("No:3");
  30. mTitleList.add("No:4");
  31. mTitleList.add("No:5");
  32. mViewPager.setAdapter(new MyPagerAdapter(mViewList));
  33. // 定义 SlidingTabLayout
  34. mSlidingTabLayout.setDividerColors(getResources().getColor(R.color.white));
  35. mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.primary));
  36. mSlidingTabLayout.setBackgroundColor(getResources().getColor(R.color.white));
  37. mSlidingTabLayout.setCustomTabView(R.layout.view_tab, R.id.tv_text);
  38. mSlidingTabLayout.setViewPager(mViewPager); // 载入ViewPager
  39. }
  40. //ViewPager适配器
  41. class MyPagerAdapter extends PagerAdapter {
  42. private List<View> mViewList;
  43. public MyPagerAdapter(List<View> mViewList) {
  44. this.mViewList = mViewList;
  45. }
  46. @Override
  47. public int getCount() {
  48. return mViewList.size();//页卡数
  49. }
  50. @Override
  51. public boolean isViewFromObject(View view, Object object) {
  52. return view == object;//官方推荐写法
  53. }
  54. @Override
  55. public Object instantiateItem(ViewGroup container, int position) {
  56. container.addView(mViewList.get(position));//加入页卡
  57. return mViewList.get(position);
  58. }
  59. @Override
  60. public void destroyItem(ViewGroup container, int position, Object object) {
  61. container.removeView(mViewList.get(position));//删除页卡
  62. }
  63. @Override
  64. public CharSequence getPageTitle(int position) {
  65. return mTitleList.get(position);//页卡标题
  66. }
  67. }
  68. }

附录:(来自官网,直接拷到project文件夹下)

  1. /**
  2. * To be used with ViewPager to provide a tab indicator component which give constant feedback as to
  3. * the user's scroll progress.
  4. * <p/>
  5. * To use the component, simply add it to your view hierarchy. Then in your
  6. * {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call
  7. * {@link #setViewPager(ViewPager)} providing it the ViewPager this layout is being used for.
  8. * <p/>
  9. * The colors can be customized in two ways. The first and simplest is to provide an array of colors
  10. * via {@link #setSelectedIndicatorColors(int...)} and {@link #setDividerColors(int...)}. The
  11. * alternative is via the {@link TabColorizer} interface which provides you complete control over
  12. * which color is used for any individual position.
  13. * <p/>
  14. * The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)},
  15. * providing the layout ID of your custom layout.
  16. */
  17. public class SlidingTabLayout extends HorizontalScrollView {
  18. /**
  19. * Allows complete control over the colors drawn in the tab layout. Set with
  20. * {@link #setCustomTabColorizer(TabColorizer)}.
  21. */
  22. public interface TabColorizer {
  23. /**
  24. * @return return the color of the indicator used when {@code position} is selected.
  25. */
  26. int getIndicatorColor(int position);
  27. /**
  28. * @return return the color of the divider drawn to the right of {@code position}.
  29. */
  30. int getDividerColor(int position);
  31. }
  32. private static final int TITLE_OFFSET_DIPS = 24;
  33. private static final int TAB_VIEW_PADDING_DIPS = 16;
  34. private static final int TAB_VIEW_TEXT_SIZE_SP = 12;
  35. private int mTitleOffset;
  36. private int mTabViewLayoutId;
  37. private int mTabViewTextViewId;
  38. private ViewPager mViewPager;
  39. private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;
  40. private final SlidingTabStrip mTabStrip;
  41. public SlidingTabLayout(Context context) {
  42. this(context, null);
  43. }
  44. public SlidingTabLayout(Context context, AttributeSet attrs) {
  45. this(context, attrs, 0);
  46. }
  47. public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
  48. super(context, attrs, defStyle);
  49. // Disable the Scroll Bar
  50. setHorizontalScrollBarEnabled(false);
  51. // Make sure that the Tab Strips fills this View
  52. setFillViewport(true);
  53. mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);
  54. mTabStrip = new SlidingTabStrip(context);
  55. addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
  56. }
  57. /**
  58. * Set the custom {@link TabColorizer} to be used.
  59. * <p/>
  60. * If you only require simple custmisation then you can use
  61. * {@link #setSelectedIndicatorColors(int...)} and {@link #setDividerColors(int...)} to achieve
  62. * similar effects.
  63. */
  64. public void setCustomTabColorizer(TabColorizer tabColorizer) {
  65. mTabStrip.setCustomTabColorizer(tabColorizer);
  66. }
  67. /**
  68. * Sets the colors to be used for indicating the selected tab. These colors are treated as a
  69. * circular array. Providing one color will mean that all tabs are indicated with the same color.
  70. */
  71. public void setSelectedIndicatorColors(int... colors) {
  72. mTabStrip.setSelectedIndicatorColors(colors);
  73. }
  74. /**
  75. * Sets the colors to be used for tab dividers. These colors are treated as a circular array.
  76. * Providing one color will mean that all tabs are indicated with the same color.
  77. */
  78. public void setDividerColors(int... colors) {
  79. mTabStrip.setDividerColors(colors);
  80. }
  81. /**
  82. * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are
  83. * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so
  84. * that the layout can update it's scroll position correctly.
  85. *
  86. * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
  87. */
  88. public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
  89. mViewPagerPageChangeListener = listener;
  90. }
  91. /**
  92. * Set the custom layout to be inflated for the tab views.
  93. *
  94. * @param layoutResId Layout id to be inflated
  95. * @param textViewId id of the {@link TextView} in the inflated view
  96. */
  97. public void setCustomTabView(int layoutResId, int textViewId) {
  98. mTabViewLayoutId = layoutResId;
  99. mTabViewTextViewId = textViewId;
  100. }
  101. /**
  102. * Sets the associated view pager. Note that the assumption here is that the pager content
  103. * (number of tabs and tab titles) does not change after this call has been made.
  104. */
  105. public void setViewPager(ViewPager viewPager) {
  106. mTabStrip.removeAllViews();
  107. mViewPager = viewPager;
  108. if (viewPager != null) {
  109. viewPager.setOnPageChangeListener(new InternalViewPagerListener());
  110. populateTabStrip();
  111. }
  112. }
  113. /**
  114. * Create a default view to be used for tabs. This is called if a custom tab view is not set via
  115. * {@link #setCustomTabView(int, int)}.
  116. */
  117. protected TextView createDefaultTabView(Context context) {
  118. TextView textView = new TextView(context);
  119. textView.setGravity(Gravity.CENTER);
  120. textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
  121. textView.setTypeface(Typeface.DEFAULT_BOLD);
  122. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
  123. // If we're running on Honeycomb or newer, then we can use the Theme's
  124. // selectableItemBackground to ensure that the View has a pressed state
  125. TypedValue outValue = new TypedValue();
  126. getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, outValue, true);
  127. textView.setBackgroundResource(outValue.resourceId);
  128. }
  129. if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
  130. // If we're running on ICS or newer, enable all-caps to match the Action Bar tab style
  131. textView.setAllCaps(true);
  132. }
  133. int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
  134. textView.setPadding(padding, padding, padding, padding);
  135. return textView;
  136. }
  137. private void populateTabStrip() {
  138. final PagerAdapter adapter = mViewPager.getAdapter();
  139. final View.OnClickListener tabClickListener = new TabClickListener();
  140. for (int i = 0; i < adapter.getCount(); i++) {
  141. View tabView = null;
  142. TextView tabTitleView = null;
  143. if (mTabViewLayoutId != 0) {
  144. // If there is a custom tab view layout id set, try and inflate it
  145. tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, false);
  146. tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
  147. }
  148. if (tabView == null) {
  149. tabView = createDefaultTabView(getContext());
  150. }
  151. if (tabTitleView == null && TextView.class.isInstance(tabView)) {
  152. tabTitleView = (TextView) tabView;
  153. }
  154. tabTitleView.setText(adapter.getPageTitle(i));
  155. tabView.setOnClickListener(tabClickListener);
  156. mTabStrip.addView(tabView);
  157. }
  158. }
  159. @Override
  160. protected void onAttachedToWindow() {
  161. super.onAttachedToWindow();
  162. if (mViewPager != null) {
  163. scrollToTab(mViewPager.getCurrentItem(), 0);
  164. }
  165. }
  166. private void scrollToTab(int tabIndex, int positionOffset) {
  167. final int tabStripChildCount = mTabStrip.getChildCount();
  168. if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
  169. return;
  170. }
  171. View selectedChild = mTabStrip.getChildAt(tabIndex);
  172. if (selectedChild != null) {
  173. int targetScrollX = selectedChild.getLeft() + positionOffset;
  174. if (tabIndex > 0 || positionOffset > 0) {
  175. // If we're not at the first child and are mid-scroll, make sure we obey the offset
  176. targetScrollX -= mTitleOffset;
  177. }
  178. scrollTo(targetScrollX, 0);
  179. }
  180. }
  181. private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
  182. private int mScrollState;
  183. @Override
  184. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  185. int tabStripChildCount = mTabStrip.getChildCount();
  186. if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
  187. return;
  188. }
  189. mTabStrip.onViewPagerPageChanged(position, positionOffset);
  190. View selectedTitle = mTabStrip.getChildAt(position);
  191. int extraOffset = (selectedTitle != null) ? (int) (positionOffset * selectedTitle.getWidth()) : 0;
  192. scrollToTab(position, extraOffset);
  193. if (mViewPagerPageChangeListener != null) {
  194. mViewPagerPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
  195. }
  196. }
  197. @Override
  198. public void onPageScrollStateChanged(int state) {
  199. mScrollState = state;
  200. if (mViewPagerPageChangeListener != null) {
  201. mViewPagerPageChangeListener.onPageScrollStateChanged(state);
  202. }
  203. }
  204. @Override
  205. public void onPageSelected(int position) {
  206. if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
  207. mTabStrip.onViewPagerPageChanged(position, 0f);
  208. scrollToTab(position, 0);
  209. }
  210. if (mViewPagerPageChangeListener != null) {
  211. mViewPagerPageChangeListener.onPageSelected(position);
  212. }
  213. }
  214. }
  215. private class TabClickListener implements View.OnClickListener {
  216. @Override
  217. public void onClick(View v) {
  218. for (int i = 0; i < mTabStrip.getChildCount(); i++) {
  219. if (v == mTabStrip.getChildAt(i)) {
  220. mViewPager.setCurrentItem(i);
  221. return;
  222. }
  223. }
  224. }
  225. }
  226. }

  1. class SlidingTabStrip extends LinearLayout {
  2. private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 2;
  3. private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
  4. private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 8;
  5. private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;
  6. private static final int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;
  7. private static final byte DEFAULT_DIVIDER_COLOR_ALPHA = 0x20;
  8. private static final float DEFAULT_DIVIDER_HEIGHT = 0.5f;
  9. private final int mBottomBorderThickness;
  10. private final Paint mBottomBorderPaint;
  11. private final int mSelectedIndicatorThickness;
  12. private final Paint mSelectedIndicatorPaint;
  13. private final int mDefaultBottomBorderColor;
  14. private final Paint mDividerPaint;
  15. private final float mDividerHeight;
  16. private int mSelectedPosition;
  17. private float mSelectionOffset;
  18. private SlidingTabLayout.TabColorizer mCustomTabColorizer;
  19. private final SimpleTabColorizer mDefaultTabColorizer;
  20. SlidingTabStrip(Context context) {
  21. this(context, null);
  22. }
  23. SlidingTabStrip(Context context, AttributeSet attrs) {
  24. super(context, attrs);
  25. setWillNotDraw(false);
  26. final float density = getResources().getDisplayMetrics().density;
  27. TypedValue outValue = new TypedValue();
  28. context.getTheme().resolveAttribute(R.attr.colorForeground, outValue, true);
  29. final int themeForegroundColor = outValue.data;
  30. mDefaultBottomBorderColor = setColorAlpha(themeForegroundColor, DEFAULT_BOTTOM_BORDER_COLOR_ALPHA);
  31. mDefaultTabColorizer = new SimpleTabColorizer();
  32. mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR);
  33. mDefaultTabColorizer.setDividerColors(setColorAlpha(themeForegroundColor, DEFAULT_DIVIDER_COLOR_ALPHA));
  34. mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
  35. mBottomBorderPaint = new Paint();
  36. mBottomBorderPaint.setColor(mDefaultBottomBorderColor);
  37. mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);
  38. mSelectedIndicatorPaint = new Paint();
  39. mDividerHeight = DEFAULT_DIVIDER_HEIGHT;
  40. mDividerPaint = new Paint();
  41. mDividerPaint.setStrokeWidth((int) (DEFAULT_DIVIDER_THICKNESS_DIPS * density));
  42. }
  43. void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) {
  44. mCustomTabColorizer = customTabColorizer;
  45. invalidate();
  46. }
  47. void setSelectedIndicatorColors(int... colors) {
  48. // Make sure that the custom colorizer is removed
  49. mCustomTabColorizer = null;
  50. mDefaultTabColorizer.setIndicatorColors(colors);
  51. invalidate();
  52. }
  53. void setDividerColors(int... colors) {
  54. // Make sure that the custom colorizer is removed
  55. mCustomTabColorizer = null;
  56. mDefaultTabColorizer.setDividerColors(colors);
  57. invalidate();
  58. }
  59. void onViewPagerPageChanged(int position, float positionOffset) {
  60. mSelectedPosition = position;
  61. mSelectionOffset = positionOffset;
  62. invalidate();
  63. }
  64. @Override
  65. protected void onDraw(Canvas canvas) {
  66. final int height = getHeight();
  67. final int childCount = getChildCount();
  68. final int dividerHeightPx = (int) (Math.min(Math.max(0f, mDividerHeight), 1f) * height);
  69. final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null ?
  70. mCustomTabColorizer : mDefaultTabColorizer;
  71. // Thick colored underline below the current selection
  72. if (childCount > 0) {
  73. View selectedTitle = getChildAt(mSelectedPosition);
  74. int left = selectedTitle.getLeft();
  75. int right = selectedTitle.getRight();
  76. int color = tabColorizer.getIndicatorColor(mSelectedPosition);
  77. if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {
  78. int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
  79. if (color != nextColor) {
  80. color = blendColors(nextColor, color, mSelectionOffset);
  81. }
  82. // Draw the selection partway between the tabs
  83. View nextTitle = getChildAt(mSelectedPosition + 1);
  84. left = (int) (mSelectionOffset * nextTitle.getLeft() + (1.0f - mSelectionOffset) * left);
  85. right = (int) (mSelectionOffset * nextTitle.getRight() + (1.0f - mSelectionOffset) * right);
  86. }
  87. mSelectedIndicatorPaint.setColor(color);
  88. canvas.drawRect(left, height - mSelectedIndicatorThickness, right, height, mSelectedIndicatorPaint);
  89. }
  90. // Thin underline along the entire bottom edge
  91. canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);
  92. // Vertical separators between the titles
  93. int separatorTop = (height - dividerHeightPx) / 2;
  94. for (int i = 0; i < childCount - 1; i++) {
  95. View child = getChildAt(i);
  96. mDividerPaint.setColor(tabColorizer.getDividerColor(i));
  97. canvas.drawLine(child.getRight(), separatorTop, child.getRight(), separatorTop + dividerHeightPx, mDividerPaint);
  98. }
  99. }
  100. /**
  101. * Set the alpha value of the {@code color} to be the given {@code alpha} value.
  102. */
  103. private static int setColorAlpha(int color, byte alpha) {
  104. return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
  105. }
  106. /**
  107. * Blend {@code color1} and {@code color2} using the given ratio.
  108. *
  109. * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend,
  110. * 0.0 will return {@code color2}.
  111. */
  112. private static int blendColors(int color1, int color2, float ratio) {
  113. final float inverseRation = 1f - ratio;
  114. float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
  115. float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
  116. float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
  117. return Color.rgb((int) r, (int) g, (int) b);
  118. }
  119. private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer {
  120. private int[] mIndicatorColors;
  121. private int[] mDividerColors;
  122. @Override
  123. public final int getIndicatorColor(int position) {
  124. return mIndicatorColors[position % mIndicatorColors.length];
  125. }
  126. @Override
  127. public final int getDividerColor(int position) {
  128. return mDividerColors[position % mDividerColors.length];
  129. }
  130. void setIndicatorColors(int... colors) {
  131. mIndicatorColors = colors;
  132. }
  133. void setDividerColors(int... colors) {
  134. mDividerColors = colors;
  135. }
  136. }
  137. }

———-方法三:———-

ViewPager实现页卡的最新方法–简洁的TabLayout(谷歌支持包)

ViewPager实现页卡的3种方法(谷歌组件)的更多相关文章

  1. ViewPager实现页卡的最新方法--简洁的TabLayout(谷歌支持包)

    效果图: 添加依赖包: compile ‘com.android.support:design:‘ 布局文件: <?xml version="1.0" encoding=&q ...

  2. 关于 cmd 控制台默认代码页编码的几种方法

    造成的中文及特殊字符乱码. 第一种:临时性修改编码 使用 chcp 命令,例如 chcp 65001 ,这回将当前代码页变为 utf-8编码,不过这种方式在关闭 cmd 之后会自动失效. 常用的编码及 ...

  3. 【转】实现ViewPager懒加载的三种方法

    方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...

  4. ViewPager翻页控件简单使用方法

    例子布局文件: 主activity布局文件:activity_view_pager.xml <?xml version="1.0" encoding="utf-8& ...

  5. ViewPager设置 缓存个数、页卡间距、数据更新

    在使用ViewPager常用设置 1)mViewPager.setOffscreenPageLimit(2);//设置缓存view 的个数(实际有3个,缓存2个+正在显示的1个)2)mViewPage ...

  6. html实现返回上一页的几种方法(javaScript:history.go(-1);)

    html实现返回上一页的几种方法(javaScript:history.go(-1);) 一.总结: 1.javaScript:history.go(-1); 二.方法 1.通过超链接返回到上一页 & ...

  7. vue-learning:31 - component - 组件间通信的6种方法

    vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...

  8. TabLayout和ViewPager简单实现页卡的滑动

    首先需要在当前的module中的build Gradle的 dependencies中加入以下句子 compile 'com.android.support:design:23.0.1' 因为我们用到 ...

  9. android SlidingTabLayout实现ViewPager页卡滑动效果

    先来张效果图(能够滑动切换页卡) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVuZ2t2/font/5a6L5L2T/fontsize/400/fi ...

随机推荐

  1. LSI SAS 3008配置操作

    配置 LSI SAS 3008 介绍LSISAS3008的配置操作. 4.1 登录CU界面 介绍登录LSISAS3008的CU配置界面的方法. 4.2 创建RAID 介绍在LSISAS3008扣卡上创 ...

  2. linux 下文件的比较

    1.cmp命令,比较两个文件是否相同 比较文件test1和test2,如果这两个文件完全相同,则无任何输出,否则,输出第一处不同所在的字节以及行号,然后忽略后面的不同之处,退出命令的执行. [root ...

  3. Walle 瓦力 web部署系统

    Walle 一个web部署系统工具,可能也是个持续发布工具,配置简单.功能完善.界面流畅.开箱即用! 安装步骤: 1. git clone 首先配置成功(去百度找答案) 打开git bash命令窗口执 ...

  4. [MVC4-基礎] 從資料庫取值顯示在DropDownList中

    剛開始學MVC4,以下是一些基礎的學習筆記! 完成效果像下面這樣,資料來源是既有的Database. 1.Controller public ActionResult Index() { SqlCon ...

  5. Python代码分析工具之dis模块

    转自:http://hi.baidu.com/tinyweb/item/923d012e8146d00872863ec0  ,格式调整过. 代码分析不是一个新的话题,代码分析重要性的判断比较主观,不同 ...

  6. 在Ubuntu下的Apache上建立新的website,以及enable mono

    1. 在Apache下建立新的web site a. $>cd /etc/apache2/ b. $>vi ports.conf 填加Listen 8090(注意不要打开8080,因为To ...

  7. Android view 小总结

    android 中, view 的绘制包含三步: 1. onMeasure(), 对view进行测量: 2. onLayout(),对view进行布局: 3.onDraw(),对view进行绘制. v ...

  8. Linux CentOS PhpMyAdmin安装

    安装好PHP,Apache和MySQL程序后,为了管理MySQL数据库,我们需要安装phpMyAdmin程序.下面是关于如何在centos安装phpMyAdmin程序的方法.1.管理员root身份登录 ...

  9. Android-操作栏之选项菜单

    回答第一个问题:什么是选项菜单?答:选项菜单就是可以显示在操作栏上的菜单. 菜单的视图需要建立在res/menu下. 其中,showAsAction属性用于指定菜单选项是显示在操作栏还是隐藏到溢出菜单 ...

  10. angularjs——module

    1.创建module //第一个参数是模块的名称 var head=angular.module('headApp',[]); head.controller("User",[&q ...