热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

Android仿今日头条滑动页面导航效果

这篇文章主要为大家详细介绍了Android仿今日头条滑动页面导航效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近项目中用到了滑动页面,也就是和目前市场上很火的"今日头条"页面滑动类似,在网上找了一下,大部分都是用ViewPager来实现的,刚开始我用的是ViewPager+ViewGroup,上面的标题按钮用的是HorizontalScrollView,写完之后感觉效果比较生硬,果断换掉,发现了一个效果比较好的第三方,也就是今天的主题:PagerSlidingTabStrip.好了,下面来具体介绍一下PagerSlidingTabStrip,进行一下源码解析.

一、看一下demo的样子吧

二、把PagerSlidingTabStrip导入我们的项目中

然后在我们的布局文件中进行声明:

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
 
  
 
  
 
 
 

上面的也就是我们的标题滑动按钮,下面的ViewPager用来存放我们的内容

三、创建Adapter

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]; 
 } 
 
} 
 

我这里用的是碎片Fragment,最下面的getPageTitle()是我们的PagerSlidingTabStrip中的方法,用来获取标题
接下来我们初始化PagerSlidingTabStrip和ViewPager还有我们的碎片

 private void initViews(){ 
 fragments = new ArrayList<>(); 
 pagerTab = (PagerSlidingTabStrip) findViewById(R.id.tab); 
 pager = (ViewPager) findViewById(R.id.pager); 
 
 for (int i=0;i 

在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.首先看一下我们的构造会初始化一些什么属性

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

这些基本都能看懂,主要都是初始化一些属性,代码中也有相应的注释,就不一一介绍了

2.定义ViewPager滑动监听器,设置当前pager的位置

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); 
 } 
 } 
 
 } 

3.更新标题样式,也就是滑动到当前标题下设置标题状态

private void updateTabStyles() { 
 
 for (int i = 0; i = Build.VERSION_CODES.ICE_CREAM_SANDWICH) { 
  tab.setAllCaps(true); 
  } else { 
  tab.setText(tab.getText().toString().toUpperCase(locale)); 
  } 
 } 
 if (i == selectedPosition) { 
  tab.setTextColor(selectedTabTextColor); 
 } 
 } 
 } 
 
 } 

大体就差不多这些了,好了,给大家看一下我自己完善后的样子吧

没有做太多调整,只是稍微的改了一下样式,里面还有一些比较细节的东西没有介绍,比如标题的宽度是平均分配还是分体字体长度进行设置,我们可以修改shouldExpand属性,大家有兴趣的自己仔细研究一下吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • 本文是关于自学Android的笔记,包括查看类的源码的方法,活动注册的必要性以及布局练习的重要性。通过学习本文,读者可以了解到在自学Android过程中的一些关键点和注意事项。 ... [详细]
  • 本文介绍了在Mac上安装Xamarin并使用Windows上的VS开发iOS app的方法,包括所需的安装环境和软件,以及使用Xamarin.iOS进行开发的步骤。通过这种方法,即使没有Mac或者安装苹果系统,程序员们也能轻松开发iOS app。 ... [详细]
  • Java学习笔记之使用反射+泛型构建通用DAO
    本文介绍了使用反射和泛型构建通用DAO的方法,通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作,从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
author-avatar
flyfish6300_468
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有