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

问题描述

有没有一种 wat 来制作这样的指标?
它有一些向下的箭头，就像在所选项目中一样?

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:

• 动画工具
• 标签布局
• 主题实用程序
• 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屋！