自定义选项卡指示器（箭头向下像指示器） [英] 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?

推荐答案

我能找到的唯一解决办法就是抓住原始的源$ C ​​$ C TabLayout 和自定义，根据您的需求。

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

事实上，所有你需要做的就是这一习俗的箭头是重写的 SlidingTabStrip 无效画（油画画布）方法。不幸的是， SlidingTabStrip 是里面的私人内部类 TabLayout 。

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.

幸运的是，所有的支持库code是开放的，所以我们可以创建自己的 TabLayoutWithArrow 类。我取代了标准的无效画（油画画布）通过这样一来绘制箭头：

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


• TabLayout


• ThemeUtils


• ValueAnimatorCompat


• ValueAnimatorCompatImplEclairMr1


• ValueAnimatorCompatImplHoneycombMr1


• ViewUtils


• ViewUtilsLollipop

要具有箭头背后的透明度，你只需要设置图形 - 绘制，作为背景为 TabLayoutWithArrow ：

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"/>

我上传整个项目到我的Dropbox的（这是使用它的TabLayoutWithArrow +单页的应用程序） - 的随时检查吧。

我希望，它有助于

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