Android仿今日頭條滑動(dòng)頁(yè)面導(dǎo)航效果

更新時(shí)間：2021年01月28日 16:26:29 作者：Hankkin

這篇文章主要為大家詳細(xì)介紹了Android仿今日頭條滑動(dòng)頁(yè)面導(dǎo)航效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近項(xiàng)目中用到了滑動(dòng)頁(yè)面,也就是和目前市場(chǎng)上很火的"今日頭條"頁(yè)面滑動(dòng)類似,在網(wǎng)上找了一下,大部分都是用ViewPager來實(shí)現(xiàn)的,剛開始我用的是ViewPager+ViewGroup,上面的標(biāo)題按鈕用的是HorizontalScrollView,寫完之后感覺效果比較生硬,果斷換掉,發(fā)現(xiàn)了一個(gè)效果比較好的第三方,也就是今天的主題:PagerSlidingTabStrip.好了,下面來具體介紹一下PagerSlidingTabStrip,進(jìn)行一下源碼解析.

一、看一下demo的樣子吧

二、把PagerSlidingTabStrip導(dǎo)入我們的項(xiàng)目中

然后在我們的布局文件中進(jìn)行聲明:

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

上面的也就是我們的標(biāo)題滑動(dòng)按鈕,下面的ViewPager用來存放我們的內(nèi)容

三、創(chuàng)建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; 
 
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>

我這里用的是碎片F(xiàn)ragment,最下面的getPageTitle()是我們的PagerSlidingTabStrip中的方法,用來獲取標(biāo)題
接下來我們初始化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中利用碎片管理器獲取我們的碎片和標(biāo)題相對(duì)應(yīng)上.這里面需要注意提一下,如果碎片的個(gè)數(shù)比較少我們可以手動(dòng)創(chuàng)建碎片,如果像今日頭條很多的話也沒關(guān)系,動(dòng)態(tài)創(chuàng)建Fragment,因?yàn)槲覀兛梢钥吹筋^條的每個(gè)碎片中的內(nèi)容都是類似的,所以說動(dòng)態(tài)創(chuàng)建也未嘗不可,只有個(gè)別特殊的我們也可以特殊處理。

就這么簡(jiǎn)單就可以實(shí)現(xiàn)類似頭條的頁(yè)面滑動(dòng)效果,下面我們來看一下PagerSlidingTabStrip的源碼吧,看懂了之后也方便我們進(jìn)行改進(jìn)。

四、PagerSlidingTabStrip源碼解析

首先我們看幾個(gè)比較重要的屬性

private int indicatorColor = 0xFF666666;// 滑動(dòng)指示器顏色 
private int underlineColor = 0x1A000000;//在視圖的底部的全寬度的線pstsunderlinecolor顏色 
private int dividerColor = 0x1A000000;//選項(xiàng)卡之間的分隔pstsdividercolor顏色 
 
private boolean shouldExpand = false;//pstsshouldexpand如果設(shè)置為TRUE，每個(gè)標(biāo)簽都給予同樣的重量，默認(rèn)為false 
private boolean textAllCaps = true;//pststextallcaps如果為真，所有選項(xiàng)卡標(biāo)題都是大寫，默認(rèn)為true 
 
private int scrollOffset = 52;//pstsscrolloffset卷軸被選擇的標(biāo)簽的偏移 
private int indicatorHeight = 8;//滑動(dòng)指示器pstsindicatorheight 
private int underlineHeight = 2;//在視圖的底部的全寬度的線pstsunderlineheight高度 
private int dividerPadding = 12;//pstsdividerpadding頂部和底部填充的分頻器 
private int tabPadding = 24;//pststabpaddingleftright左、右填充每個(gè)選項(xiàng)卡 
private int dividerWidth = 1;//選項(xiàng)卡分割線寬度 
 
private int tabTextSize = 12;//選項(xiàng)卡字體大小 
private int tabTextColor = 0xFF666666;//選項(xiàng)卡字體顏色 
private int selectedTabTextColor = 0xFF666666;//當(dāng)前選中字體顏色 
private Typeface tabTypeface = null; 
private int tabTypefaceStyle = Typeface.NORMAL; 
 
private int lastScrollX = 0; 
 
private int tabBackgroundResId = R.drawable.background;//pststabbackground背景繪制的每個(gè)標(biāo)簽，應(yīng)該是一個(gè)statelistdrawable

我們可以自己定義這些屬性的值,因?yàn)榭赡苣J(rèn)的不太好看

1.首先看一下我們的構(gòu)造會(huì)初始化一些什么屬性

<span style="font-size:14px;">public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) { 
 super(context, attrs, defStyle); 
 
 setFillViewport(true);//默認(rèn)使子view可以拉伸來填滿整個(gè)屏幕 
 setWillNotDraw(false);//默認(rèn)不執(zhí)行OnDraw()方法 
 //初始化盛放按鈕標(biāo)題的線性布局 
 tabsContainer = new LinearLayout(context); 
 tabsContainer.setOrientation(LinearLayout.HORIZONTAL); 
 tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); 
 addView(tabsContainer); 
 
 DisplayMetrics dm = getResources().getDisplayMetrics(); 
 //導(dǎo)入相應(yīng)資源文件 
 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文字選中時(shí)的顏色,默認(rèn)和滑動(dòng)指示器的顏色一致 
 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>

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

2.定義ViewPager滑動(dòng)監(jiān)聽器,設(shè)置當(dāng)前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.更新標(biāo)題樣式,也就是滑動(dòng)到當(dāng)前標(biāo)題下設(shè)置標(biāo)題狀態(tài)

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

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