Android淘宝电影日期选项卡的实现-tab 栏居中滚动

在淘宝电影上面有这样一个功能，日期可以滑动，并且选中的是在正中间，效果如下：

看完了，那么问题来了。这个功能怎么实现呢？

我们先来分析一下： 
把功能拆分一下来看，如果不能滚动，是不是很好实现？其实就是一个 tab 栏，我在前面的 blog 中Android 快速实现 ViewPager 滑动页卡切换（可用作整个 app上导航） 中就实现了此功能，然后在此功能的基础上加上滚动功能即可，具体的实现原理是通过水平滚动控件 HorizontalScrollView把 tab 栏包含起来，然后通过  tab 的选中item 来控制HorizontalScrollView的滚动。

代码实现：

1、实现 自定义 tab，这里就不细讲了，跟前面那篇 blog 几乎一样，直接贴代码了，不清楚的请看前面的 blog

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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

package toolbar.scrollstripview;   import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView;   /**  * Created by moon.zhong on 2015/5/25.  */ public class SlidingTabView extends LinearLayout {       private static final float DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0.5f;     private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;     private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3;     private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;       private static final int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;     private static final byte DEFAULT_DIVIDER_COLOR_ALPHA = 0x20;     private static final float DEFAULT_DIVIDER_HEIGHT = 0.5f;       private final float mBottomBorderThickness;     private final Paint mBottomBorderPaint;       private final int mSelectedIndicatorThickness;     private final Paint mSelectedIndicatorPaint;       private final Paint mDividerPaint;     private final float mDividerHeight;       private int mSelectedPosition;     private float mSelectionOffset;       public SlidingTabView(Context context) {         this(context, null);     }       public SlidingTabView(Context context, AttributeSet attrs) {         super(context, attrs);         setWillNotDraw(false);         final float density = getResources().getDisplayMetrics().density;           TypedValue outValue = new TypedValue();         getContext().getTheme().resolveAttribute(android.R.attr.colorForeground, outValue, true);         final int themeForegroundColor =  outValue.data;           mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);         mBottomBorderPaint = new Paint();         mBottomBorderPaint.setColor(getResources().getColor(R.color.color_line));           mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);         mSelectedIndicatorPaint = new Paint();         mSelectedIndicatorPaint.setColor(0xffff1322);           mDividerHeight = DEFAULT_DIVIDER_HEIGHT;         mDividerPaint = new Paint();         mDividerPaint.setStrokeWidth((int) (DEFAULT_DIVIDER_THICKNESS_DIPS * density));         mDividerPaint.setColor(getResources().getColor(R.color.color_line));     }       void viewPagerChange(int position, float offset){         this.mSelectedPosition = position ;         this.mSelectionOffset = offset ;         if (offset == 0){             for (int i = 0; i < getChildCount(); i++) {                 TextView child = (TextView) getChildAt(i);                 child.setTextColor(0xff666666);             }             TextView selectedTitle = (TextView) getChildAt(mSelectedPosition);             selectedTitle.setTextColor(0xffff1322);         }         invalidate();     }       @Override     protected void dispatchDraw(Canvas canvas) {         super.dispatchDraw(canvas);         final int height = getHeight();         final int childCount = getChildCount();         final int dividerHeightPx = (int) (Math.min(Math.max(0f, mDividerHeight), 1f) * height);           if (childCount > 0) {             TextView selectedTitle = (TextView) getChildAt(mSelectedPosition);             int left = selectedTitle.getLeft();             int right = selectedTitle.getRight();             selectedTitle.setTextColor(blendColors(0xff666666,0xffff1322,mSelectionOffset));               if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {                   TextView nextTitle = (TextView) getChildAt(mSelectedPosition + 1);                 left = (int) (mSelectionOffset * nextTitle.getLeft() +                         (1.0f - mSelectionOffset) * left);                 right = (int) (mSelectionOffset * nextTitle.getRight() +                         (1.0f - mSelectionOffset) * right);                 nextTitle.setTextColor(blendColors(0xffff1322,0xff666666,mSelectionOffset));             }               canvas.drawRect(left, height - mSelectedIndicatorThickness, right,                     height, mSelectedIndicatorPaint);         }           canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);           int separatorTop = (height - dividerHeightPx) / 2;         for (int i = 0; i < childCount - 1; i++) {             View child = getChildAt(i);               canvas.drawLine(child.getRight(), separatorTop, child.getRight(),                     separatorTop + dividerHeightPx, mDividerPaint);         }     }     private static int blendColors(int color1, int color2, float ratio) {         final float inverseRation = 1f - ratio;         float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);         float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);         float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);         return Color.rgb((int) r, (int) g, (int) b);     }     @Override     protected void onDraw(Canvas canvas) {         super.onDraw(canvas);     }   }

2、自定义HorizontalScrollView 
这个自定义类的功能，主要是填充 tab 的数据，通过选中的 item 来滚动HorizontalScrollView 
填充数据：

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

private void populateTabStrip() {         final PagerAdapter adapter = mViewPager.getAdapter();         final OnClickListener tabClickListener = new TabClickListener(); /**/         /*通过 viewPager 的 item 来确定tab 的个数*/           for (int i = 0; i < adapter.getCount(); i++) {             View tabView = null;             TextView tabTitleView = null;               if (mTabViewLayoutId != 0) {                 // If there is a custom tab view layout id set, try and inflate it                 tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,                         false);                 tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);             }               if (tabView == null) {                 /*创建textView*/                 tabView = createDefaultTabView(getContext());             }               if (tabTitleView == null && TextView.class.isInstance(tabView)) {                 tabTitleView = (TextView) tabView;             }               tabTitleView.setText(adapter.getPageTitle(i));             tabView.setOnClickListener(tabClickListener);             tabView.setBackgroundResource(R.drawable.item_selector_bg);             /*把 textView 放入到自定义的 tab 栏中*/             mTabStrip.addView(tabView);         }     }

滚动 ScrollView

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

/**      * 这个方法是关键      * 滚动 scrollview      * @param tabIndex      * @param positionOffset      */     private void scrollToTab(int tabIndex, int positionOffset) {         final int tabStripChildCount = mTabStrip.getChildCount();         if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {             return;         }           /*获取当前选中的 item*/         View selectedChild = mTabStrip.getChildAt(tabIndex);         if (selectedChild != null) {             /*获取当前 item 的偏移量*/             int targetScrollX = selectedChild.getLeft() + positionOffset;             /*item 的宽度*/             int width = selectedChild.getWidth();             /*item 距离正中间的偏移量*/             mTitleOffset = (int) ((mWidth-width)/2.0f);               if (tabIndex > 0 || positionOffset > 0) {                 /*计算出正在的偏移量*/                 targetScrollX -= mTitleOffset;             }             Log.v("zgy","==================mWidth======="+mWidth) ;             /*这个时候偏移的量就是屏幕的正中间*/             scrollTo(targetScrollX, 0);         }     }

具体的调用当然就是 在 ViewPager 的OnPageChangeListener中。 
完整类的代码如下：

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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209

package toolbar.scrollstripview;   import android.app.Activity; import android.content.Context; import android.os.Build; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.util.Log; import android.util.TypedValue; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.HorizontalScrollView; import android.widget.TextView;   /**  * Created by moon.zhong.  */ public class SlidingTabLayout extends HorizontalScrollView {     private static final int TITLE_OFFSET_DIPS = 24;     private static final int TAB_VIEW_PADDING_DIPS_TB = 15;     private static final int TAB_VIEW_PADDING_DIPS = 16;     private static final int TAB_VIEW_TEXT_SIZE_SP = 14;     private int mTitleOffset;       private int mTabViewLayoutId;     private int mTabViewTextViewId;       private ViewPager mViewPager;     private final SlidingTabView mTabStrip;       private int mWidth ;     public SlidingTabLayout(Context context) {         this(context, null);     }       public SlidingTabLayout(Context context, AttributeSet attrs) {         this(context, attrs, 0);     }       public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);           setHorizontalScrollBarEnabled(false);           setFillViewport(true);           mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);           mTabStrip = new SlidingTabView(context);         addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);         DisplayMetrics displayMetrics = new DisplayMetrics() ;         ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);         mWidth = (int) (displayMetrics.widthPixels) ;     }     public void setViewPager(ViewPager viewPager) {         mTabStrip.removeAllViews();           mViewPager = viewPager;         if (viewPager != null) {             viewPager.addOnPageChangeListener(new InternalViewPagerListener());             populateTabStrip();         }     }     private void populateTabStrip() {         final PagerAdapter adapter = mViewPager.getAdapter();         final OnClickListener tabClickListener = new TabClickListener(); /**/         /*通过 viewPager 的 item 来确定tab 的个数*/           for (int i = 0; i < adapter.getCount(); i++) {             View tabView = null;             TextView tabTitleView = null;               if (mTabViewLayoutId != 0) {                 // If there is a custom tab view layout id set, try and inflate it                 tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,                         false);                 tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);             }               if (tabView == null) {                 /*创建textView*/                 tabView = createDefaultTabView(getContext());             }               if (tabTitleView == null && TextView.class.isInstance(tabView)) {                 tabTitleView = (TextView) tabView;             }               tabTitleView.setText(adapter.getPageTitle(i));             tabView.setOnClickListener(tabClickListener);             tabView.setBackgroundResource(R.drawable.item_selector_bg);             /*把 textView 放入到自定义的 tab 栏中*/             mTabStrip.addView(tabView);         }     }     /*这里就是创建 textView，没什么可讲的*/     protected TextView createDefaultTabView(Context context) {         TextView textView = new TextView(context);         textView.setGravity(Gravity.CENTER);         textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);;           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {               TypedValue outValue = new TypedValue();             getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,                     outValue, true);             textView.setBackgroundResource(outValue.resourceId);         }           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {             textView.setAllCaps(true);         }           int paddingTB = (int) (TAB_VIEW_PADDING_DIPS_TB * getResources().getDisplayMetrics().density);         textView.setPadding(0, paddingTB, 0, paddingTB);         textView.setTextColor(0xff666666);         int width = (int) (100 * getResources().getDisplayMetrics().density);         ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(width, ViewGroup.LayoutParams.WRAP_CONTENT) ;         textView.setLayoutParams(params);         return textView;     }       /**      * 这个方法是关键      * 滚动 scrollview      * @param tabIndex      * @param positionOffset      */     private void scrollToTab(int tabIndex, int positionOffset) {         final int tabStripChildCount = mTabStrip.getChildCount();         if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {             return;         }           /*获取当前选中的 item*/         View selectedChild = mTabStrip.getChildAt(tabIndex);         if (selectedChild != null) {             /*获取当前 item 的偏移量*/             int targetScrollX = selectedChild.getLeft() + positionOffset;             /*item 的宽度*/             int width = selectedChild.getWidth();             /*item 距离正中间的偏移量*/             mTitleOffset = (int) ((mWidth-width)/2.0f);               if (tabIndex > 0 || positionOffset > 0) {                 /*计算出正在的偏移量*/                 targetScrollX -= mTitleOffset;             }             Log.v("zgy","==================mWidth======="+mWidth) ;             /*这个时候偏移的量就是屏幕的正中间*/             scrollTo(targetScrollX, 0);         }     }         private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {         private int mScrollState;           @Override         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {             int tabStripChildCount = mTabStrip.getChildCount();             if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {                 return;             }               mTabStrip.viewPagerChange(position, positionOffset);               View selectedTitle = mTabStrip.getChildAt(position);             int extraOffset = (selectedTitle != null)                     ? (int) (positionOffset * selectedTitle.getWidth())                     : 0;             scrollToTab(position, extraOffset);             }           @Override         public void onPageScrollStateChanged(int state) {             mScrollState = state;           }           @Override         public void onPageSelected(int position) {             if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {                 mTabStrip.viewPagerChange(position, 0f);                 scrollToTab(position, 0);             }           }       }     private class TabClickListener implements OnClickListener {         @Override         public void onClick(View v) {             for (int i = 0; i < mTabStrip.getChildCount(); i++) {                 if (v == mTabStrip.getChildAt(i)) {                     mViewPager.setCurrentItem(i);                     return;                 }             }         }     } }

代码引用

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     >       <toolbar.scrollstripview.SlidingTabLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:id="@+id/id_sliding_view"/>     <android.support.v4.view.ViewPager         android:id="@+id/id_view_pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_below="@id/id_sliding_view"/> </RelativeLayout>

运行效果：

总结： 
1、对前面Android 快速实现 ViewPager 滑动页卡切换（可用作整个 app上导航） blog 的运用； 
2、scrollTo(targetScrollX, 0)；方法的灵活运用，targetScrollX如果小于0，获取targetScrollX大于 view 的宽度的时候这个方法都不会起作用，看源码可知：

1 2 3 4 5 6 7 8 9 10 11

public void scrollTo(int x, int y) {         // we rely on the fact the View.scrollBy calls scrollTo.         if (getChildCount() > 0) {             View child = getChildAt(0);             x = clamp(x, getWidth() - mPaddingRight - mPaddingLeft, child.getWidth());             y = clamp(y, getHeight() - mPaddingBottom - mPaddingTop, child.getHeight());             if (x != mScrollX || y != mScrollY) {                 super.scrollTo(x, y);             }         }     }

对 x、y 做了相应的截取操作

源码下载

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0615/3045.html