Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载
程序员文章站
2023-12-16 11:47:22
首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦。
viewpager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一...
首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦。
viewpager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,上面是效果图,用美女图片是我一贯的作风,呵呵
1. 首先看一些layout下的xml
<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包。自己不要忘记加
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
@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实现图片可以左右循环滑动效果,希望大家喜欢。