[Android]使用PagerSlidingTabStrip来实现选项卡切换界面的示例

本文链接http://blog.csdn.net/jan_s/article/details/50765831，转载请留言。

其实这个组件已经有两年没有更新了，为什么我要写这个示例？因为我很久以前写过一篇同样的测评，[Android初级]开源Widget之PagerSlidingTabStrip新手测试，但因为代码乱七八糟，这次就完善一下，可以给那些觉得不错的人提供一个指导性的案例。

本示例中的PagerSlidingTabStrip做了一些调整：对字体颜色跟随tab底部滑动条的颜色等。

效果图：

使用步骤和说明

1. 先看看我们的布局文件是怎么引入的。其实核心组件就是PagerSlidingTabStrip这个类，由于代码很多这里不直接ctrl v了，待会儿一起把demo上传了，大家有兴趣可以下载看看。

activity_pager.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res/com.example.pagerslidingtabstrip">

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/main_tabs"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        app:pstsShouldExpand="true"    <!-- 设置标题布局是否可扩展，自己可以尝试看看效果 -->
        app:pstsIndicatorHeight="5dp"  <!-- 滑动条的高度设置 -->
        app:pstsUnderlineColor="@android:color/transparent" <!-- 整个标题栏下的下划线颜色，这里我让他看不见啦啦啦德玛西亚 -->
        app:pstsIndicatorColor="#43C6B4"  <!-- 滑动条的颜色，就是效果图中的绿色 -->
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >
    </com.astuetz.PagerSlidingTabStrip>

    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/main_tabs" />
</RelativeLayout>

2.java代码更简单了。先看Activity里面怎么玩的吧

PagerSildingDemoActivity.java

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;

import com.astuetz.PagerSlidingTabStrip;

@SuppressLint({ "NewApi", "ResourceAsColor" })
public class PagerSildingDemoActivity extends FragmentActivity {
	private static final String TAG = "PagerSildingDemoActivity";
	private PagerSlidingTabStrip tabStrip;
	private ViewPager mPager;
	private MainViewPagerAdapter mPagerAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_pager);
		tabStrip = (PagerSlidingTabStrip) findViewById(R.id.main_tabs);
		mPager = (ViewPager) findViewById(R.id.main_viewPager);
		FragmentManager fm = getSupportFragmentManager();
		String[] arrays = new String[]{"标题1","标题2","标题3"};
		mPagerAdapter = new MainViewPagerAdapter(fm,arrays);
		mPager.setAdapter(mPagerAdapter);
		tabStrip.setFollowTabColor(true);//设置标题是否跟随
		tabStrip.setViewPager(mPager);
	}

}

MainViewPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MainViewPagerAdapter extends FragmentPagerAdapter {
	private String[] mPagerTitles;

	public MainViewPagerAdapter(FragmentManager fm,String[] titles) {
		super(fm);
		this.mPagerTitles = titles;
	}

	@Override
	public CharSequence getPageTitle(int position) {
		return mPagerTitles[position];
	}

	@Override
	public Fragment getItem(int position) {
		return SuperAwesomeCardFragment.newInstance(position);
	}

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

}

SuperAwesomeCardFragment.java 这是我们显示内容的fragment，这里面简单写了个position显示别介意。

public class SuperAwesomeCardFragment extends Fragment {

	private static final String ARG_POSITION = "position";

	private int position;

	public static SuperAwesomeCardFragment newInstance(int position) {
		SuperAwesomeCardFragment f = new SuperAwesomeCardFragment();
		Bundle b = new Bundle();
		b.putInt(ARG_POSITION, position);
		f.setArguments(b);
		return f;
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		position = getArguments().getInt(ARG_POSITION);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

		FrameLayout fl = new FrameLayout(getActivity());
		fl.setLayoutParams(params);

		final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources()
				.getDisplayMetrics());

		TextView v = new TextView(getActivity());
		params.setMargins(margin, margin, margin, margin);
		v.setLayoutParams(params);
		v.setLayoutParams(params);
		v.setGravity(Gravity.CENTER);
		v.setBackgroundResource(R.drawable.background_card);
		v.setText("内容 " + (position + 1));

		fl.addView(v);
		return fl;
	}

}

下载
demo地址：点击打开下载示例代码界面