Android仿今日頭條滑動頁面導(dǎo)航效果
更新時間：2021年01月28日 16:26:29 作者：Hankkin
這篇文章主要為大家詳細(xì)介紹了Android仿今日頭條滑動頁面導(dǎo)航效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近項目中用到了滑動頁面,也就是和目前市場上很火的"今日頭條"頁面滑動類似,在網(wǎng)上找了一下,大部分都是用ViewPager來實現(xiàn)的,剛開始我用的是ViewPager+ViewGroup,上面的標(biāo)題按鈕用的是HorizontalScrollView,寫完之后感覺效果比較生硬,果斷換掉,發(fā)現(xiàn)了一個效果比較好的第三方,也就是今天的主題:PagerSlidingTabStrip.好了,下面來具體介紹一下PagerSlidingTabStrip,進(jìn)行一下源碼解析.
一、看一下demo的樣子吧
二、把PagerSlidingTabStrip導(dǎo)入我們的項目中
然后在我們的布局文件中進(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)題滑動按鈕,下面的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)題相對應(yīng)上.這里面需要注意提一下,如果碎片的個數(shù)比較少我們可以手動創(chuàng)建碎片,如果像今日頭條很多的話也沒關(guān)系,動態(tài)創(chuàng)建Fragment,因為我們可以看到頭條的每個碎片中的內(nèi)容都是類似的,所以說動態(tài)創(chuàng)建也未嘗不可,只有個別特殊的我們也可以特殊處理。
就這么簡單就可以實現(xiàn)類似頭條的頁面滑動效果,下面我們來看一下PagerSlidingTabStrip的源碼吧,看懂了之后也方便我們進(jìn)行改進(jìn)。
四、PagerSlidingTabStrip源碼解析
首先我們看幾個比較重要的屬性
private int indicatorColor = 0xFF666666;// 滑動指示器顏色 private int underlineColor = 0x1A000000;//在視圖的底部的全寬度的線pstsunderlinecolor顏色 private int dividerColor = 0x1A000000;//選項卡之間的分隔pstsdividercolor顏色 private boolean shouldExpand = false;//pstsshouldexpand如果設(shè)置為TRUE，每個標(biāo)簽都給予同樣的重量，默認(rèn)為false private boolean textAllCaps = true;//pststextallcaps如果為真，所有選項卡標(biāo)題都是大寫，默認(rèn)為true private int scrollOffset = 52;//pstsscrolloffset卷軸被選擇的標(biāo)簽的偏移 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;//當(dāng)前選中字體顏色 private Typeface tabTypeface = null; private int tabTypefaceStyle = Typeface.NORMAL; private int lastScrollX = 0; private int tabBackgroundResId = R.drawable.background;//pststabbackground背景繪制的每個標(biāo)簽，應(yīng)該是一個statelistdrawable
我們可以自己定義這些屬性的值,因為可能默認(rèn)的不太好看
1.首先看一下我們的構(gòu)造會初始化一些什么屬性
<span style="font-size:14px;">public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setFillViewport(true);//默認(rèn)使子view可以拉伸來填滿整個屏幕
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文字選中時的顏色,默認(rèn)和滑動指示器的顏色一致
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滑動監(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)前標(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>
大體就差不多這些了,好了,給大家看一下我自己完善后的樣子吧
沒有做太多調(diào)整，只是稍微的改了一下樣式，里面還有一些比較細(xì)節(jié)的東西沒有介紹，比如標(biāo)題的寬度是平均分配還是分體字體長度進(jìn)行設(shè)置，我們可以修改shouldExpand屬性，大家有興趣的自己仔細(xì)研究一下吧。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android自定義View實現(xiàn)可拖拽縮放的矩形框
這篇文章主要為大家詳細(xì)介紹了Android自定義View實現(xiàn)可拖拽縮放的矩形框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Android鍵盤自動彈出解決方法,結(jié)合實例形式對比分析了三種解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2016-01-01
本文重在對自定義view，以及其常用類，常用方法的初步了解，提供一個思路，效果是其次，畫板只是例子,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Android圓角按鈕的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要介紹了Android 靜默安裝和卸載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Android自定義View控件實現(xiàn)刷新效果的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-11-11
Activit跳轉(zhuǎn)動畫之界面上某個位置并裂開上下拉伸動畫跳轉(zhuǎn)
這篇文章主要介紹了Activit跳轉(zhuǎn)動畫之界面上某個位置并裂開上下拉伸動畫跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2016-07-07
AsyncTask是Android本身提供的一種輕量級的異步任務(wù)類。它可以在線程池中執(zhí)行后臺任務(wù)，然后把執(zhí)行的進(jìn)度和最終的結(jié)果傳遞給主線程更新UI。本文將介紹Android中AsyncTask的工作原理。2021-06-06
flutter RotationTransition實現(xiàn)旋轉(zhuǎn)動畫
這篇文章主要為大家詳細(xì)介紹了flutter RotationTransition實現(xiàn)旋轉(zhuǎn)動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
在Android中創(chuàng)建菜單項Menu以及獲取手機(jī)分辨率的解決方法
本篇文章小編為大家介紹，在Android中創(chuàng)建菜單項Menu以及獲取手機(jī)分辨率的解決方法。需要的朋友參考下2013-04-04