कस्टम टैब संकेतक (तीर के साथ संकेतक की तरह नीचे)

Question

वहाँ इस तरह एक सूचक बनाने के लिए एक वाट है?
इसमें चयनित आइटम में कुछ बिंदु तीर नीचे है?

Answer 1

एकमात्र समाधान जो मुझे मिल सकता है वह है मूल TabLayout के स्रोत कोड को पकड़ना और अपनी आवश्यकताओं के अनुसार इसे अनुकूलित करना।

वास्तव में, आपको यह कस्टम पॉइंटिंग तीर प्राप्त करने के लिए केवल SlidingTabStrip की void draw(Canvas canvas) विधि को ओवरराइड करने की आवश्यकता है। दुर्भाग्यवश, SlidingTabStripprivateTabLayout के अंदर आंतरिक कक्षा है।

सौभाग्य से, सभी का समर्थन पुस्तकालय कोड खुला है, इसलिए हम अपने ही 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; 
     } 

बेशक

, पृष्ठभूमि, सूचक की विशेष डिजाइन सुधार किया जा सकता/अपनी आवश्यकताओं के अनुसार समायोजित करें।

ThemeUtils

TabLayout

• AnimationUtils ValueAnimatorCompat
• ValueAnimatorCompatImplEclairMr1
• ValueAnimatorCompatImplHoneycombMr1
:

अपने कस्टम 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> 

और वास्तविक उपयोग है: drawable, TabLayoutWithArrow के लिए एक background के रूप में -

• ViewUtils
• ViewUtilsLollipop

तीर के पीछे पारदर्शिता के लिए आपको सिर्फ इस Shape निर्धारित करने की आवश्यकता

<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 + एक-पेज ऐप जो इसका उपयोग कर रहा है) मेरे ड्रॉपबॉक्स में - feel free to check it out।

मुझे आशा है कि, यह

Answer 2

में मदद करता है अब यह काम नहीं करता, tintmanager वर्ग समर्थन पुस्तकालय 23.2.0 से निकाल दिया जाता है, मैं पाश के लिए अंदर रनटाइम पर पृष्ठभूमि drawable बदलकर ही कार्यक्षमता में कामयाब पता लगाने की स्थिति, पुनश्च क्लिक किया: इस प्रश्न और उत्तर की जांच करें मैं एक ही पुस्तकालय का उपयोग कर रहा हूं: https://github.com/astuetz/PagerSlidingTabStrip/issues/141