正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0723

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

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

一、看一下demo的样子吧

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

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

二、把pagerslidingtabstrip导入我们的项目中
然后在我们的布局文件中进行声明:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<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还有我们的碎片

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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源码解析
首先我们看几个比较重要的属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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.首先看一下我们的构造会初始化一些什么属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<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的位置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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.更新标题样式,也就是滑动到当前标题下设置标题状态

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>

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

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

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