Android中使用PagerSlidingTabStrip实现导航标题的示例

此开源框架官网地址：https://github.com/astuetz/pagerslidingtabstrip

可以理解为配合viewpager使用的交互式页面指示器控件。

话不多说，先上效果图：

为了演示其中的pstsindicatorheight与pstsunderlineheight 的区别，进行了不同的设置已区分效果（做了去除actionbar处理）。大家可以很直观的看出相比之前单独使用viewpager以及viewpager与fragement嵌套，本次演示pagerslidingtabstrip的使用，为页面导航提供了相对更加绚丽的切换效果，下面我们就介绍下pagerslidingtabstrip的使用。

前期相关博文推荐：

android中fragment和viewpager那点事儿

android中使用viewpager实现屏幕页面切换和页面轮播效果

一、基本属性介绍

• apstsindicatorcolor //color of the sliding indicator  滑动条的颜色
• pstsunderlinecolor //color of the full-width line onthe bottom of the view  滑动条所在的那个全宽线的颜色
• pstsdividercolor //color of the dividers betweentabs   每个标签的分割线的颜色
• pstsindicatorheight //height of the sliding indicator      滑动条的高度
• pstsunderlineheight //height of the full-width line onthe bottom of the view    滑动条所在的那个全宽线的高度
• pstsdividerpadding //top and bottom padding of thedividers   分割线底部和顶部的填充宽度
• pststabpaddingleftright //left and right padding of eachtab   每个标签左右填充宽度
• pstsscrolloffset //scroll offset of the selectedtab
• pststabbackground //background drawable of each tab,should be a statelistdrawable  每个标签的背景，应该是一个statelistdrawable 
• pstsshouldexpand //if set to true, each tab isgiven the same weight, default false   如果设置为true，每个标签是相同的控件，均匀平分整个屏幕，默认是false
• pststextallcaps //if true, all tab titles will beupper case, default true   如果为true，所有标签都是大写字母，默认为true

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

二、本次演示的代码结构

三、设置去除actionbar

在res/values/styles.xml中设置

<style name="apptheme" parent="theme.appcompat.light.noactionbar">

 整体xml文件如下：

<resources>
  <!-- base application theme. -->
  <style name="apptheme" parent="theme.appcompat.light.noactionbar">
    <!-- customize your theme here. -->
    <item name="colorprimary">@color/colorprimary</item>
    <item name="colorprimarydark">@color/colorprimarydark</item>
    <item name="coloraccent">@color/coloraccent</item>
  </style>
</resources>

四、导依赖包

使用androidstudio2.2。仍然采用在build.gradle下中dependencies下直接添加如下代码：

 compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

五、layout布局文件

布局前对颜色做了一些引用设置，res/values/colors.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="colorprimary">#3f51b5</color>
  <color name="colorprimarydark">#303f9f</color>
  <color name="coloraccent">#ff4081</color>

  <color name="color_theme">#489cfa</color>
  <color name="transparent">#00000000</color>
  <color name="yellow">#fc9630</color>
</resources>

（1）主布局文件activity_main.xml

pagerslidingtabstrip配合viewpager一起使用，本次将viewpager放置在pagerslidingtabstrip下面，具体布局文件如下(大家根据前文中的属性解释来对照不理解的属性，注意添加app命名空间)：

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.mly.panhouye.pagerslidingtabstripdemo.mainactivity">
  <com.astuetz.pagerslidingtabstrip
    android:id="@+id/pst"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:background="@color/color_theme"
    app:pstsshouldexpand="true"
    app:pststabbackground="@color/transparent"
    app:pstsindicatorheight="5dp"
    app:pstsindicatorcolor="@color/yellow"
    app:pststextallcaps="false"
    app:pstsunderlineheight="15dp"
  />
  <android.support.v4.view.viewpager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/pst"/>
</relativelayout>

（2）对应的fragment布局文件

本次仅演示简单效果，fragment_pan, fragment_hou, fragment_ye每个布局文件仅仅文字不同，这里仅演示其中一个fragment_pan.xml:

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <textview
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="潘"
    android:textsize="100sp"
    />
</linearlayout>

（3）每个fragment要用来填充对应的fragment类，演示ragment_pan.xml布局对应的fragmen类houfragment.java:
package com.mly.panhouye.pagerslidingtabstripdemo;

import android.os.bundle;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
/**
 * created by panchengjia on 2017/1/15 0015.
 */
public class houfragment extends fragment {
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
    view view =inflater.inflate(r.layout.fragment_hou,null);
    return view;
  }
}

六、java实现代码

package com.mly.panhouye.pagerslidingtabstripdemo;

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.support.v7.app.appcompatactivity;
import com.astuetz.pagerslidingtabstrip;
import java.util.arraylist;

public class mainactivity extends appcompatactivity {
  pagerslidingtabstrip pst;
  viewpager viewpager;
  arraylist<fragment> fragments;
  //声明pst的标题
  string[] titles = {"潘","侯","爷"};
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    pst= (pagerslidingtabstrip) findviewbyid(r.id.pst);
    viewpager= (viewpager) findviewbyid(r.id.pager);

    fragments = new arraylist<>();
    houfragment houfragment = new houfragment();
    panfragment panfragment = new panfragment();
    yefragment yefragment = new yefragment();
    //添加fragment到集合中时注意顺序
    fragments.add(panfragment);
    fragments.add(houfragment);
    fragments.add(yefragment);
    fragmentmanager fragmentmanager = getsupportfragmentmanager();
    viewpager.setadapter(new mypageradapter(fragmentmanager,titles,fragments));
    viewpager.setcurrentitem(0);
    //当viewpager的onpagerchangelistener回调时，pagerslidingtabstrip也一起随之变动
    //具体做法都已封装到了pagerslidingtabstrip.setviewpager()方法里，使用时调用实例如下
    pst.setviewpager(viewpager);
    pst.settextsize(30);
  }

  /**
   * 自定义适配器
   */
  class mypageradapter extends fragmentpageradapter {
    private string[] titles;
    arraylist<fragment> fragments;
    //根据需求定义构造方法，方便外部调用
    public mypageradapter(fragmentmanager fm, string[] titles, arraylist<fragment> fragments) {
      super(fm);
      this.titles = titles;
      this.fragments = fragments;
    }
    //设置每页的标题
    @override
    public charsequence getpagetitle(int position) {
      return titles[position];
    }
    //设置每一页对应的fragment
    @override
    public fragment getitem(int position) {
      return fragments.get(position);
    }
    //fragment的数量
    @override
    public int getcount() {
      return fragments.size();
    }
  }
}

本次仅仅演示的是pagerslidingtabstrip最最基本的使用方法，大家可以尝试使用它搞出更加绚丽的切换效果，干吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。