Làm cách nào để thay đổi màu chữ Tab đã chọn bằng cách sử dụng TabLayout từ mã trong Android?

Question

Tôi đang sử dụng android.support.widget.TabLayout để làm cho một cái nhìn Tab, và tôi muốn thay đổi màu sắc văn bản tab được chọn từ mã (không phải từ xml hoặc bằng cách tạo kiểu tóc). Tôi có thể làm cái này như thế nào ?

Answer 1

Nếu bạn đang sử dụng các thư viện hỗ trợ thiết kế thêm mã này vào tabactivity bạn

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF0000")); 
    tabLayout.setSelectedTabIndicatorHeight((int) (5 * getResources().getDisplayMetrics().density)); 
    tabLayout.setTabTextColors(Color.parseColor("#727272"), Color.parseColor("#ffffff")); 

này sẽ thiết lập màu chữ tab cũng như màu sắc chỉ số tab trong tabactivity của bạn.

Answer 2

Sao chép hai tập tin sau đây:

1. SlidingTabLayout.java:

gói com.some.package;

import android.content.Context; 
import android.graphics.Color; 
import android.graphics.Typeface; 
import android.os.Build; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.util.SparseArray; 
import android.util.TypedValue; 
import android.view.Gravity; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.HorizontalScrollView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 


/** 
* To be used with ViewPager to provide a tab indicator component which give constant feedback as to 
* the user's scroll progress. 
* <p> 
* To use the component, simply add it to your view hierarchy. Then in your 
* {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call 
* {@link #setViewPager(ViewPager)} providing it the ViewPager this layout is being used for. 
* <p> 
* The colors can be customized in two ways. The first and simplest is to provide an array of colors 
* via {@link #setSelectedIndicatorColors(int...)}. The 
* alternative is via the {@link TabColorizer} interface which provides you complete control over 
* which color is used for any individual position. 
* <p> 
* The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)}, 
* providing the layout ID of your custom layout. 
*/ 
public class SlidingTabLayout extends HorizontalScrollView { 
    /** 
    * Allows complete control over the colors drawn in the tab layout. Set with 
    * {@link #setCustomTabColorizer(TabColorizer)}. 
    */ 
    public interface TabColorizer { 

     /** 
     * @return return the color of the indicator used when {@code position} is selected. 
     */ 
     int getIndicatorColor(int position); 

    } 

    private static final int TITLE_OFFSET_DIPS = 24; 
    private static final int TAB_VIEW_PADDING_DIPS = 16; 
    private static final int TAB_VIEW_SIDE_PADDING_DIPS = 18; 

    private static final int TAB_VIEW_TEXT_SIZE_SP = 12; 

    private int mTitleOffset; 

    private int mTabViewLayoutId; 
    private int mTabViewTextViewId; 
    private boolean mDistributeEvenly; 

    private ViewPager mViewPager; 
    private SparseArray<String> mContentDescriptions = new SparseArray<String>(); 
    private ViewPager.OnPageChangeListener mViewPagerPageChangeListener; 

    private final SlidingTabStrip mTabStrip; 
    Context mContext; 

    public SlidingTabLayout(Context context) { 
     this(context, null); 
     mContext = context; 
    } 

    public SlidingTabLayout(Context context, AttributeSet attrs) { 
     this(context, attrs, 0); 
     mContext = context; 
    } 

    public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 

     // Disable the Scroll Bar 
     setHorizontalScrollBarEnabled(false); 
     // Make sure that the Tab Strips fills this View 
     setFillViewport(true); 

     mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density); 

     mTabStrip = new SlidingTabStrip(context); 
     addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
     mContext = context; 
    } 

    /** 
    * Set the custom {@link TabColorizer} to be used. 
    * 
    * If you only require simple custmisation then you can use 
    * {@link #setSelectedIndicatorColors(int...)} to achieve 
    * similar effects. 
    */ 
    public void setCustomTabColorizer(TabColorizer tabColorizer) { 
     mTabStrip.setCustomTabColorizer(tabColorizer); 
    } 

    public void setDistributeEvenly(boolean distributeEvenly) { 
     mDistributeEvenly = distributeEvenly; 
    } 

    /** 
    * Sets the colors to be used for indicating the selected tab. These colors are treated as a 
    * circular array. Providing one color will mean that all tabs are indicated with the same color. 
    */ 
    public void setSelectedIndicatorColors(int... colors) { 
     mTabStrip.setSelectedIndicatorColors(colors); 
    } 

    /** 
    * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are 
    * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so 
    * that the layout can update it's scroll position correctly. 
    * 
    * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener) 
    */ 
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { 
     mViewPagerPageChangeListener = listener; 
    } 

    /** 
    * Set the custom layout to be inflated for the tab views. 
    * 
    * @param layoutResId Layout id to be inflated 
    * @param textViewId id of the {@link TextView} in the inflated view 
    */ 
    public void setCustomTabView(int layoutResId, int textViewId) { 
     mTabViewLayoutId = layoutResId; 
     mTabViewTextViewId = textViewId; 
    } 

    /** 
    * Sets the associated view pager. Note that the assumption here is that the pager content 
    * (number of tabs and tab titles) does not change after this call has been made. 
    */ 
    public void setViewPager(ViewPager viewPager) { 
     mTabStrip.removeAllViews(); 

     mViewPager = viewPager; 
     if (viewPager != null) { 

      InternalViewPagerListener listener = new InternalViewPagerListener(); 
      viewPager.setOnPageChangeListener(listener); 
      populateTabStrip(); 
      listener.onPageSelected(0); 
     } 
    } 

    /** 
    * Create a default view to be used for tabs. This is called if a custom tab view is not set via 
    * {@link #setCustomTabView(int, int)}. 
    */ 
    protected TextView createDefaultTabView(Context context) { 
     Typeface typeFace; 

     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.ICE_CREAM_SANDWICH) { 
      typeFace = //set your typeface here 
     }else{ 
      typeFace = //set your typeface here 
     } 

     TextView textView= new TextView(context); 

     textView.setTextColor(context.getResources().getColor(R.color.inactive_tab_color)); 
     textView.setGravity(Gravity.CENTER); 
     textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP); 
     textView.setTypeface(typeFace); 
     textView.setLayoutParams(new LinearLayout.LayoutParams(
       LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.HORIZONTAL)); 

     TypedValue outValue = new TypedValue(); 
     getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, 
       outValue, true); 
     textView.setBackgroundResource(outValue.resourceId); 
     textView.setAllCaps(true); 

     int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density); 
     int sidePadding = (int) (TAB_VIEW_SIDE_PADDING_DIPS * getResources().getDisplayMetrics().density); 
     textView.setPadding(sidePadding, padding, sidePadding, padding); 

     return textView; 
    } 

    private void populateTabStrip() { 
     final PagerAdapter adapter = mViewPager.getAdapter(); 
     final View.OnClickListener tabClickListener = new TabClickListener(); 

     for (int i = 0; i < adapter.getCount(); i++) { 
      View tabView = null; 
      TextView tabTitleView = null; 

      if (mTabViewLayoutId != 0) { 
       // If there is a custom tab view layout id set, try and inflate it 
       tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, 
         false); 
       tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId); 
      } 

      if (tabView == null) { 
       tabView = createDefaultTabView(getContext()); 
      } 

      if (tabTitleView == null && TextView.class.isInstance(tabView)) { 
       tabTitleView = (TextView) tabView; 
      } 

      if (mDistributeEvenly) { 
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams(); 
       lp.width = 0; 
       lp.weight = 1; 
      } 

      tabTitleView.setText(adapter.getPageTitle(i)); 
      tabView.setOnClickListener(tabClickListener); 
      String desc = mContentDescriptions.get(i, null); 
      if (desc != null) { 
       tabView.setContentDescription(desc); 
      } 

      mTabStrip.addView(tabView); 
      if (i == mViewPager.getCurrentItem()) { 
       tabView.setSelected(true); 
      } 
     } 
    } 

    public void setContentDescription(int i, String desc) { 
     mContentDescriptions.put(i, desc); 
    } 

    @Override 
    protected void onAttachedToWindow() { 
     super.onAttachedToWindow(); 

     if (mViewPager != null) { 
      scrollToTab(mViewPager.getCurrentItem(), 0); 
     } 
    } 

    private void scrollToTab(int tabIndex, int positionOffset) { 
     final int tabStripChildCount = mTabStrip.getChildCount(); 
     if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) { 
      return; 
     } 

     View selectedChild = mTabStrip.getChildAt(tabIndex); 
     if (selectedChild != null) { 
      int targetScrollX = selectedChild.getLeft() + positionOffset; 

      if (tabIndex > 0 || positionOffset > 0) { 
       // If we're not at the first child and are mid-scroll, make sure we obey the offset 
       targetScrollX -= mTitleOffset; 
      } 

      scrollTo(targetScrollX, 0); 
     } 
    } 

    private class InternalViewPagerListener implements ViewPager.OnPageChangeListener { 
     private int mScrollState; 

     @Override 
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
      int tabStripChildCount = mTabStrip.getChildCount(); 
      if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) { 
       return; 
      } 

      mTabStrip.onViewPagerPageChanged(position, positionOffset); 

      View selectedTitle = mTabStrip.getChildAt(position); 

      int extraOffset = (selectedTitle != null) 
        ? (int) (positionOffset * selectedTitle.getWidth()) 
        : 0; 
      scrollToTab(position, extraOffset); 

      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageScrolled(position, positionOffset, 
         positionOffsetPixels); 
      } 



     } 

     @Override 
     public void onPageScrollStateChanged(int state) { 
      mScrollState = state; 

      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageScrollStateChanged(state); 
      } 
     } 

     @Override 
     public void onPageSelected(int position) { 

      if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { 
       mTabStrip.onViewPagerPageChanged(position, 0f); 
       scrollToTab(position, 0); 
      } 
      for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
       mTabStrip.getChildAt(i).setSelected(position == i); 
      } 
      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageSelected(position); 
      } 

      View selectedTitle = mTabStrip.getChildAt(position); 
      ((TextView) selectedTitle).setTextColor(Color.WHITE); 

      int remainingTabs = mTabStrip.getChildCount() - position; 
      for(int i=0 ;i< mTabStrip.getChildCount(); i++){ 
       if(i == position) 
        continue; 

       View remainingTitles = mTabStrip.getChildAt(i); 
       ((TextView) remainingTitles).setTextColor(mContext.getResources().getColor(R.color.inactive_tab_color)); 
      } 

     } 

    } 

    private class TabClickListener implements View.OnClickListener { 
     @Override 
     public void onClick(View v) { 
      for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
       if (v == mTabStrip.getChildAt(i)) { 
        mViewPager.setCurrentItem(i); 
        return; 
       } 
      } 
     } 
    } 

} 

2. SlidingTabStrip.java:

   gói com.some.package;

   nhập android.content.Context; nhập android.graphics.Canvas; nhập android.graphics.Color; nhập android.graphics.Paint; nhập android.util.AttributeSet; nhập android.util.TypedValue; nhập android.view.View; nhập android.widget.LinearLayout;

   lớp SlidingTabStrip kéo dài LinearLayout {

   private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0; 
   private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26; 
   private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 2; 
   private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5; 
   
   private final int mBottomBorderThickness; 
   private final Paint mBottomBorderPaint; 
   
   private final int mSelectedIndicatorThickness; 
   private final Paint mSelectedIndicatorPaint; 
   
   private int mSelectedPosition; 
   private float mSelectionOffset; 
   
   private SlidingTabLayout.TabColorizer mCustomTabColorizer; 
   private final SimpleTabColorizer mDefaultTabColorizer; 
   
   SlidingTabStrip(Context context) { 
       this(context, null); 
   } 
   
   SlidingTabStrip(Context context, AttributeSet attrs) { 
       super(context, attrs); 
       setWillNotDraw(false); 
   
       final float density = getResources().getDisplayMetrics().density; 
   
       TypedValue outValue = new TypedValue(); 
       context.getTheme().resolveAttribute(android.R.attr.colorForeground, outValue, true); 
       final int themeForegroundColor = outValue.data; 
   
       int defaultBottomBorderColor = setColorAlpha(themeForegroundColor, 
         DEFAULT_BOTTOM_BORDER_COLOR_ALPHA); 
   
       mDefaultTabColorizer = new SimpleTabColorizer(); 
       mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR); 
   
       mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density); 
       mBottomBorderPaint = new Paint(); 
       mBottomBorderPaint.setColor(defaultBottomBorderColor); 
   
       mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density); 
       mSelectedIndicatorPaint = new Paint(); 
   } 
   
   void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) { 
       mCustomTabColorizer = customTabColorizer; 
       invalidate(); 
   } 
   
   void setSelectedIndicatorColors(int... colors) { 
       // Make sure that the custom colorizer is removed 
       mCustomTabColorizer = null; 
       mDefaultTabColorizer.setIndicatorColors(colors); 
       invalidate(); 
   } 
   
   void onViewPagerPageChanged(int position, float positionOffset) { 
       mSelectedPosition = position; 
       mSelectionOffset = positionOffset; 
       invalidate(); 
   } 
   
   @Override 
   protected void onDraw(Canvas canvas) { 
       final int height = getHeight(); 
       final int childCount = getChildCount(); 
       final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null 
         ? mCustomTabColorizer 
         : mDefaultTabColorizer; 
   
       // Thick colored underline below the current selection 
       if (childCount > 0) { 
        View selectedTitle = getChildAt(mSelectedPosition); 
        int left = selectedTitle.getLeft(); 
        int right = selectedTitle.getRight(); 
        int color = tabColorizer.getIndicatorColor(mSelectedPosition); 
   
        if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) { 
         int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1); 
         if (color != nextColor) { 
          color = blendColors(nextColor, color, mSelectionOffset); 
         } 
   
         // Draw the selection partway between the tabs 
         View nextTitle = getChildAt(mSelectedPosition + 1); 
         left = (int) (mSelectionOffset * nextTitle.getLeft() + 
           (1.0f - mSelectionOffset) * left); 
         right = (int) (mSelectionOffset * nextTitle.getRight() + 
           (1.0f - mSelectionOffset) * right); 
        } 
   
        mSelectedIndicatorPaint.setColor(color); 
   
        canvas.drawRect(left, height - mSelectedIndicatorThickness, right, 
          height, mSelectedIndicatorPaint); 
       } 
   
       // Thin underline along the entire bottom edge 
       canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint); 
   
   } 
   
   /** 
   * Set the alpha value of the {@code color} to be the given {@code alpha} value. 
   */ 
   private static int setColorAlpha(int color, byte alpha) { 
       return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color)); 
   } 
   
   /** 
   * Blend {@code color1} and {@code color2} using the given ratio. 
   * 
   * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend, 
   *    0.0 will return {@code color2}. 
   */ 
   private static int blendColors(int color1, int color2, float ratio) { 
       final float inverseRation = 1f - ratio; 
       float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation); 
       float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation); 
       float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation); 
       return Color.rgb((int) r, (int) g, (int) b); 
   } 
   
   private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer { 
       private int[] mIndicatorColors; 
   
       @Override 
       public final int getIndicatorColor(int position) { 
        return mIndicatorColors[position % mIndicatorColors.length]; 
       } 
   
       void setIndicatorColors(int... colors) { 
        mIndicatorColors = colors; 
       } 
   } 
   

   }

tôi đã không viết những trên hai tập tin. Tôi lấy nó từ trang tài liệu android chính thức.

Bây giờ, hãy sử dụng tiện ích con SlidingTabLayout trong tệp xml bố cục của bạn.

và cuối cùng là thêm mã này vào hoạt động của bạn/Fragment:

CONTENT = new String [] { "A", "B", "C", "D"};

mPager = (ViewPager) view.findViewById(R.id.pager); 
SlidingTabsAdapter adapter =new SlidingTabsAdapter(getChildFragmentManager()); 

     mPager.setAdapter(adapter); 

     mPager.setCurrentItem(0); 

     slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); 
     slidingTabLayout.setDistributeEvenly(true); 
     slidingTabLayout.setSelectedIndicatorColors(getResources().getColor(someColorID)); 
     slidingTabLayout.setViewPager(mPager); 

tin lớp SlidingTabsAdapter kéo dài FragmentPagerAdapter {

public SlidingTabsAdapter(FragmentManager fm) { 
    super(fm); 
} 

@Override 
public Fragment getItem(int position) { 

    Fragment fragment; 
    Bundle b; 

    switch (position){ 

     case 0: 

      fragment = new FragmentA(); 

     break; 

     case 1: 

      fragment = new FragmentB(); 

     break; 

     case 2: 

      fragment = new FragmentC(); 

     break; 

     case 3: 

      fragment = new FragmentD(); 

     break; 

     default: 

      fragment = new FragmentZ(); 

    } 

    return fragment; 
} 

@Override 
public CharSequence getPageTitle(int position) { 
    return CONTENT[position % CONTENT.length].toUpperCase(); 
} 

@Override 
public int getCount() { 
    return CONTENT.length; 
} 

}

Answer 3

Thật đơn giản sử dụng XML. Chỉ cần thêm 2 thuộc tính sau vào bố cục tab của bạn.

app:tabSelectedTextColor="@color/color_primary_text" 
app:tabTextColor="@color/color_secondary_text" 

Vì vậy, mã của bạn sẽ trông giống như thế này.

<android.support.design.widget.TabLayout 
    android:id="@+id/tab_layout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentStart="true" 
    android:layout_gravity="bottom" 
    android:background="@color/button_background" 
    android:fillViewport="true" 
    app:tabBackground="@drawable/fixed_bottom_button" 
    app:tabIndicatorColor="@color/color_primary_text" 
    app:tabMode="fixed" 
    app:tabSelectedTextColor="@color/color_primary_text" 
    app:tabTextColor="@color/color_secondary_text" /> 

Answer 4

Vui lòng kiểm tra ra sau câu trả lời

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
     @Override 
     public void onTabSelected(TabLayout.Tab tab) { 
      View view = tab.getCustomView(); 
      RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.layout_background); 
      relativeLayout.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.white)); 
      TypefacedTextView selectedText = (TypefacedTextView) view.findViewById(R.id.txt_tab_name); 
      selectedText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); 

     } 

     @Override 
     public void onTabUnselected(TabLayout.Tab tab) { 
      View view = tab.getCustomView(); 
      RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.layout_background); 
      relativeLayout.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); 
      TypefacedTextView selectedText = (TypefacedTextView) view.findViewById(R.id.txt_tab_name); 
      selectedText.setTextColor(ContextCompat.getColor(getActivity(), R.color.white)); 
     } 

     @Override 
     public void onTabReselected(TabLayout.Tab tab) { 

     } 
    }); 

nơi tabLayout là đối tượng của TabLayout Lớp