Android开源项目PagerSlidingTabStrip

PagerSlidingTabStrip是github上的开源软件，官网地址：https://github.com/astuetz/PagerSlidingTabStrip。 PagerSlidingTabStrip是一行tab栏，与Viewpaper完美结合实现多页内容展示效果。

官网的介绍如下：

在sample/文件夹下有一个现成的可运行工程

1.加入library作为本地包工程，或者加入依赖在build.gradle（我对gradle不是很了解，所以用前面那个导入包的方法）

dependencies {
    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
}

2.在你的layout里加入PagerSlidingTabStrip控件，它通常要在ViewPager控件之上

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip" />

3.在你的onCreate方法（或者onCreateView对于一个fragment），绑定 PagerSlidingTabStrip 控件到ViewPager上

// 初始化ViewPager并且添加适配器
 ViewPager pager = (ViewPager) findViewById(R.id.pager);
 pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

 //向ViewPager绑定PagerSlidingTabStrip  
 PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
 tabs.setViewPager(pager);

4.（可选的）如果你想在你的ViewPager用到 onPageChangeListener监听方法，你应该如下设置，而不是直接用ViewPager设置

// 从上面继续
 tabs.setOnPageChangeListener(mPageChangeListener);

个性化设置

为了让你的app不像另一个 Play Store上面的app，你可以添加这些属性来做出自己独具一格的应用。

• pstsIndicatorColor Color of the sliding indicator  滑动条的颜色
• pstsUnderlineColor Color of the full-width line on the bottom of the view  滑动条所在的那个全宽线的颜色
• pstsDividerColor Color of the dividers between tabs   每个标签的分割线的颜色
• pstsIndicatorHeightHeight of the sliding indicator       滑动条的高度
• pstsUnderlineHeight Height of the full-width line on the bottom of the view    滑动条所在的那个全宽线的高度
• pstsDividerPadding Top and bottom padding of the dividers   分割线底部和顶部的填充宽度
• pstsTabPaddingLeftRight Left and right padding of each tab   每个标签左右填充宽度
• pstsScrollOffset Scroll offset of the selected tab
• pstsTabBackground Background drawable of each tab, should be a StateListDrawable  每个标签的背景，应该是一个StateListDrawable  
• pstsShouldExpand If set to true, each tab is given the same weight, default false   如果设置为true，每个标签是相同的控件，均匀平分整个屏幕，默认是false
• pstsTextAllCaps If true, all tab titles will be upper case, default true   如果为true，所有标签都是大写字母，默认为true

所有的属性都有他们自己的getter和setter方法来随时改变他们

接下来，我将写下我自己的小demo，总结自己遇到的问题，来记录一下关于这个控件的问题。

先看下截图

首先是activity_main.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"
    tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/com.example.viewfragment">

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        app:pstsShouldExpand="true"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_below="@id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</RelativeLayout>

其中，1.android:layout_below="@id/tabs"一定要记得写上，是让ViewPager控件在tabs之  

2.   xmlns:app="http://schemas.android.com/apk/res/com.example.viewfragment， 这句话是我的理解是，如果你想要用PagerSlidingTabStrip，就必须加上，不过他会自动加，不需要你来管他。

接下来是三个fragment，都是很简单的设置了不同的颜色背景而已，我这里就不再贴出代码了，稍后会放上自己的小demo

最后，我们来看看MainActivity中都进行了什么处理吧，

package com.example.viewfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

import com.astuetz.PagerSlidingTabStrip;

public class MainActivity extends FragmentActivity {
	ViewPager viewPager;
	PagerSlidingTabStrip tabs;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewPager);
		viewPager.setAdapter(new myPagerAdapter(getSupportFragmentManager()));
		tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
		tabs.setViewPager(viewPager);
	}

	class myPagerAdapter extends FragmentPagerAdapter {
		String[] title = { "项目一", "项目二", "项目三" };
		Fragment1 fragment1;
		Fragment2 fragment2;
		Fragment3 fragment3;

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

		@Override
		public Fragment getItem(int position) {
			switch (position) {
			case 0:
				fragment1 = new Fragment1();
				return fragment1;
			case 1:
				fragment2 = new Fragment2();
				return fragment2;
			case 2:
				fragment3 = new Fragment3();
				return fragment3;

			default:
				return null;
			}
		}

		@Override
		public int getCount() {

			return title.length;
		}

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

	}

}

接下来是补充内容：

1.MainActivity继承的是FragmentActivity，因为想要用到getSupportFragmentManager()来构造适配器

2.

public Fragment getItem(int position) {
			switch (position) {
			case 0:
				fragment1 = new Fragment1();
				return fragment1;
			case 1:
				fragment2 = new Fragment2();
				return fragment2;
			case 2:
				fragment3 = new Fragment3();
				return fragment3;

			default:
				return null;
			}
		}

在做这个方法的时候，出现了cannot convert from Fragment1 to Fragment这个错误，关于这个错误，你可以点击

http://blog.csdn.net/jason0539/article/details/9712273进行查看。

3.如果是重写的getPageTitle(int position)这个方法，则tabs是文字标题；如果是重写的getPageIconResId(int position)，则tabs是图标显示。

如图所示：

上面四个标签就是重写的getPageIconResId(int position)

private final int[] ICONS = { R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,
				R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome };

		

		@Override
		public int getPageIconResId(int position) {
			return ICONS[position];
		}

4.关于官网上的demo上fragment是这样给出的

/*
 * Copyright (C) 2013 Andreas Stuetz <andreas.stuetz@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.astuetz.viewpager.extensions.sample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.FrameLayout.LayoutParams;
import android.widget.TextView;

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, 8, 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("CARD " + (position + 1));

		fl.addView(v);
		return fl;
	}

}

关于TypedValue.applyDimension（）这个方法，你可以查看 http://blog.csdn.net/harryweasley/article/details/42172321

关于params.setMargins(margin, margin, margin, margin);你可以查看http://www.itnose.net/detail/6038494.html

我这里就不在解释了

好了，关于PagerSlidingTabStrip我已经基本写完了，收获还是很大的。

接下来总结一下，我这个文章的其他链接地址：

1.关于cannot convert from Fragment1 to Fragment这个错误，你可以查看http://blog.csdn.net/jason0539/article/details/9712273

2.关于TypedValue.applyDimension（）这个方法，你可以查看http://blog.csdn.net/harryweasley/article/details/42172321
3.关于params.setMargins(margin, margin, margin, margin);你可以查看http://www.itnose.net/detail/6038494.html
4.本篇博客地址：。。。。。。。。。。

5.PagerSlidingTabStrip在github上的地址  ，https://github.com/astuetz/PagerSlidingTabStrip

6.自己应用的下载地址http://download.csdn.net/detail/harryweasley/8314811

7.官网的PagerSlidingTabStrip下载地址  http://download.csdn.net/detail/harryweasley/8314807

8.关于怎么导入包，怎么导入程序，你可以查看  http://blog.csdn.net/harryweasley/article/details/41413547

P agerSlidingTabStrip 高亮选中标题

1、选中标题后，高亮标题
@Override
        public void onPageSelected(int position) {
            setSelectTextColor(position);
            if (delegatePageListener != null) {
                delegatePageListener.onPageSelected(position);
            }
        }

private void setSelectTextColor(int position) {
        for (int i = 0; i < tabCount; i++) {
            View view = tabsContainer.getChildAt(i);
            if (view instanceof ImageButton) {
            } else if (view instanceof RelativeLayout) {
                View viewText = ((RelativeLayout) view).getChildAt(0);
                TextView tabTextView = (TextView) viewText;
                if (viewText instanceof TextView) {
                    if (position == i) {
                        tabTextView.setTextColor(自定义颜色);
                    } else {
                        tabTextView.setTextColor(tabTextColor);
                    }
                }
            }
        }
    }

2、首次进入默认第一个标题高亮，关键标红代码

    private void updateTabStyles() {

        for (int i = 0; i < tabCount; i++) {

            View v = tabsContainer.getChildAt(i);

            v.setBackgroundResource(tabBackgroundResId);

            if (v instanceof RelativeLayout) {
                View v1 = ((RelativeLayout) v).getChildAt(0);
                if (v1 instanceof TextView) {

                    TextView tab = (TextView) v1;
                    tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
                    tab.setTypeface(tabTypeface, tabTypefaceStyle);
                    if (i == 0) {
                        tab.setTextColor(自定义颜色);
                    } else {
                        tab.setTextColor(tabTextColor);
                    }

                    if (textAllCaps) {
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
                            tab.setAllCaps(true);
                        } else {
                            tab.setText(tab.getText().toString().toUpperCase(locale));
                        }
                    }
                }
            }
        }
    }