正文

实例讲解Android中ViewPager组件的一些进阶使用技巧

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

这篇文章主要介绍了Android中ViewPager组件的一些进阶使用技巧,包括添加标题与onPagerChangeListener监听使用等,需要的朋友可以参考下

我们经常看到使用了viewpager的app，在每页上面都会有一个滑块来标志当前处于哪一页。在pagerview包里有android.support.v4.view.pagertitlestrip和android.support.v4.view.pagertabstrip两个组件，可以在布局文件中，作为viewpager的子标签，并设定相对与viewpager的位置(比如顶部)。但这两个组件都很丑，并且标题会随着页面一起滑动，所以一般都不用。

其实实现一个滑块标志当前页面也很简单，大概需要两步：

第一步 在布局文件viewpager的上方放置一个imageview组件，组件可以是图片或是shape资源。注意需要把imageview的scaletype属性设为matrix，就是说该组件的位置和大小由一个变换矩阵来控制；

第二步 在activity中为viewpager组件添加onpagechangelistener监听器。在onpagechangelistener里设定matrix，用于控制指示滑块imageview的位置。该监听器需要实现三个方法：

onpagescrollstatechanged：用于监听滑动状态的改变

onpagescrolled：用于监听滑动的动作

onpageseleted:用于监听页面的切换，即某个页面被选中了作为当前页面。

一般实现onpageselected方法就可以，其他两个方法可以空着。另外为了使页面切换时滑块也是平滑地滑动，可以给滑块的imageview指定一个translateanimation动画，指定动画用setanimation，tranlateanimation也很简单，有个构造函数是translateanimation(int beginx,int endx,int beginy,int endy)，将运动矢量的起始位置和终止位置传给它就好了。

下面我们来看五个具体的例子：


一 实现viewpager（数据源为list<view>）

1.先在main.xml文件中添加一个viewpager:

?
1
2
3
4
5
6
7
8
9
10
11
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >
 
  <android.support.v4.view.viewpager
    android:id="@+id/pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  </android.support.v4.view.viewpager>
 
</linearlayout>

2.创建三个view:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
 
  <textview
    android:id="@+id/txt1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textsize="25dp"
    android:text="第一页" >
  </textview>
 
</linearlayout>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
 
  <textview
    android:id="@+id/txt2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第二页" >
  </textview>
   
</linearlayout>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  
  <textview
    android:id="@+id/txt3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第三页" >
  </textview>
  
</linearlayout>

3.创建一个viewpager适配器类：

?
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
package com.yayun.viewpagerdemo;
 
import java.util.arraylist;
import java.util.list;
 
import android.support.v4.view.pageradapter;
import android.view.view;
import android.view.viewgroup;
 
public class viewpageradapter extends pageradapter {
  private list<view> lviews=new arraylist<view>();
   
  public viewpageradapter(list<view> lviews){
    this.lviews=lviews;
  }
 
  @override
  public int getcount() {
    return lviews.size();
  }
 
  @override
  public boolean isviewfromobject(view arg0, object arg1) {
    return arg0==arg1;
  }
  @override
  public object instantiateitem(viewgroup container, int position) {
    container.addview(lviews.get(position));
    return lviews.get(position);
  }
  @override
  public void destroyitem(viewgroup container, int position, object object) {
    container.removeview(lviews.get(position));
  }
 
}

4.mainactivity.java:

?
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
package com.yayun.viewpagerdemo;
 
import java.util.arraylist;
import java.util.list;
 
import android.support.v7.app.actionbaractivity;
import android.support.v7.app.actionbar;
import android.support.v4.app.fragment;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.os.bundle;
import android.view.layoutinflater;
import android.view.menu;
import android.view.menuitem;
import android.view.view;
import android.view.viewgroup;
import android.view.window;
import android.os.build;
 
public class mainactivity extends actionbaractivity {
  private viewpager viewpager;
  private list<view> listviews=null;
  viewpageradapter pageradapter;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.activity_main);
     
    viewpager=(viewpager) findviewbyid(r.id.pager);
    listviews=new arraylist<view>();
    /**
     * 为adapter创建数据源
     */
    view view1=view.inflate(this, r.layout.view1, null);
    view view2=view.inflate(this, r.layout.view2, null);
    view view3=view.inflate(this, r.layout.view3, null);
    listviews.add(view1);
    listviews.add(view2);
    listviews.add(view3);
    pageradapter=new viewpageradapter(listviews) ;
    viewpager.setadapter(pageradapter);
 
  }
 
}

5.运行实例：

实例讲解Android中ViewPager组件的一些进阶使用技巧
可以实现翻页效果。

二 添加标题
1.我们需要更改main.xml文件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >
 
  <android.support.v4.view.viewpager
    android:id="@+id/pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >
 
    <android.support.v4.view.pagertabstrip
      android:id="@+id/strip"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="top" >
    </android.support.v4.view.pagertabstrip>
  </android.support.v4.view.viewpager>
 
</linearlayout>

2.需要更改适配器文件：

?
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
package com.yayun.viewpagerdemo;
 
import java.util.arraylist;
import java.util.list;
 
import android.support.v4.view.pageradapter;
import android.view.view;
import android.view.viewgroup;
 
public class viewpageradapter extends pageradapter {
  private list<view> lviews=new arraylist<view>();
  private list<string> titlelist=new arraylist<string>();
   
  public viewpageradapter(list<view> lviews,list<string> titlelist){
    this.lviews=lviews;
    this.titlelist=titlelist;
  }
 
  @override
  public int getcount() {
    return lviews.size();
  }
 
  @override
  public boolean isviewfromobject(view arg0, object arg1) {
    return arg0==arg1;
  }
  @override
  public object instantiateitem(viewgroup container, int position) {
    container.addview(lviews.get(position));
    return lviews.get(position);
  }
  @override
  public void destroyitem(viewgroup container, int position, object object) {
    container.removeview(lviews.get(position));
  }
  /**
   * 标题
   */
  @override
  public charsequence getpagetitle(int position) {
    // todo auto-generated method stub
    return titlelist.get(position);
  }
 
}

3.需要更改mainactivity.java文件：

?
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
package com.yayun.viewpagerdemo;
 
import java.util.arraylist;
import java.util.list;
 
import android.support.v7.app.actionbaractivity;
import android.support.v7.app.actionbar;
import android.support.v4.app.fragment;
import android.support.v4.view.pageradapter;
import android.support.v4.view.pagertabstrip;
import android.support.v4.view.viewpager;
import android.os.bundle;
import android.view.layoutinflater;
import android.view.menu;
import android.view.menuitem;
import android.view.view;
import android.view.viewgroup;
import android.view.window;
import android.os.build;
 
public class mainactivity extends actionbaractivity {
  private viewpager viewpager;
  private list<view> listviews=null;
  viewpageradapter pageradapter;
  pagertabstrip pagertabstrip;
  private list<string> titlelist;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.activity_main);
     
    viewpager=(viewpager) findviewbyid(r.id.pager);
    pagertabstrip=(pagertabstrip) findviewbyid(r.id.strip);
    listviews=new arraylist<view>();
    titlelist=new arraylist<string>();
    titlelist.add("第一页");
    titlelist.add("第二页");
    titlelist.add("第三页");
    /**
     * 为adapter创建数据源
     */
    view view1=view.inflate(this, r.layout.view1, null);
    view view2=view.inflate(this, r.layout.view2, null);
    view view3=view.inflate(this, r.layout.view3, null);
    listviews.add(view1);
    listviews.add(view2);
    listviews.add(view3);
    pageradapter=new viewpageradapter(listviews,titlelist) ;
    viewpager.setadapter(pageradapter);
 
  }
 
}

4.运行实例如下：

实例讲解Android中ViewPager组件的一些进阶使用技巧

三 实现viewpager(数据源为list<fragment>)
1.首先我们要创建三个fragment:

?
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
package com.yayun.viewpagerdemo;
 
import android.os.bundle;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
 
public class fragment1 extends fragment {
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container,
      bundle savedinstancestate) {
    return inflater.inflate(r.layout.view1, container, false);
  }
 
}
 
package com.yayun.viewpagerdemo;
 
import android.os.bundle;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
 
public class fragment2 extends fragment {
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container,
      bundle savedinstancestate) {
    return inflater.inflate(r.layout.view2, container, false);
  }
 
}
 
package com.yayun.viewpagerdemo;
 
import android.os.bundle;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
 
public class fragment3 extends fragment {
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container,
      bundle savedinstancestate) {
    return inflater.inflate(r.layout.view3, container, false);
  }
 
}

2.设置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
package com.yayun.viewpagerdemo;
 
import java.util.list;
 
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
 
public class myfragmentpageradapter extends fragmentpageradapter {
  list<fragment> fragmentslist;
  list<string> titlelist;
 
  public myfragmentpageradapter(fragmentmanager fm,list<fragment> fragmentslist,list<string> titlelist) {
    super(fm);
    this.fragmentslist=fragmentslist;
    this.titlelist=titlelist;
  }
 
  @override
  public fragment getitem(int arg0) {
    // todo auto-generated method stub
    return fragmentslist.get(arg0);
  }
 
  @override
  public int getcount() {
    // todo auto-generated method stub
    return fragmentslist.size();
  }
@override
/**
 * 添加标题
 */
public charsequence getpagetitle(int position) {
  // todo auto-generated method stub
  return titlelist.get(position);
}
 
}

3.mainactivity.java:

?
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
package com.yayun.viewpagerdemo;
 
import java.util.arraylist;
import java.util.list;
 
import android.graphics.color;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.view.pagertabstrip;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.pagetransformer;
import android.support.v7.app.actionbaractivity;
import android.view.view;
import android.view.window;
 
public class mainactivity extends actionbaractivity {
  private viewpager viewpager;
  private list<view> listviews=null;
  viewpageradapter pageradapter;
  pagertabstrip pagertabstrip;
  private list<string> titlelist;
  private list<fragment> fragmentslist;
  myfragmentpageradapter myfragmentpageradapter;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.activity_main);
     
    viewpager=(viewpager) findviewbyid(r.id.pager);
    pagertabstrip=(pagertabstrip) findviewbyid(r.id.strip);
     
    /**
     * 设置pagertabstrip属性
     */
    pagertabstrip.setbackgroundcolor(color.green);
    pagertabstrip.setdrawfullunderline(false);
    pagertabstrip.settextcolor(color.white);
    listviews=new arraylist<view>();
    titlelist=new arraylist<string>();
    fragmentslist=new arraylist<fragment>();
    fragmentslist.add(new fragment1());
    fragmentslist.add(new fragment2());
    fragmentslist.add(new fragment3());
    titlelist.add("第一页");
    titlelist.add("第二页");
    titlelist.add("第三页");
    /**
     * 为adapter创建数据源
     */
    view view1=view.inflate(this, r.layout.view1, null);
    view view2=view.inflate(this, r.layout.view2, null);
    view view3=view.inflate(this, r.layout.view3, null);
    listviews.add(view1);
    listviews.add(view2);
    listviews.add(view3);
    pageradapter=new viewpageradapter(listviews,titlelist) ;
    myfragmentpageradapter=new myfragmentpageradapter(getsupportfragmentmanager(), fragmentslist, titlelist);
    //viewpager.setadapter(pageradapter);
    viewpager.setadapter(myfragmentpageradapter);
 
  }
 
}


4.运行实例：

实例讲解Android中ViewPager组件的一些进阶使用技巧

这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。

四 实现viewpager(数据源为list<fragment>实现fargmentstatepageradapter)常用
改变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
package com.yayun.viewpagerdemo;
 
import java.util.list;
 
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.app.fragmentstatepageradapter;
import android.view.view;
 
public class myfragmentpageradapter2 extends fragmentstatepageradapter {
  list<fragment> fragmentslist;
  list<string> titlelist;
 
  public myfragmentpageradapter2(fragmentmanager fm,list<fragment> fragmentslist,list<string> titlelist) {
    super(fm);
    this.fragmentslist=fragmentslist;
    this.titlelist=titlelist;
  }
 
  @override
  public fragment getitem(int arg0) {
    // todo auto-generated method stub
    return fragmentslist.get(arg0);
  }
 
  @override
  public int getcount() {
    // todo auto-generated method stub
    return fragmentslist.size();
  }
@override
/**
 * 添加标题
 */
public charsequence getpagetitle(int position) {
  // todo auto-generated method stub
  return titlelist.get(position);
}
@override
public object instantiateitem(view container, int position) {
  // todo auto-generated method stub
  return super.instantiateitem(container, position);
}
@override
public void destroyitem(view container, int position, object object) {
  // todo auto-generated method stub
  super.destroyitem(container, position, object);
}
 
}

将mainactivity.java中的adapter换一下即可，它可以实现页卡的创建和销毁。

五  onpagerchangelistener 监听使用
只需要修改mainactivity.java:

?
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
package com.yayun.viewpagerdemo;
 
import java.util.arraylist;
import java.util.list;
 
import android.graphics.color;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.view.pagertabstrip;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.support.v4.view.viewpager.pagetransformer;
import android.support.v7.app.actionbaractivity;
import android.view.view;
import android.view.window;
import android.widget.toast;
 
public class mainactivity extends actionbaractivity implements onpagechangelistener {
  private viewpager viewpager;
  private list<view> listviews=null;
  viewpageradapter pageradapter;
  pagertabstrip pagertabstrip;
  private list<string> titlelist;
  private list<fragment> fragmentslist;
  myfragmentpageradapter myfragmentpageradapter;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.activity_main);
     
    viewpager=(viewpager) findviewbyid(r.id.pager);
    pagertabstrip=(pagertabstrip) findviewbyid(r.id.strip);
     
    /**
     * 设置pagertabstrip属性
     */
    pagertabstrip.setbackgroundcolor(color.green);
    pagertabstrip.setdrawfullunderline(false);
    pagertabstrip.settextcolor(color.white);
    listviews=new arraylist<view>();
    titlelist=new arraylist<string>();
    fragmentslist=new arraylist<fragment>();
    fragmentslist.add(new fragment1());
    fragmentslist.add(new fragment2());
    fragmentslist.add(new fragment3());
    titlelist.add("第一页");
    titlelist.add("第二页");
    titlelist.add("第三页");
    /**
     * 为adapter创建数据源
     */
    view view1=view.inflate(this, r.layout.view1, null);
    view view2=view.inflate(this, r.layout.view2, null);
    view view3=view.inflate(this, r.layout.view3, null);
    listviews.add(view1);
    listviews.add(view2);
    listviews.add(view3);
    pageradapter=new viewpageradapter(listviews,titlelist) ;
    myfragmentpageradapter=new myfragmentpageradapter(getsupportfragmentmanager(), fragmentslist, titlelist);
    //viewpager.setadapter(pageradapter);
    viewpager.setadapter(myfragmentpageradapter);
    viewpager.setonpagechangelistener(this);//加载监听器
 
  }
 
  @override
  public void onpagescrollstatechanged(int arg0) {
    // todo auto-generated method stub
     
  }
 
  @override
  public void onpagescrolled(int arg0, float arg1, int arg2) {
    // todo auto-generated method stub
     
  }
 
  @override
  public void onpageselected(int arg0) {
    toast.maketext(this, "当前页面为"+(arg0+1), toast.length_short).show();
     
  }
 
}

运行实例即可以显示当前页面标签。