自定义标签指示器(箭头向下像指示器)

是否有像这样的指标？
它有一些像所选项目中的尖箭头？

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

事实上,所有你需要做的就是这个自定义箭头指向是重写SlidingTabStrip的void draw(Canvas canvas)方法.不幸的是,里面SlidingTabStrip是private内部阶级TabLayout.

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

        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);
            // i used 3dp
            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作为 background为TabLayoutWithArrow:

而实际用途是:

我已将整个项目(TabLayoutWithArrow +使用它的单页应用程序)上传到我的保管箱 - 随时查看它.

我希望,这有帮助