@@ -43,7 +43,11 @@ class TabStrip extends LinearLayout {
43
43
44
44
private final int mDefaultBottomBorderColor ;
45
45
46
+ // selected tab position (final)
46
47
private int mSelectedPosition ;
48
+ // current tab position for when the view is animating (scrolling)
49
+ private int mSelectionTabPosition ;
50
+ // scrolling offset in relation to the current tab position
47
51
private float mSelectionOffset ;
48
52
49
53
private final SimpleTabColorizer mDefaultTabColorizer ;
@@ -173,6 +177,7 @@ private void updateTabsTextFontSize(){
173
177
174
178
175
179
void onTabsViewPagerPageChanged (int position , float positionOffset ) {
180
+ mSelectionTabPosition = position ;
176
181
mSelectionOffset = positionOffset ;
177
182
invalidate ();
178
183
}
@@ -206,24 +211,30 @@ protected void dispatchDraw(Canvas canvas) {
206
211
final SimpleTabColorizer tabColorizer = mDefaultTabColorizer ;
207
212
208
213
// Thick colored underline below the current selection
209
- if (childCount > 0 && mSelectedPosition < childCount ) {
210
- View selectedTitle = getChildAt (mSelectedPosition );
214
+ if (childCount > 0 && mSelectionTabPosition < childCount ) {
215
+ View selectedTitle = getChildAt (mSelectionTabPosition );
211
216
int left = selectedTitle .getLeft ();
217
+ int width = selectedTitle .getWidth ();
212
218
int right = selectedTitle .getRight ();
213
- int color = tabColorizer .getIndicatorColor (mSelectedPosition );
214
-
215
- if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount () - 1 )) {
216
- int nextColor = tabColorizer .getIndicatorColor (mSelectedPosition + 1 );
219
+ int color = tabColorizer .getIndicatorColor (mSelectionTabPosition );
220
+ int nextTab = mSelectionTabPosition + 1 ;
221
+
222
+ // we're always at mSelectionTabPosition + mSelectionOffset (ex: 1 + 0.5)
223
+ // if we mSelectionOffset > 0f then we need to mutate the position, width and color of the selection
224
+ // if we're on the last tab, nextTab will be getChildCount() + 1 so it won't enter as there's nothing to animate
225
+ if (mSelectionOffset > 0f && nextTab >= 0 && nextTab < getChildCount ()) {
226
+ int nextColor = tabColorizer .getIndicatorColor (nextTab );
217
227
if (color != nextColor ) {
218
228
color = blendColors (nextColor , color , mSelectionOffset );
219
229
}
220
230
221
231
// Draw the selection partway between the tabs
222
- View nextTitle = getChildAt (mSelectedPosition + 1 );
223
- left = (int ) (mSelectionOffset * nextTitle .getLeft () +
224
- (1.0f - mSelectionOffset ) * left );
225
- right = (int ) (mSelectionOffset * nextTitle .getRight () +
226
- (1.0f - mSelectionOffset ) * right );
232
+ View nextTitle = getChildAt (nextTab );
233
+ // left is the current tab left + it's width * mSelectionOffset ex: 0 + (100 * 0.5) = 50, halfway through the current cell
234
+ left = (int ) (left + mSelectionOffset * width );
235
+ // right is the tab right + the next tab's width * mSelectionOffset ex: 100 + (200 * 0.5) = 200, halfway through the next cell
236
+ // this ensures that the width mutates smoothly as we move between cells
237
+ right = (int ) (right + mSelectionOffset * nextTitle .getWidth ());
227
238
}
228
239
229
240
mSelectedIndicatorPaint .setColor (color );
0 commit comments