Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

时间:2022-06-03 06:42:35

首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦。

Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

viewpager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,上面是效果图,用美女图片是我一贯的作风,呵呵

 1.    首先看一些layout下的xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 <android.support.v4.view.viewpager
 android:id="@+id/viewpager"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content" />
 <relativelayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical" >
 <linearlayout
 android:id="@+id/viewgroup"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_alignparentbottom="true"
 android:layout_marginbottom="30dp"
 android:gravity="center_horizontal"
 android:orientation="horizontal" >
 </linearlayout>
 </relativelayout>
</framelayout>

使用viewpager首先需要引入android-support-v4.jar这个jar包。自己不要忘记加

?
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
package com.example.viewpagerdemo;
import android.app.activity;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v4.view.viewpager.onpagechangelistener;
import android.view.view;
import android.view.viewgroup;
import android.view.viewgroup.layoutparams;
import android.widget.imageview;
import android.widget.linearlayout;
public class twoactivity extends activity implements onpagechangelistener{
 /**
 * viewpager
 */
 private viewpager viewpager;
 /**
 * 装点点的imageview数组
 */
 private imageview[] tips;
 /**
 * 装imageview数组
 */
 private imageview[] mimageviews;
 /**
 * 图片资源id
 */
 private int[] imgidarray ;
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 viewgroup group = (viewgroup)findviewbyid(r.id.viewgroup);
 viewpager = (viewpager) findviewbyid(r.id.viewpager);
 //载入图片资源id
 imgidarray = new int[]{r.drawable.item01, r.drawable.item02, r.drawable.item03, r.drawable.item04,
 r.drawable.item05,r.drawable.item06, r.drawable.item07, r.drawable.item08};
 //将点点加入到viewgroup中
 tips = new imageview[imgidarray.length];
 for(int i=0; i<tips.length; i++){
 imageview imageview = new imageview(this);
 imageview.setlayoutparams(new layoutparams(10,10));
 tips[i] = imageview;
 if(i == 0){
 tips[i].setbackgroundresource(r.drawable.page_indicator_focused);
 }else{
 tips[i].setbackgroundresource(r.drawable.page_indicator_unfocused);
 }
 linearlayout.layoutparams layoutparams = new linearlayout.layoutparams(new viewgroup.layoutparams(layoutparams.wrap_content,
  layoutparams.wrap_content));
 layoutparams.leftmargin = 5;
 layoutparams.rightmargin = 5;
 group.addview(imageview, layoutparams);
 }
 //将图片装载到数组中
 mimageviews = new imageview[imgidarray.length];
 for(int i=0; i<mimageviews.length; i++){
 imageview imageview = new imageview(this);
 mimageviews[i] = imageview;
 imageview.setbackgroundresource(imgidarray[i]);
 }
 //设置adapter
 viewpager.setadapter(new myadapter());
 //设置监听,主要是设置点点的背景
 viewpager.setonpagechangelistener(this);
 //设置viewpager的默认项, 设置为长度的100倍,这样子开始就能往左滑动
 viewpager.setcurrentitem((mimageviews.length) * 100);
 }
 /**
 *
 * @author xiaanming
 *
 */
 public class myadapter extends pageradapter{
 @override
 public int getcount() {
 return integer.max_value;
 }
 @override
 public boolean isviewfromobject(view arg0, object arg1) {
 return arg0 == arg1;
 }
 @override
 public void destroyitem(view container, int position, object object) {
 ((viewpager)container).removeview(mimageviews[position % mimageviews.length]);
 }
 /**
 * 载入图片进去,用当前的position 除以 图片数组长度取余数是关键
 */
 @override
 public object instantiateitem(view container, int position) {
 ((viewpager)container).addview(mimageviews[position % mimageviews.length], 0);
 return mimageviews[position % mimageviews.length];
 }
 }
 @override
 public void onpagescrollstatechanged(int arg0) {
 }
 @override
 public void onpagescrolled(int arg0, float arg1, int arg2) {
 }
 @override
 public void onpageselected(int arg0) {
 setimagebackground(arg0 % mimageviews.length);
 }
 /**
 * 设置选中的tip的背景
 * @param selectitems
 */
 private void setimagebackground(int selectitems){
 for(int i=0; i<tips.length; i++){
 if(i == selectitems){
 tips[i].setbackgroundresource(r.drawable.page_indicator_focused);
 }else{
 tips[i].setbackgroundresource(r.drawable.page_indicator_unfocused);
 }
 }
 }
}

喜欢的朋友直接下载代码哦。代码下载

上面的代码中,当只有3张图片或者2张图片的时候,滑动存在bug问题的修改如下

destroyitem(view container, int position, object object)方法中不removeview

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@override
 public void destroyitem(view container, int position, object object) {
// ((viewpager)container).removeview(mimageviews[position % mimageviews.length]);
 }
instantiateitem(view container, int position)增加异常扑捉
[java] view plaincopy在code上查看代码片派生到我的代码片
@override
 public object instantiateitem(view container, int position) {
 try {
 ((viewpager)container).addview(mimageviews[position % mimageviews.length], 0);
 }catch(exception e){
 //handler something
 }
 return mimageviews[position % mimageviews.length];
 }

以上代码给大家展示了android 利用viewpager实现图片可以左右循环滑动效果,希望大家喜欢。