benutzerdefinierte Tab-Anzeige (mit wie Indicator Pfeil nach unten)

Question

Gibt es einen wat einen Indikatoren wie diese zu machen?
es hat einige spitzen pfeil nach unten wie im ausgewählten artikel?

Answer 1

Die einzige Lösung, die ich finden konnte, ist, den Quellcode des ursprünglichen TabLayout zu nehmen und es entsprechend Ihren Bedürfnissen anzupassen.

In der Tat, alles, was Sie tun müssen, um diese benutzerdefinierte zeigenden Pfeil zu erhalten, ist SlidingTabStripvoid draw(Canvas canvas) Methode überschreiben. Leider ist SlidingTabStripprivate innere Klasse innerhalb TabLayout.

Zum Glück, all Support-Bibliothek Code ist offen, so dass wir unsere eigene TabLayoutWithArrow Klasse erstellen. Ich ersetzte den Standard void draw(Canvas canvas) von diesem auf 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 den Hintergrund, die besondere Konstruktion des Indikators verbessert werden kann/einstellen nach Ihren Bedürfnissen.

zu meinen benutzerdefinierten TabLayoutWithArrow, zu machen hatte ich diese Dateien in mein Projekt zu kopieren:

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

Um Transparenz hinter dem Pfeil zu haben, müssen Sie ihn nur Shape setzen - für die TabLayoutWithArrowdrawable als 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> 

Und die tatsächliche Nutzung 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 die ganze p hochgeladen roject (das TabLayoutWithArrow + eine Seite App, die es verwendet) zu meiner Dropbox - feel free to check it out.

Ich hoffe, es hilft

Answer 2

jetzt funktioniert es nicht, tintmanager Klasse von Support-Bibliothek entfernt wird 23.2.0, ich schaffte gleiche Funktionalität von innen für Schleife Hintergrund ziehbar zur Laufzeit zu ändern Erfassen geklickt Position, PS: Überprüfen Sie diese Frage und antworten Sie Ich verwende die gleiche Bibliothek: https://github.com/astuetz/PagerSlidingTabStrip/issues/141