ViewPager实现无限循环切换和手势滑动效果
在上一次的代码中加入了无限循环的功能,这一次我详细讲解一下我的逻辑。
1.实现添加imageview 进入viewpager
a.首先写一个CusViewpage继承自ViewPager
public class CusViewpage extends ViewPager{public CusViewpage(Context context, AttributeSet attrs) {super(context, attrs);}}
b.定义变量 Listprivate List viewPagerImage; private LinearLayout dotslayout;
c.自定义OnPageChangListener,和PagerAdapter,传说ViewPager如果不传入这个两个东西就会报错,我也没试过额,有兴趣的大虾们试试后告诉我一声哈,
/** * * @author 任爱民 * 自定义的OnPageChangeListener */public class ImagePagerChangeListener implements OnPageChangeListener {/** * 1是手指滑动 * 2是结束滑动 * 0是开始滑动 */public void onPageScrollStateChanged(int n) {}public void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}public void onPageSelected(int position) {}}/** * * @author 任爱民 * 自定义的PagerAdapter */public class ImagePagerAdapter extends PagerAdapter {private List list;public ImagePagerAdapter(List list) {this.list = list;}@Overridepublic void destroyItem(View view, int index, Object arg2) {((ViewPager) view).removeView(list.get(index));}@Overridepublic void finishUpdate(View arg0) {// TODO Auto-generated method stub}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn list.size();}@Overridepublic Object instantiateItem(View view, int index) {((ViewPager) view).addView(list.get(index), 0);return list.get(index);}@Overridepublic boolean isViewFromObject(View view, Object object) {// TODO Auto-generated method stubreturn view == (object);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub}@Overridepublic Parcelable saveState() {// TODO Auto-generated method stubreturn null;}@Overridepublic void startUpdate(View arg0) {// TODO Auto-generated method stub}}
d,init()方法初始化数据
public void init(List viewPagerImage,LinearLayout dotslayout){this.viewPagerImage = viewPagerImage;this.dotslayout = dotslayout;initImagePager();if(dotslayout != null)initDots();} /** * 初始化viewPage */ private void initImagePager() { if(viewPagerImage != null){ this.setImageStyle(); this.setAdapter(new ImagePagerAdapter(viewPagerImage)); this.setOnPageChangeListener(new ImagePagerChangeListener()); } } /** * 设置图片的一些风格 */ public void setImageStyle(){ android.widget.FrameLayout.LayoutParams viewparams = new android.widget.FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); for(ImageView imagaview:viewPagerImage){ imagaview.setLayoutParams(viewparams); //允许拉伸,填充屏幕 imagaview.setScaleType(ScaleType.FIT_XY); } } /** * 添加小点 */ // 主页面切换的小点资源id private int[] imagedotsid = { R.drawable.dotwhite, R.drawable.dotorange }; private void initDots() { //在这里为什么dots[]的长度要减2,后面我会详细说明。 dots = new ImageView[viewPagerImage.size() - 2]; for (int i = 0; i < dots.length; i++) { dots[i] = new ImageView(getContext()); dots[i].setLayoutParams(new android.widget.FrameLayout.LayoutParams(15, 15)); if (i == 0) dots[i].setImageResource(imagedotsid[1]); else dots[i].setImageResource(imagedotsid[0]); TextView tv = new TextView(getContext()); tv.setLayoutParams(new android.widget.FrameLayout.LayoutParams(10, 30)); dotslayout.addView(dots[i]); dotslayout.addView(tv); } }
现在已经可以显示出PagerView了,后面我们添加图片的自动循环切换 2.现在我们实现图片的手动循环切换,并且添加点的改变
先说一下无限循环的简单逻辑, 先看图,看颜色。
如图所示,如果我要无限循环四张图片,那么我需要添加6张图片进去,第一张是要显示的第四张图片,最后一张是需要展示的第一张图片,初始化时实际是显示的第二张图片,这样我们才可以向前滑动到前一张即第四张图片,当滑动到此图时且动作完毕时,立即切换到最后一张的前一张图片,位置是list.size()-2。前后一直滑动的道理也是一样的。
其实这就是一个简单的循环逻辑,为了保留滑动动作,才加入了最前后两张图片循环。
所以我们需要传入多的两张图片,之前设置点的数量才是list.size() - 2;
所以在初始化init()方法中时,我们需要将图片的显示位置设为1
setCurrentItem(1, false);
在自定义的切换事件中,我们加入上面的逻辑代码
public class ImagePagerChangeListener implements OnPageChangeListener { /** * 1是手指滑动 * 2是结束滑动 * 0是开始滑动 */ public void onPageScrollStateChanged(int n) { //这里是加入的代码 if(n == 0){ if(dotint == 0){ setCurrentItem(viewPagerImage.size()-2, false); }else if(dotint == viewPagerImage.size()-1){ setCurrentItem(1, false); } } }
a,实现改变的点的方法。
/** * 改变小点 */ // 记录现在的原点位置 private int dotint = 0; //记录原点应该显示的位置 private int dotprint = 0 ; // 图片的位置 private static int imagemoveid = 1; private void changedot(int dotintnew) { if(dots != null){dots[dotprint].setImageResource(imagedotsid[0]);if(dotintnew == 0){dotprint = viewPagerImage.size() - 3;}else if(dotintnew == viewPagerImage.size() - 1){dotprint = 0;}else{dotprint = dotintnew - 1;}dots[dotprint].setImageResource(imagedotsid[1]);imagemoveid = dotintnew;dotint = dotintnew; }}
b.在切换图片时,会响应OnPageChangeListener事件,所以我们在自定义的OnPageChangeListener中加入改变小点的方法
public void onPageSelected(int position) {// 改变小点if(dotslayout != null)changedot(position);}
现在我们已经实现了手动无线循环切换的pagerview,
3.实现自动无限切换图片
这里我先说明一个问题,我在实现这个功能的时候,开始是用的定时器Timer,过0.4秒就滑动一次。实现以后,在配合手动切换时,会出现,手动滑动一张图片后,立马就会自动切换到下一张图,这样的体验不是很好。后面我又改为线程去解决这个问题,每次手滑以后就重设线程,并设置0.1秒检测一次时候是否正在滑动.
a.创建滑动的线程
/** * 自动切换 创建线程 */ public boolean isMove = true; private Handler switcherHandler; //自动切换的时间 private int timelong = 40; //消息int private int message = 0x123; //给线程唯一性加锁 public static boolean isHaveLoop = true; private void startLoop() { new Thread() { public void run() { //表示已经有Loop开始运行 isHaveLoop = true; try {// 如果移动了则休眠四秒钟 //将检测ismove提高到0.1秒检测一次 int time = 0; while (isMove) { Thread.sleep(100); if(time++ >= timelong){ switcherHandler.sendEmptyMessage(message); time = 0; } } } catch (InterruptedException e) { e.printStackTrace(); } //表示Loop运行结束 isHaveLoop = false; }; }.start(); }
b.在init()初始化时,启动线程,并且在主线程中改变PagerView的位置
/** * 设置广告图片切换的计时器 */private void setSwitcherImage() {switcherHandler = new Handler() {@Overridepublic void handleMessage(Message msg) {if (msg.what == message && isMove) {int m = ++imagemoveid % (viewPagerImage.size());setCurrentItem(m);}super.handleMessage(msg);}};startLoop();}
在init()中执行这个方法。
setSwitcherImage();
c.重写onTouch()方法,检测触控事件,每次手动滑动时,都应该重开线程。
/** * 检测是否手势滑动 * 如果有收手势滑动则取消Loop线程,滑动结束后重新建立Loop线程 */ @Overridepublic boolean onTouchEvent(MotionEvent arg0) {if(arg0.getAction() == MotionEvent.ACTION_DOWN||arg0.getAction()==arg0.ACTION_MOVE){isMove = false;}else if(arg0.getAction() == MotionEvent.ACTION_UP){isMove =true;//如果不存在loop后,可以再次创建loopif(!isHaveLoop){ startLoop();}}else{isMove = true;if(!isHaveLoop){ startLoop();}}return super.onTouchEvent(arg0);}
4.测试。 我们放入布局文件
activity_main.xml
在主activity中初始化
import java.util.ArrayList;import java.util.List;import aimin.myviewpager.CusViewpage;import android.app.Activity;import android.os.Bundle;import android.widget.ImageView;import android.widget.LinearLayout;public class MainActivity extends Activity {private CusViewpage imageSwitchertitle;private LinearLayout dotLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);imageSwitchertitle = (CusViewpage) findViewById(R.id.cusviewpage);dotLayout = (LinearLayout) findViewById(R.id.dots);imageSwitchertitle.init(getTestImageView(),dotLayout);}/** * * @return测试用的List */public List getTestImageView(){List imageview = new ArrayList();ImageView imageviewfourq = new ImageView(this);imageviewfourq.setImageResource(R.drawable.title_four);ImageView imageviewone = new ImageView(this);imageviewone.setImageResource(R.drawable.title_one);ImageView imageviewtwo = new ImageView(this);imageviewtwo.setImageResource(R.drawable.title_two);ImageView imageviewthree = new ImageView(this);imageviewthree.setImageResource(R.drawable.title_three);ImageView imageviewfour = new ImageView(this);imageviewfour.setImageResource(R.drawable.title_four);ImageView imageviewoneh = new ImageView(this);imageviewoneh.setImageResource(R.drawable.title_one);imageview.add(imageviewfourq);imageview.add(imageviewone);imageview.add(imageviewtwo);imageview.add(imageviewthree);imageview.add(imageviewfour);imageview.add(imageviewoneh);return imageview;}/** * 初始化CusViewpage */}
运行截图:
缺陷:
1.但是依然有不足之处,init方法初始化List
2.不能动态添加图片.
更多相关文章
- Android(安卓)M新控件之AppBarLayout,NavigationView,CoordinatorL
- webview 设定和使用缓存来获取网页中的js,css和图片资源
- Android(安卓)解决NestedScrollView 嵌套 RecyclerView出现的卡
- Android(安卓)WebView加载Html文本不能适配,以及图片中间有空白的
- Android(安卓)嵌套滑动机制(NestedScrolling)
- Android(安卓)Glide4.0以上版本保存Gif文件方法
- Android笔面试题
- Android(安卓)解决BitmapFactory.decodeFile(file) 报OOM问题
- android显示大图片的一些技巧