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

2019-12-12 04:01:45

字体：大中小

来源：转载

供稿：网友

此开源框架官网地址：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最最基本的使用方法，大家可以尝试使用它搞出更加绚丽的切换效果，干吧。

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

上一篇：Android实现环形进度条的实例

下一篇：Android Button按钮的四种点击事件