快捷導(dǎo)航

Android中使用PagerSlidingTabStrip實現(xiàn)導(dǎo)航標(biāo)題的示例

更新時間：2017年01月16日 08:55:28 作者：潘侯爺

本篇文章主要介紹了Android中使用PagerSlidingTabStrip實現(xiàn)導(dǎo)航標(biāo)題的示例，具有一定的參考價值，有興趣的可以了解一下。

此開源框架官網(wǎng)地址：https://github.com/astuetz/PagerSlidingTabStrip

可以理解為配合ViewPager使用的交互式頁面指示器控件。

話不多說，先上效果圖：

為了演示其中的pstsIndicatorHeight與pstsUnderlineHeight 的區(qū)別，進(jìn)行了不同的設(shè)置已區(qū)分效果（做了去除actionbar處理）。大家可以很直觀的看出相比之前單獨(dú)使用ViewPager以及ViewPager與Fragement嵌套，本次演示PagerSlidingTabStrip的使用，為頁面導(dǎo)航提供了相對更加絢麗的切換效果，下面我們就介紹下PagerSlidingTabStrip的使用。

前期相關(guān)博文推薦：

Android中Fragment和ViewPager那點(diǎn)事兒

Android中使用ViewPager實現(xiàn)屏幕頁面切換和頁面輪播效果

一、基本屬性介紹

apstsIndicatorColor //Color of the sliding indicator 滑動條的顏色
pstsUnderlineColor //Color of the full-width line onthe bottom of the view 滑動條所在的那個全寬線的顏色
pstsDividerColor //Color of the dividers betweentabs 每個標(biāo)簽的分割線的顏色
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 每個標(biāo)簽左右填充寬度
pstsScrollOffset //Scroll offset of the selectedtab
pstsTabBackground //Background drawable of each tab,should be a StateListDrawable 每個標(biāo)簽的背景，應(yīng)該是一個StateListDrawable
pstsShouldExpand //If set to true, each tab isgiven the same weight, default false 如果設(shè)置為true，每個標(biāo)簽是相同的控件，均勻平分整個屏幕，默認(rèn)是false
pstsTextAllCaps //If true, all tab titles will beupper case, default true 如果為true，所有標(biāo)簽都是大寫字母，默認(rèn)為true

所有的屬性都有他們自己的getter和setter方法來隨時改變他們

二、本次演示的代碼結(jié)構(gòu)

三、設(shè)置去除ActionBar

在res/values/styles.xml中設(shè)置

<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>

四、導(dǎo)依賴包

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

compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

五、layout布局文件

布局前對顏色做了一些引用設(shè)置，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下面，具體布局文件如下(大家根據(jù)前文中的屬性解釋來對照不理解的屬性，注意添加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）對應(yīng)的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要用來填充對應(yīng)的fragment類，演示ragment_pan.xml布局對應(yīng)的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實現(xiàn)代碼

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的標(biāo)題
  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);
    //當(dāng)ViewPager的onPagerChangeListener回調(diào)時，PagerSlidingTabStrip也一起隨之變動
    //具體做法都已封裝到了PagerSlidingTabStrip.setViewPager()方法里，使用時調(diào)用實例如下
    pst.setViewPager(viewPager);
    pst.setTextSize(30);
  }

  /**
   * 自定義適配器
   */
  class MyPagerAdapter extends FragmentPagerAdapter {
    private String[] titles;
    ArrayList<Fragment> fragments;
    //根據(jù)需求定義構(gòu)造方法，方便外部調(diào)用
    public MyPagerAdapter(FragmentManager fm, String[] titles, ArrayList<Fragment> fragments) {
      super(fm);
      this.titles = titles;
      this.fragments = fragments;
    }
    //設(shè)置每頁的標(biāo)題
    @Override
    public CharSequence getPageTitle(int position) {
      return titles[position];
    }
    //設(shè)置每一頁對應(yīng)的fragment
    @Override
    public Fragment getItem(int position) {
      return fragments.get(position);
    }
    //fragment的數(shù)量
    @Override
    public int getCount() {
      return fragments.size();
    }
  }
}

本次僅僅演示的是PagerSlidingTabStrip最最基本的使用方法，大家可以嘗試使用它搞出更加絢麗的切換效果，干吧。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: