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 {

	@Override
	protected 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>();

	@Override
	public 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));
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment, container, false);
	}

	@Override
	public 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() {

			@Override
			public int getIndicatorColor(int position) {
				return mTabCards.get(position).getIndicatorColor();
			}

			@Override
			public int getDividerColor(int position) {
				return mTabCards.get(position).getDividerColor();
			}
		});
	}

	private class MyFragmentPagerAdapter extends FragmentPagerAdapter {

		MyFragmentPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int pos) {
			return mTabCards.get(pos).createFragment();
		}

		@Override
		public int getCount() {
			return mTabCards.size();
		}

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

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
			TextView tv = new TextView(getActivity());
			tv.setGravity(Gravity.CENTER);
			return tv;
		}

		@Override
		public 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。

代码层次结构如图所示：

代码运行结果如图所示：