Android中使用PagerSlidingTabStrip實(shí)現(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)航提供了相對(duì)更加絢麗的切換效果,下面我們就介紹下PagerSlidingTabStrip的使用。
前期相關(guān)博文推薦:
Android中Fragment和ViewPager那點(diǎn)事兒
Android中使用ViewPager實(shí)現(xiàn)屏幕頁面切換和頁面輪播效果
一、基本屬性介紹
- apstsIndicatorColor //Color of the sliding indicator 滑動(dòng)條的顏色
- pstsUnderlineColor //Color of the full-width line onthe bottom of the view 滑動(dòng)條所在的那個(gè)全寬線的顏色
- pstsDividerColor //Color of the dividers betweentabs 每個(gè)標(biāo)簽的分割線的顏色
- pstsIndicatorHeight //Height of the sliding indicator 滑動(dòng)條的高度
- pstsUnderlineHeight //Height of the full-width line onthe bottom of the view 滑動(dòng)條所在的那個(gè)全寬線的高度
- pstsDividerPadding //Top and bottom padding of thedividers 分割線底部和頂部的填充寬度
- pstsTabPaddingLeftRight //Left and right padding of eachtab 每個(gè)標(biāo)簽左右填充寬度
- pstsScrollOffset //Scroll offset of the selectedtab
- pstsTabBackground //Background drawable of each tab,should be a StateListDrawable 每個(gè)標(biāo)簽的背景,應(yīng)該是一個(gè)StateListDrawable
- pstsShouldExpand //If set to true, each tab isgiven the same weight, default false 如果設(shè)置為true,每個(gè)標(biāo)簽是相同的控件,均勻平分整個(gè)屏幕,默認(rèn)是false
- pstsTextAllCaps //If true, all tab titles will beupper case, default true 如果為true,所有標(biāo)簽都是大寫字母,默認(rèn)為true
所有的屬性都有他們自己的getter和setter方法來隨時(shí)改變他們

二、本次演示的代碼結(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布局文件
布局前對(duì)顏色做了一些引用設(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ù)前文中的屬性解釋來對(duì)照不理解的屬性,注意添加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)對(duì)應(yīng)的Fragment布局文件
本次僅演示簡單效果,fragment_pan, fragment_hou, fragment_ye每個(gè)布局文件僅僅文字不同,這里僅演示其中一個(gè)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)每個(gè)fragment要用來填充對(duì)應(yīng)的fragment類,演示ragment_pan.xml布局對(duì)應(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實(shí)現(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到集合中時(shí)注意順序
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)時(shí),PagerSlidingTabStrip也一起隨之變動(dòng)
//具體做法都已封裝到了PagerSlidingTabStrip.setViewPager()方法里,使用時(shí)調(diào)用實(shí)例如下
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è)置每一頁對(duì)應(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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
不依賴于Activity的Android全局懸浮窗的實(shí)現(xiàn)
在Android應(yīng)用開發(fā)中,經(jīng)常要遇到做全局懸浮窗的效果,本文的內(nèi)容主要是如何不依賴于Activity的全局懸浮窗的實(shí)現(xiàn)及原理,有需要的可以參考。2016-07-07
Android SQLite數(shù)據(jù)庫增刪改查操作的案例分析
本篇文章介紹了,在Android中SQLite數(shù)據(jù)庫增刪改查操作的案例分析,需要的朋友參考下2013-04-04
Android 使用 RxJava2 實(shí)現(xiàn)倒計(jì)時(shí)功能的示例代碼
本篇文章主要介紹了Android 使用 RxJava2 實(shí)現(xiàn)倒計(jì)時(shí)功能的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
android屏幕圓角實(shí)現(xiàn)方法的示例代碼
本篇文章主要介紹了android屏幕圓角實(shí)現(xiàn)方法的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Android自定義View仿QQ等級(jí)天數(shù)進(jìn)度
這篇文章主要為大家詳細(xì)介紹了Android自定義View仿QQ等級(jí)天數(shù)進(jìn)度效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
NestedScrollView+Recyclerview下滑卡頓解決方法
本文為大家解決安卓開發(fā)時(shí)候NestedScrollView+Recyclerview下滑卡頓的問題,希望能夠幫助到你。2017-11-11

