android - 自定义选项卡指示器(像指示器一样向下箭头)

Question

有没有办法做这样的指标？
它有一些向下的箭头，就像在所选项目中一样？

Answer 1

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

事实上，要获得此自定义指向箭头，您需要做的就是重写SlidingTabStrip 的void draw(Canvas canvas) 方法。不幸的是，SlidingTabStrip 是 TabLayout 中的private 内部类。

幸运的是，所有支持库代码都是开放的，因此我们可以创建自己的 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，我必须将这些文件复制到我的项目中:

• 动画工具
• 标签布局
• ThemeUtils
• ValueAnimatorCompat
• ValueAnimatorCompatImplEclairMr1
• ValueAnimatorCompatImplHoneycombMr1
• ViewUtils
• ViewUtilsLollipop

要在箭头后面有透明度，你只需要设置这个 Shape-drawable，作为 TabLayoutWithArrow 的 background :

<?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 .

希望对你有帮助