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

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

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属性,大家有兴趣的自己仔细研究一下吧.

时间: 2016-01-23

Android 仿今日头条简单的刷新效果实例代码

点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

Android RecyclerView仿新闻头条的频道管理功能

需要在build里添加依赖 compile 'com.android.support:recyclerview-v7:25.3.1' 布局文件activity_main <android.support.v7.widget.RecyclerView android:layout_weight="1" android:id="@+id/recyclerView_up" android:layout_width="match_parent" a

Android实现仿网易今日头条等自定义频道listview 或者grideview等item上移到另一个view中

我这里只是简单的用了两个listview来实现的,先上效果图.比较粗糙.预留了自定义的空间. 思路: 从上图应该可以看的出来.就是上下两个listview.点击下面的ltem.会动态的移动到上一个listview的最后.上面的listview 为listview1,下面的为listview2. 点击listview2,获取到view ,设置一个动画,移动到listview1 ,listview2中删除被点的item.listview1中新增一个. 上代码: Mainactivity.java 部

Android 仿今日头条评论时键盘自动弹出的效果(推荐)

Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: <style name="inputDialog" parent="@android:style/Theme.Holo.Light.Dialog"> <item name="android:windowBackground">@col

Android应用中仿今日头条App制作ViewPager指示器

一.概述 顶部ViewPager指示器的字体变色,该效果图是这样的: 大概是今天头条的app,神奇的地方就在于,切换ViewPager页面的时候,顶部指示器改成了字体颜色的变化,个人觉得还是不错的. 那么核心的地方就是做一个支持字体这样逐渐染色就可以了,我大概想了32s,扫描了一些可能实现的方案,最终定位了一个靠谱的,下面我就带大家开始实现的征程. 实现之前贴一下我们的效果图: 1.简单使用 效果如上图了,关于颜失色的改变我添加了两个方向,一个是左方向,一个是有方向. 单纯的使用,可能觉得没什么

Android使用RecyclerView实现今日头条频道管理功能

使用过今日头条的伙计们对这个效果肯定很熟悉.拖拽可排序,点击标签后可以删除.今天我们采用RecyclerView来实现. 实现思路: 通过ItemTouchHelper来绑定RecyclerView的子控件触摸事件. 当滑动拖拽的时候,通知适配器来交换两个子控件的显示位置. 更改数据源,使数据源与子空间显示内容一致. 这就是实现的基本思路,是不是很简单?当然,首先要了解一下ItemTouchHelper这哥们儿是干啥的,有什么作用. This is a utility class to add

Android仿今日头条APP实现下拉导航选择菜单效果

本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView

Android仿QQ好友详情页下拉顶部图片缩放效果

本文实例为大家分享了Android下拉顶部图片缩放效果展示的具体代码,供大家参考,具体内容如下 效果图 效果分析 1 向下滑动,头部的图片随着手指滑动不断变大 2 向上滑动,不断的向上移动图片,直到图片不可见 3 当顶部图片不可见时,向上滑动,滑动ListView 实现思路 1 由于这个View分上下两部分,垂直排列,可以通过继承LinearLayout实现::自定义一个DragImageView,该View继承LinearLayout public DragImageView(Context

Android仿今日头条顶部导航栏效果的实例代码

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

Android仿今日头条多个fragment懒加载的实现

前言 最近有时间,所以我又双叒叕推新一篇文章了,fragment懒加载实现虽然是个小模块,但做过的人都有体会,通常并不会轻易就成功了的,让你辗转反侧,彻夜难眠,绵绵无绝期.我就按照今日头条的样式做了一个懒加载功能.文章到一半会解释大家可能遇到的不加载数据了的坑,先不剧透. Fragment的生命周期回顾 github代码直通车 (本地下载) 这里是今日头条效果: 自制效果,有图有真相: 实现思路: 使用Fragment类自带方法setUserVisibleHint()判断当前fragment是否

javascript实现日期三级联动下拉框选择菜单

由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimu

Android实现今日头条订阅频道效果

本文实例为大家分享了Android仿今日头条订阅频道,供大家参考,具体内容如下 源码:Android实现今日头条订阅频道 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro