PagerSlidingTabStrip介绍及使用，让ViewPager更绚丽

开启阅读模式

PagerSlidingTabStrip介绍及使用，让ViewPager更绚丽

标签： 开源项目android开发PagerSlidingTabStrip
2014-12-31 09:21 2735人阅读 评论(3) 收藏 举报


分类：

开源项目（1）


转载请注明出处/article/8093752.html，谢谢。

以前一直想着，ViewPager中间的那个横线怎么跟着屏幕的滑动而滑动，如下图所示：



我们可以看到中间的那个红线在跟着屏幕滑动而滑动

现在github上已经有了这个开源项目，所以我们可以直接拿来用，很方便很实用。文章末尾我将放上资源，可以直接下载。

官网地址：https://github.com/astuetz/PagerSlidingTabStrip

关于怎么导入包，怎么导入程序，这里不再进行赘述，你可以看我之前的一个文章，有详细步骤：

/article/8093717.html

我简单翻译一下官网上的内容：

交互式页面指示器控件，完美配合ViewPager控件（来自Android Support Library）

注意：这里的ViewPager的适配器必须是继承的FragmentPagerAdapter，并重写getPageIconResId(int position)或者getPageTitle(int position)方法

用法

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

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

[java] view
plaincopy

dependencies {

compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

}

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

[java] view
plaincopy

<com.astuetz.PagerSlidingTabStrip

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="48dip" />

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

[java] view
plaincopy

// 初始化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设置

[java] view
plaincopy

// 从上面继续

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 每个标签的分割线的颜色

pstsIndicatorHeight

Height 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文件

[java] view
plaincopy

<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中都进行了什么处理吧，

[java] view
plaincopy

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.

[java] view
plaincopy

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这个错误，关于这个错误，你可以点击

/article/1502040.html进行查看。

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

如图所示：



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

[java] view
plaincopy

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是这样给出的

[java] view
plaincopy

/*

* 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（）这个方法，你可以查看/article/8093751.html

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

我这里就不在解释了

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

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

1.关于cannot convert from Fragment1 to Fragment这个错误，你可以查看/article/1502040.html

2.关于TypedValue.applyDimension（）这个方法，你可以查看/article/8093751.html

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.关于怎么导入包，怎么导入程序，你可以查看 /article/8093717.html