Câu hỏi Chỉ báo tab tùy chỉnh (Với mũi tên xuống như chỉ báo)


enter image description here

Có một wat để tạo ra một chỉ báo như thế này không?
nó có một số mũi tên chỉ xuống như trong mục đã chọn?


12
2017-12-12 01:14


gốc


dzone.com/articles/… - IntelliJ Amiya


Các câu trả lời:


Giải pháp duy nhất tôi có thể tìm được là lấy mã nguồn của bản gốc TabLayout và tùy chỉnh nó, theo nhu cầu của bạn.

Thực tế, tất cả những gì bạn cần làm để có được mũi tên trỏ tùy chỉnh này là ghi đè SlidingTabStrip'S void draw(Canvas canvas) phương pháp. Không may, SlidingTabStrip Là private lớp bên trong bên trong TabLayout.

enter image description here

May mắn thay, tất cả mã thư viện hỗ trợ đều mở, vì vậy chúng tôi có thể tạo mã thư viện của riêng mình TabLayoutWithArrow lớp học. Tôi đã thay thế tiêu chuẩn void draw(Canvas canvas) bởi cái này để vẽ mũi tên:

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

Tất nhiên, nền, thiết kế đặc biệt của chỉ số có thể được cải thiện / điều chỉnh theo nhu cầu của bạn.

Để làm cho tùy chỉnh của tôi TabLayoutWithArrow, Tôi phải sao chép các tệp này vào dự án của mình:

  • AnimationUtils
  • TabLayout
  • ThemeUtils
  • ValueAnimatorCompat
  • ValueAnimatorCompatImplEclairMr1
  • ValueAnimatorCompatImplHoneycombMr1
  • ViewUtils
  • ViewUtilsLollipop

Để có độ trong suốt phía sau mũi tên, bạn chỉ cần đặt Shape- -drawable, như một background cho 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>

Và cách sử dụng thực tế là:

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

Tôi đã tải lên toàn bộ dự án (ứng dụng TabLayoutWithArrow + một trang đang sử dụng nó) vào tài khoản đăng của tôi - Kiểm tra nó thoải mái.

Tôi hy vọng, nó giúp


17
2017-12-23 09:48



Nó hoạt động tốt, làm thế nào chúng ta có thể tăng chiều cao của chỉ số? - Jaydeep
Câu trả lời hoàn hảo!!! Làm thế nào tôi có thể đảo ngược tam giác? - Alireza Noorali


bây giờ nó không hoạt động, lớp tintmanager bị xóa khỏi thư viện hỗ trợ 23.2.0, tôi quản lý cùng chức năng bằng cách thay đổi background drawable tại thời gian chạy bên trong để phát hiện vị trí được click, PS: kiểm tra câu hỏi này và trả lời tôi đang sử dụng cùng một thư viện: https://github.com/astuetz/PagerSlidingTabStrip/issues/141 


1
2017-07-24 07:23