it-swarm.com.de

Indikator für benutzerdefinierte Registerkarten (mit Pfeil nach unten wie Indikator)

 enter image description here

Gibt es ein Wat, um einen solchen Indikator zu machen?
es hat einen spitzen Pfeil nach unten wie im ausgewählten Element? 

12
Charles Galvez

Die einzige Lösung, die ich finden konnte, ist, den Quellcode des ursprünglichen TabLayoutzu packen und ihn an Ihre Bedürfnisse anzupassen.

Um diesen benutzerdefinierten Zeigepfeil zu erhalten, müssen Sie lediglich die void draw(Canvas canvas)-Methode von SlidingTabStripname __ überschreiben. Leider ist SlidingTabStripprivateinnere Klasse in TabLayoutname__.

 enter image description here

Glücklicherweise ist der gesamte Support-Bibliothekscode offen, sodass wir unsere eigene TabLayoutWithArrowname__-Klasse erstellen können. Ich habe den Standard void draw(Canvas canvas) durch diesen ersetzt, um den Pfeil zu zeichnen:

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

Natürlich kann der Hintergrund, das jeweilige Design des Indikators verbessert/angepasst werden.

Um meine benutzerdefinierten TabLayoutWithArrowzu erstellen, musste ich diese Dateien in mein Projekt kopieren:

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

Um Transparenz hinter dem Pfeil zu haben, müssen Sie diesen Shapename __-drawableals backgroundfür den TabLayoutWithArroweinstellen:

<?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>

Und die tatsächliche Verwendung ist:

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

Ich habe das gesamte Projekt (die TabLayoutWithArrow + One-Page-App, die es verwendet) in meine Dropbox hochgeladen - fühlt es sich frei, es auszuprobieren .

Ich hoffe, es hilft

17

jetzt funktioniert es nicht, die tintmanager-Klasse wurde aus der Unterstützungsbibliothek 23.2.0 entfernt. Ich habe die gleiche Funktionalität durch Ändern des Hintergrunds zur Laufzeit innerhalb der Schleife für das Erkennen der geklickten Position innerhalb der Schleife erstellt. PS: Überprüfen Sie diese Frage und antworten Sie. Ich verwende dieselbe Bibliothek: https://github.com/astuetz/PagerSlidingTabStrip/issues/141

1
geniushkg

Hier ist der Code für alle, die ein aufwärts gerichtetes Dreieck mit @Konstantin Loginov-Code benötigen

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