Android源碼解析-仿今日頭條PagerSlidingTabStrip滑動頁面導航效果

最近項目中用到了滑動頁面,也就是和目前市場上很火的"今日頭條"頁面滑動類似,在網上找了一下,大部分都是用ViewPager來實作的,剛開始我用的是ViewPager+ViewGroup,上面的标題按鈕用的是HorizontalScrollView,寫完之後感覺效果比較生硬,果斷換掉,發現了一個效果比較好的第三方,也就是今天的主題:PagerSlidingTabStrip.好了,下面來具體介紹一下PagerSlidingTabStrip,進行一下源碼解析.

一: 到GitHub上去下載下傳源碼和Demo

GitHub位址:

https://github.com/astuetz/PagerSlidingTabStrip

先看一下demo的樣子吧

二:把PagerSlidingTabStrip導入我們的項目中

然後在我們的布局檔案中進行聲明:

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res/com.hankkin.PagerSlidingTabStrip"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

    <com.hankkin.PagerSlidingTabStrip.view.PagerSlidingTabStrip
            android:id="@+id/tab"
            app:pstsShouldExpand="false"
            app:pstsUnderlineHeight="2dp"
            app:pstsIndicatorHeight="2dp"
            app:pstsIndicatorColor="@android:color/holo_blue_light"
            app:selectedTabTextColor="@android:color/holo_blue_light"
            app:pstsDividerColor="@android:color/transparent"
            app:pstsTabBackground="@drawable/background"
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="55dp"/>

    <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</LinearLayout></span><span style="font-size:18px;">
</span>

上面的也就是我們的标題滑動按鈕,下面的ViewPager用來存放我們的内容

三:建立Adapter

<span style="font-size:14px;">package com.hankkin.PagerSlidingTabStrip.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.hankkin.PagerSlidingTabStrip.fragment.AndroidFragment;
import com.hankkin.PagerSlidingTabStrip.fragment.JavaFragment;
import com.hankkin.PagerSlidingTabStrip.fragment.ObjectCFragment;

import java.util.List;

/**
 * Created by Hankkin on 15/9/20.
 */
public class MyAdapter extends FragmentPagerAdapter {
    private AndroidFragment androidFragment;
    private JavaFragment javaFragment;
    private ObjectCFragment objectCFragment;
    private String[] titles;
    public MyAdapter(FragmentManager fm,String[] titles) {
        super(fm);
        this.titles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                if (androidFragment == null) {
                    androidFragment = new AndroidFragment();
                }
                return androidFragment;
            case 1:
                if (javaFragment == null) {
                    javaFragment = new JavaFragment();
                }
                return javaFragment;
            case 2:
                if (objectCFragment == null) {
                    objectCFragment = new ObjectCFragment();
                }
                return objectCFragment;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    public String getPageTitle(int i){
        return titles[i];
    }

}
</span>

我這裡用的是碎片Fragment,最下面的getPageTitle()是我們的PagerSlidingTabStrip中的方法,用來擷取标題

接下來我們初始化PagerSlidingTabStrip和ViewPager還有我們的碎片

<span style="font-size:14px;">  private void initViews(){
        fragments = new ArrayList<>();
        pagerTab = (PagerSlidingTabStrip) findViewById(R.id.tab);
        pager = (ViewPager) findViewById(R.id.pager);

        for (int i=0;i<titles.length;i++){
            Fragment fragment = new Fragment();
            fragments.add(fragment);
        }

        adapter = new MyAdapter(getSupportFragmentManager(),titles);
        pager.setAdapter(adapter);
        pagerTab.setViewPager(pager);
    }</span>

在Adapter中利用碎片管理器擷取我們的碎片和标題相對應上.這裡面需要注意提一下,如果碎片的個數比較少我們可以手動建立碎片,如果像今日頭條很多的話也沒關系,動态建立Fragment,因為我們可以看到頭條的每個碎片中的内容都是類似的,是以說動态建立也未嘗不可,隻有個别特殊的我們也可以特殊處理.

就這麼簡單就可以實作類似頭條的頁面滑動效果,下面我們來看一下PagerSlidingTabStrip的源碼吧,看懂了之後也友善我們進行改進.

四:PagerSlidingTabStrip源碼解析

首先我們看幾個比較重要的屬性

private int indicatorColor = 0xFF666666;//	滑動訓示器顔色
	private int underlineColor = 0x1A000000;//在視圖的底部的全寬度的線pstsunderlinecolor顔色
	private int dividerColor = 0x1A000000;//頁籤之間的分隔pstsdividercolor顔色

	private boolean shouldExpand = false;//pstsshouldexpand如果設定為TRUE，每個标簽都給予同樣的重量，預設為false
	private boolean textAllCaps = true;//pststextallcaps如果為真，所有頁籤标題都是大寫，預設為true

	private int scrollOffset = 52;//pstsscrolloffset卷軸被選擇的标簽的偏移
	private int indicatorHeight = 8;//滑動訓示器pstsindicatorheight
	private int underlineHeight = 2;//在視圖的底部的全寬度的線pstsunderlineheight高度
	private int dividerPadding = 12;//pstsdividerpadding頂部和底部填充的分頻器
	private int tabPadding = 24;//pststabpaddingleftright左、右填充每個頁籤
	private int dividerWidth = 1;//頁籤分割線寬度

	private int tabTextSize = 12;//頁籤字型大小
	private int tabTextColor = 0xFF666666;//頁籤字型顔色
	private int selectedTabTextColor = 0xFF666666;//目前選中字型顔色
	private Typeface tabTypeface = null;
	private int tabTypefaceStyle = Typeface.NORMAL;

	private int lastScrollX = 0;

	private int tabBackgroundResId = R.drawable.background;//pststabbackground背景繪制的每個标簽，應該是一個statelistdrawable

我們可以自己定義這些屬性的值,因為可能預設的不太好看

1.首先看一下我們的構造會初始化一些什麼屬性

<span style="font-size:14px;">public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		setFillViewport(true);//預設使子view可以拉伸來填滿整個螢幕
		setWillNotDraw(false);//預設不執行OnDraw()方法
		//初始化盛放按鈕标題的線性布局
		tabsContainer = new LinearLayout(context);
		tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
		tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
		addView(tabsContainer);

		DisplayMetrics dm = getResources().getDisplayMetrics();
		//導入相應資源檔案
		scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
		indicatorHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
		underlineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
		dividerPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
		tabPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
		dividerWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
		tabTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);

		// get system attrs (android:textSize and android:textColor)

		TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);

		tabTextSize = a.getDimensionPixelSize(0, tabTextSize);
		tabTextColor = a.getColor(1, tabTextColor);

		a.recycle();

		// get custom attrs

		a = context.obtainStyledAttributes(attrs, R.styleable.PagerSlidingTabStrip);

		indicatorColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsIndicatorColor, indicatorColor);

		//tab文字選中時的顔色,預設和滑動訓示器的顔色一緻 
		selectedTabTextColor=a.getColor(R.styleable.PagerSlidingTabStrip_selectedTabTextColor, indicatorColor);
		//初始化屬性樣式
		underlineColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsUnderlineColor, underlineColor);
		dividerColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor, dividerColor);
		indicatorHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight, indicatorHeight);
		underlineHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight, underlineHeight);
		dividerPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsDividerPadding, dividerPadding);
		tabPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight, tabPadding);
		tabBackgroundResId = a.getResourceId(R.styleable.PagerSlidingTabStrip_pstsTabBackground, tabBackgroundResId);
		shouldExpand = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand, shouldExpand);
		scrollOffset = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsScrollOffset, scrollOffset);
		textAllCaps = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps);

		a.recycle();

		rectPaint = new Paint();
		rectPaint.setAntiAlias(true);
		rectPaint.setStyle(Style.FILL);

		dividerPaint = new Paint();
		dividerPaint.setAntiAlias(true);
		dividerPaint.setStrokeWidth(dividerWidth);

		defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
		expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);

		if (locale == null) {
			locale = getResources().getConfiguration().locale;
		}
	}</span>

這些基本都能看懂,主要都是初始化一些屬性,代碼中也有相應的注釋,就不一一介紹了

2.定義ViewPager滑動監聽器,設定目前pager的位置

<span style="font-size:14px;">private class PageListener implements OnPageChangeListener {

		@Override
		public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
			currentPosition = position;
			currentPositionOffset = positionOffset;

			scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));

			invalidate();

			if (delegatePageListener != null) {
				delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
			}
		}

		@Override
		public void onPageScrollStateChanged(int state) {
			if (state == ViewPager.SCROLL_STATE_IDLE) {
				scrollToChild(pager.getCurrentItem(), 0);
			}

			if (delegatePageListener != null) {
				delegatePageListener.onPageScrollStateChanged(state);
			}
		}

		@Override
		public void onPageSelected(int position) {
			selectedPosition = position;
			updateTabStyles();
			if (delegatePageListener != null) {
				delegatePageListener.onPageSelected(position);
			}
		}

	}</span>

3.更新标題樣式,也就是滑動到目前标題下設定标題狀态

<span style="font-size:14px;">private void updateTabStyles() {

		for (int i = 0; i < tabCount; i++) {

			View v = tabsContainer.getChildAt(i);

			v.setBackgroundResource(tabBackgroundResId);

			if (v instanceof TextView) {

				TextView tab = (TextView) v;
				tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
				tab.setTypeface(tabTypeface, tabTypefaceStyle);
				tab.setTextColor(tabTextColor);

				// setAllCaps() is only available from API 14, so the upper case is made manually if we are on a
				// pre-ICS-build
				if (textAllCaps) {
					if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
						tab.setAllCaps(true);
					} else {
						tab.setText(tab.getText().toString().toUpperCase(locale));
					}
				}
				if (i == selectedPosition) {
					tab.setTextColor(selectedTabTextColor);
				}
			}
		}

	}</span>

大體就差不多這些了,好了,給大家看一下我自己完善後的樣子吧

沒有做太多調整,隻是稍微的改了一下樣式,裡面還有一些比較細節的東西沒有介紹,比如标題的寬度是平均配置設定還是分體字型長度進行設定,我們可以修改shouldExpand屬性

大家有興趣的自己仔細研究一下吧.

Android源碼解析-仿今日頭條PagerSlidingTabStrip滑動頁面導航效果

一: 到GitHub上去下載下傳源碼和Demo

二:把PagerSlidingTabStrip導入我們的項目中

三:建立Adapter

四:PagerSlidingTabStrip源碼解析

繼續閱讀

推薦一些VB的學習交流網站

sqli-labs第一關--報錯注入練習

小程式自定義button元件擷取使用者資訊（使用者授權登入）

寫一個Junit類...在Spring中

jqGrid的使用筆記：5. 事件

invalid byte 1 of 1-byte UTF-8 sequence

出現invalid byte 1 of 1-byte UTF-8 sequence問題

為什麼要選擇UniDAC

Android面試題——5.常見面試官提問Android面試題①

GNU科學函數庫[參考手冊][v0.1 Build 090129 Beta][GNU Scientific Library]

與專家面對面：Android開發入門問與答

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

SIP Presence SUBSCRIBE-NOTIFY

QName是什麼

Android電視機（機頂盒）初次開發的一些經驗分享