我们经常看到使用了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.运行实例：
可以实现翻页效果。
二 添加标题
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.运行实例如下：
三 实现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.运行实例：
这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。
四 实现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); } @overridepublic object instantiateitem(view container, int position) { // todo auto-generated method stub return super.instantiateitem(container, position); } @overridepublic 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(); } } |
运行实例即可以显示当前页面标签。
