自定义标签指示器(带有向下箭头的指示器) [英] Custom Tab Indicator(With Arrow down like Indicator)

问题描述

有没有办法制作这样的指标?
它有一些向下的箭头，就像在选定的项目中一样?

Is there a wat to make a indicator like this?
it has some pointed arrow down like in the selected item?

推荐答案

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

The only solution I could find is to grab the source code of the original TabLayout and customize it, according your needs.

事实上，你需要做的就是重写SlidingTabStrip的void draw(Canvas canvas)方法.不幸的是，SlidingTabStrip 是 TabLayout 内部的 private 内部类.

In fact, all you need to do to get this custom pointing arrow is to override SlidingTabStrip's void draw(Canvas canvas) method. Unfortunately, SlidingTabStrip is private inner class inside TabLayout.

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

Luckily, all support library code is open, so we can create our own TabLayoutWithArrow class. I replaced the standard void draw(Canvas canvas) by this one to draw the arrow:

        @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;
        }

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

Of course, the background, the particular design of the indicator can be improved/adjust according your needs.

要制作我的自定义 TabLayoutWithArrow，我必须将这些文件复制到我的项目中:

To make my custom TabLayoutWithArrow, I had to copy these files into my project:

• AnimationUtils
• 标签布局
• 主题工具
• ValueAnimatorCompat
• ValueAnimatorCompatImplEclairMr1
• ValueAnimatorCompatImplHoneycombMr1
• ViewUtils
• ViewUtilsLollipop

要在箭头后面有透明度，您只需将此 Shape-drawable 设置为 TabLayoutWithArrow 的 background:

To have transparency behind the arrow, you just need to set this Shape-drawable, as a background for the 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 + 正在使用它的单页应用程序)上传到我的保管箱 - 请随意查看.

I've uploaded the whole project (the TabLayoutWithArrow + one-page app which is using it) to my dropbox - feel free to check it out.

希望对你有帮助

这篇关于自定义标签指示器(带有向下箭头的指示器)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！