2015-02-23 71 views
0

所以谷歌包括SlidingTabStrip作为Android的工作室样本收集在一个开放源码库:自定义布局谷歌的SlidingTabStrip库

class SlidingTabStrip extends LinearLayout { 

private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0; 
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 final int mBottomBorderThickness; 
private final Paint mBottomBorderPaint; 

private final int mSelectedIndicatorThickness; 
private final Paint mSelectedIndicatorPaint; 

private final int mDefaultBottomBorderColor; 

private int mSelectedPosition; 
private float mSelectionOffset; 

private SlidingTabLayout.TabColorizer mCustomTabColorizer; 
private final SimpleTabColorizer mDefaultTabColorizer; 

SlidingTabStrip(Context context) { 
    this(context, null); 
} 

SlidingTabStrip(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    setWillNotDraw(false); 

    final float density = getResources().getDisplayMetrics().density; 

    TypedValue outValue = new TypedValue(); 
    context.getTheme().resolveAttribute(R.attr.colorForeground, outValue, true); 
    final int themeForegroundColor = outValue.data; 

    mDefaultBottomBorderColor = setColorAlpha(themeForegroundColor, 
      DEFAULT_BOTTOM_BORDER_COLOR_ALPHA); 

    mDefaultTabColorizer = new SimpleTabColorizer(); 
    mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR); 

    mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density); 
    mBottomBorderPaint = new Paint(); 
    mBottomBorderPaint.setColor(mDefaultBottomBorderColor); 

    mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density); 
    mSelectedIndicatorPaint = new Paint(); 
} 

void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) { 
    mCustomTabColorizer = customTabColorizer; 
    invalidate(); 
} 

void setSelectedIndicatorColors(int... colors) { 
    // Make sure that the custom colorizer is removed 
    mCustomTabColorizer = null; 
    mDefaultTabColorizer.setIndicatorColors(colors); 
    invalidate(); 
} 

void onViewPagerPageChanged(int position, float positionOffset) { 
    mSelectedPosition = position; 
    mSelectionOffset = positionOffset; 
    invalidate(); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    final int height = getHeight(); 
    final int childCount = getChildCount(); 
    final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null 
      ? mCustomTabColorizer 
      : mDefaultTabColorizer; 

    // Thick colored underline below the current selection 
    if (childCount > 0) { 
     View selectedTitle = getChildAt(mSelectedPosition); 
     int left = selectedTitle.getLeft(); 
     int right = selectedTitle.getRight(); 
     int color = tabColorizer.getIndicatorColor(mSelectedPosition); 

     if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) { 
      int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1); 
      if (color != nextColor) { 
       color = blendColors(nextColor, color, mSelectionOffset); 
      } 

      // Draw the selection partway between the tabs 
      View nextTitle = getChildAt(mSelectedPosition + 1); 
      left = (int) (mSelectionOffset * nextTitle.getLeft() + 
        (1.0f - mSelectionOffset) * left); 
      right = (int) (mSelectionOffset * nextTitle.getRight() + 
        (1.0f - mSelectionOffset) * right); 
     } 

     mSelectedIndicatorPaint.setColor(color); 

     canvas.drawRect(left, height - mSelectedIndicatorThickness, right, 
       height, mSelectedIndicatorPaint); 
    } 

    // Thin underline along the entire bottom edge 
    canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint); 
} 

/** 
* Set the alpha value of the {@code color} to be the given {@code alpha} value. 
*/ 
private static int setColorAlpha(int color, byte alpha) { 
    return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color)); 
} 

/** 
* Blend {@code color1} and {@code color2} using the given ratio. 
* 
* @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend, 
*    0.0 will return {@code color2}. 
*/ 
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); 
} 

private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer { 
    private int[] mIndicatorColors; 

    @Override 
    public final int getIndicatorColor(int position) { 
     return mIndicatorColors[position % mIndicatorColors.length]; 
    } 

    void setIndicatorColors(int... colors) { 
     mIndicatorColors = colors; 
    } 
} 
} 

凭借其布局文件:

<com.example.SlidingTabLayout 
    android:id="@+id/sliding_tabs" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="#000" /> 

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/pager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
</android.support.v4.view.ViewPager> 

我只是无法找出如何我可以完全自定义这个库的布局,如边框的厚度,颜色或其他属性,这些对应于库中的这些常量,如SELECTED_INDICATOR_THICKNESS_DIPSDEFAULT_SELECTED_INDICATOR_COLOR,如果我在布局fil中指定主题Ë我只能改变只适用于SlidingTabStrip性质

不知道如何改变这些,而无需修改实际的库代码共同属性,如背景和前景颜色,但不边框厚度或其它属性?

图书馆位于: https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabStrip.html

回答

1

您可以更改边框粗细,颜色或其他属性的类本身:

class SlidingTabStrip extends LinearLayout { 

private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 2; 
private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26; 
private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 8; 
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; 

根据您的要求。

颜色代码在hex格式。

例如(如何更改指示颜色):

class SlidingTabStrip extends LinearLayout { 
// change the strip color 
private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5; 
... 
} 

检查Sliding Tab Layout

+0

我想避免更改库中的代码,因为我在我的问题 – Maya 2015-02-23 07:15:07

+0

提到你可以使用[此这种情况下, ](https://github.com/jpardogo/PagerSlidingTabStrip),这里是定制[进程](https://github.com/jpardogo/PagerSlidingTabStrip#customization) – Gattsu 2015-02-23 07:18:38

+0

但这是一个完全不同的库,米问,改变这个特定的图书馆不是我的选择 – Maya 2015-02-23 10:37:37