自定义Google的SlidingTabStrip库的布局

时间:2015-02-23 07:01:29

标签: java android android-layout

因此Google将SlidingTabStrip作为Android Studio示例集中的开源库包含在内:

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_DIPS和{{1} },如果我在布局文件中指定一个主题,我只能更改常见属性,如背景和前景色,但不能更改边框厚度或仅适用于SlidingTabStrip属性的其他属性

知道如何在不修改实际库代码的情况下更改这些内容吗?

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

1 个答案:

答案 0 :(得分:0)

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

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