Android SlidingTabLayout定制分割线和指示条颜色



Android SlidingTabLayout定制分割线和指示条颜色

Android SlidingTabLayout默认的滑动指示条是系统默认的某个蓝色系色值，分割线是灰色。如果要自定义实现滑动指示条和分割线定制颜色，则主要通过SlidingTabLayout的setCustomTabColorizer()方法实现。
现在给出一个例子加以说明。
（1）首先做一个MainActivity，此MainActivity没有实质意义，只是作为第二步加载要实现SlidingTabLayout Fragment的“容器”。
（2）在一个Fragment实现SlidingTabLayout，然后将此Fragment加载。
测试用的主Activity MainActivity.java ：

package zhangphil.tabs;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;public class MainActivity extends FragmentActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);if (savedInstanceState == null) {FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();TabFragment fragment = new TabFragment();transaction.replace(R.id.content_fragment, fragment);transaction.commit();}}}

MainActivity.java需要的布局文件：activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <FrameLayout        android:id="@+id/content_fragment"        android:layout_width="match_parent"        android:layout_height="match_parent" >    </FrameLayout></LinearLayout>

TabFragment.java代码文件：

package zhangphil.tabs;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import java.util.ArrayList;import zhangphil.view.SlidingTabLayout;public class TabFragment extends Fragment {private static class PagerItem {private final CharSequence mTitle;private final int mIndicatorColor;private final int mDividerColor;public PagerItem(CharSequence title, int indicatorColor, int dividerColor) {mTitle = title;mIndicatorColor = indicatorColor;mDividerColor = dividerColor;}public Fragment createFragment() {return ContentFragment.newInstance(mTitle, mIndicatorColor, mDividerColor);}public CharSequence getTitle() {return mTitle;}public int getIndicatorColor() {return mIndicatorColor;}public int getDividerColor() {return mDividerColor;}}private ArrayList<PagerItem> mTabCards = new ArrayList<PagerItem>();@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mTabCards.add(new PagerItem("Tab A", Color.RED, Color.RED));mTabCards.add(new PagerItem("Tab B", Color.YELLOW, Color.YELLOW));mTabCards.add(new PagerItem("Tab C", Color.GREEN, Color.GREEN));mTabCards.add(new PagerItem("Tab D", Color.TRANSPARENT, Color.TRANSPARENT));mTabCards.add(new PagerItem("Tab E", Color.CYAN, Color.CYAN));mTabCards.add(new PagerItem("Tab E", Color.BLACK, Color.BLACK));}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment, container, false);}@Overridepublic void onViewCreated(View view, Bundle savedInstanceState) {ViewPager mViewPager = (ViewPager) view.findViewById(R.id.viewpager);mViewPager.setAdapter(new MyFragmentPagerAdapter(getChildFragmentManager()));SlidingTabLayout mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);mSlidingTabLayout.setViewPager(mViewPager);mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {@Overridepublic int getIndicatorColor(int position) {return mTabCards.get(position).getIndicatorColor();}@Overridepublic int getDividerColor(int position) {return mTabCards.get(position).getDividerColor();}});}private class MyFragmentPagerAdapter extends FragmentPagerAdapter {MyFragmentPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int pos) {return mTabCards.get(pos).createFragment();}@Overridepublic int getCount() {return mTabCards.size();}@Overridepublic CharSequence getPageTitle(int position) {return mTabCards.get(position).getTitle();}}public static class ContentFragment extends Fragment {private static final String KEY_TITLE = "title";private static final String KEY_INDICATOR_COLOR = "indicator_color";private static final String KEY_DIVIDER_COLOR = "divider_color";public static ContentFragment newInstance(CharSequence title, int indicatorColor, int dividerColor) {Bundle bundle = new Bundle();bundle.putCharSequence(KEY_TITLE, title);bundle.putInt(KEY_INDICATOR_COLOR, indicatorColor);bundle.putInt(KEY_DIVIDER_COLOR, dividerColor);ContentFragment fragment = new ContentFragment();fragment.setArguments(bundle);return fragment;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {TextView tv = new TextView(getActivity());tv.setGravity(Gravity.CENTER);return tv;}@Overridepublic void onViewCreated(View view, Bundle savedInstanceState) {super.onViewCreated(view, savedInstanceState);TextView tv = (TextView) view;Bundle args = getArguments();String content = "";if (args != null) {String title = args.getCharSequence(KEY_TITLE) + "";int indicatorColor = args.getInt(KEY_INDICATOR_COLOR);String indicatorColors = Integer.toHexString(indicatorColor) + "";int dividerColor = args.getInt(KEY_DIVIDER_COLOR);String dividerColors = Integer.toHexString(dividerColor) + "";content = content + "标题:" + title + "\n";content = content + "indicatorColor:" + indicatorColors + "\n";content = content + "dividerColor:" + dividerColors;}tv.setText(content);}}}

TabFragment.java需要的布局文件fragment.xml文件代码：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <zhangphil.view.SlidingTabLayout        android:id="@+id/sliding_tabs"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content" /></LinearLayout>

不要忘了引用Android官方实现的SlidingTabLayout和SlidingTabStrip。
代码层次结构如图所示：

代码运行结果如图所示：