自定義標簽指示符（與指示符一樣向下箭頭）

Question

是否有水做這樣的指標？
它有一些向下箭頭，就像在所選項目中一樣？

Answer 1

我能找到的唯一解決方案是獲取原始TabLayout的源代碼並根據需要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 ，我必須將這些文件復制到我的項目中：

• AnimationUtils
• TabLayout
• ThemeUtils
• ValueAnimatorCompat
• ValueAnimatorCompatImplEclairMr1
• ValueAnimatorCompatImplHoneycombMr1
• ViewUtils
• ViewUtils棒棒糖

為了使箭頭后面具有透明度，您只需要將此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 +一頁應用程序）上載到我的保管箱- 隨時查看 。

希望對您有幫助

Answer 2

現在它不起作用，從支持庫23.2.0中刪除了tintmanager類，我通過在運行時更改后台可繪制背景來管理相同的功能，以循環檢測單擊的位置，PS：檢查此問題並回答我正在使用同一庫： https： //github.com/astuetz/PagerSlidingTabStrip/issues/141

Answer 3

這是使用@Konstantin Loginov代碼的任何需要向上三角形的代碼

private Path getTrianglePath(int arrowSize) {

        mSelectedIndicatorPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mSelectedIndicatorPaint.setAntiAlias(true);
        mSelectedIndicatorPaint.setColor(Color.WHITE);

        int leftPointX = mIndicatorLeft + (mIndicatorRight - mIndicatorLeft) / 2 - arrowSize * 1 / 2;
        int mTopX = leftPointX + arrowSize;
        int mTopY = getHeight() - arrowSize;
        int rightPointX = leftPointX + arrowSize * 2;

        int leftPointY = getHeight();

        Point left = new Point(leftPointX, leftPointY);
        Point right = new Point(rightPointX, leftPointY);
        Point bottom = new Point(mTopX, mTopY);

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