Indicatore scheda personalizzata (con la freccia in giù come Indicator)

Question

Esiste un wat per fare un indicatore di come questo?
ha una freccia puntata verso il basso come nell'elemento selezionato?

Answer 1

L'unica soluzione che ho trovato è di prendere il codice sorgente dell'originale TabLayout e personalizzarlo, in base alle proprie esigenze.

In realtà, tutto ciò che devi fare per ottenere questa freccia di puntamento personalizzata è sostituire il metodo SlidingTabStripvoid draw(Canvas canvas). Sfortunatamente, SlidingTabStrip è la classe interna private all'interno di TabLayout.

Per fortuna, tutto il codice libreria di supporto è aperto, in modo che possiamo creare il nostro TabLayoutWithArrow classe. Ho sostituito la norma void draw(Canvas canvas) da questo per disegnare la freccia:

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

Naturalmente, lo sfondo, il particolare disegno dell'indicatore può essere migliorata/regolare in base alle tue esigenze.

a fare il mio personalizzato TabLayoutWithArrow, ho dovuto copiare questi file nel mio progetto:

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

Per avere trasparenza dietro la freccia, è solo bisogno di impostare questo Shape - drawable, come background per il 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> 

E l'utilizzo reale è:

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

Ho caricato l'intero p roject (l'app di una sola pagina di TabLayoutWithArrow + che lo sta utilizzando) alla mia casella personale - feel free to check it out.

spero, aiuta

Answer 2

ora non funziona, classe tintmanager viene rimosso dalla libreria di supporto 23.2.0, sono riuscito stessa funzionalità cambiando sfondo disegnabile in fase di esecuzione all'interno per ciclo il rilevamento di posizione, PS cliccato: controlla questa domanda e rispondo Sto usando la stessa biblioteca: https://github.com/astuetz/PagerSlidingTabStrip/issues/141