android – 自定义选项卡指示器(箭头像指示器)

有没有像这样的指标？
它在选定的项目中有一些尖锐的箭头？

解决方法

我可以找到唯一的解决方案是获取原始TabLayout的源代码,并根据您的需要进行自定义.

事实上,你需要做的只是为了覆盖SlidingTabStrip的void draw(Canvas canvas)方法.不幸的是,SlidingTabStrip是TabLayout中的私有内部类.

幸运的是,所有的支持库代码是开放的,所以我们可以创建我们自己的TabLayoutWithArrow类.我用这个代替了标准的void draw(Canvas canvas)来绘制箭头：

@Override
        public void draw(Canvas canvas) {
            super.draw(canvas);
            // i used <dimen name="pointing_arrow_size">3dp</dimen>
            int arrowSize = getResources().getDimensionPixelSize(R.dimen.pointing_arrow_size);

            if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
                canvas.drawRect(mIndicatorLeft,getHeight() - mSelectedindicatorHeight - arrowSize,mIndicatorRight,getHeight() - arrowSize,mSelectedindicatorPaint);
                canvas.drawPath(getTrianglePath(arrowSize),mSelectedindicatorPaint);
            }
        }

        private Path getTrianglePath(int arrowSize) {
            mSelectedindicatorPaint.setStyle(Paint.Style.FILL_AND_stroke);
            mSelectedindicatorPaint.setAntiAlias(true);

            int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize*2;
            int rightPointX = leftPointX + arrowSize*2;
            int bottomPointX = leftPointX + arrowSize;
            int leftPointY = getHeight() - arrowSize;
            int bottomPointY = getHeight();

            Point left = new Point(leftPointX,leftPointY);
            Point right = new Point(rightPointX,leftPointY);
            Point bottom = new Point(bottomPointX,bottomPointY);

            Path path = new Path();
            path.setFillType(Path.FillType.EVEN_ODD);
            path.setLastPoint(left.x,left.y);
            path.lineto(right.x,right.y);
            path.lineto(bottom.x,bottom.y);
            path.lineto(left.x,left.y);
            path.close();

            return path;
        }

当然,背景,指标的特殊设计可以根据您的需要进行改进/调整.

为了使我的自定义TabLayoutWithArrow,我不得不将这些文件复制到我的项目中：

> AnimationUtils
> TabLayout
> ThemeUtils
> ValueAnimatorCompat
> ValueAnimatorCompatImplEclairMr1
> ValueAnimatorCompatImplHoneycombMr1
> ViewUtils
> ViewUtilsLollipop

要在箭头后面有透明度,您只需要将此Shape-drawable设置为TabLayoutWithArrow的背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:bottom="@dimen/pointing_arrow_size">
        <shape android:shape="rectangle" >
            <solid android:color="#FFFF00" />
        </shape>
    </item>
    <item android:height="@dimen/pointing_arrow_size"
        android:gravity="bottom">
        <shape android:shape="rectangle" >
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

实际使用情况是：

<klogi.com.viewpagerwithdifferentmenu.CustomTabLayout.TabLayoutWithArrow
    android:id="@+id/tabLayout"
    android:background="@drawable/tab_layout_background"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

我已将整个项目(TabLayoutWithArrow一页应用程序正在使用它)上传到我的保管箱 – feel free to check it out.

我希望它有帮助