zoukankan      html  css  js  c++  java
  • 封装一个ViewPager真正的实现图片无限循环滚动带导航点

    效果图:


    大家在写项目的过程中常常会碰到须要实现Viewpager里面载入几张图片来循环自己主动轮播的效果,假设不封装一下的话代码分散在activity里面会显得非常乱。并且也不利于我们下次复用,所以这里我把viewpager的相关代码抽取出来放在了一个类里面,使用的时候仅仅须要new 这个对象就可以。

    直接看代码:

    MyViewPager.java类:在activity中仅仅须要在初始化数据的时候增加MyViewPager myViewPager=new MyViewPager(this)这段代码就ok。

    package com.duora.bobge.duoradeliverly_version2.custom_view;
    
    import android.app.Activity;
    import android.os.Handler;
    import android.os.Message;
    import android.support.v4.view.ViewPager;
    import android.util.Log;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    import com.duora.bobge.duoradeliverly_version2.R;
    import com.duora.bobge.duoradeliverly_version2.adapter.EventPageAdapter;
    import com.duora.bobge.duoradeliverly_version2.base.BaseConfig;
    import com.duora.bobge.duoradeliverly_version2.listener.NavigationPageChangeListener;
    
    import java.util.ArrayList;
    
    /**
     * Created by bobge on 15/8/10.
     */
    public class MyViewPager {
        private Activity activity;
        private ViewPager viewPager;
        private LinearLayout mViewPoints;
        private ArrayList<View> pageViews;
        private ImageView imageView;
        /** 将小圆点的图片用数组表示 */
        private ImageView[] imageViews;
    
        private Handler mHandler = new Handler() {
            @Override
            public void dispatchMessage(Message msg) {
                switch (msg.what) {
                    case BaseConfig.MSG_CHANGE_PHOTO:
                        int index = viewPager.getCurrentItem();
                        viewPager.setCurrentItem(index + 1);
                        mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO,
                                BaseConfig.PHOTO_CHANGE_TIME);
                        break;
                }
                super.dispatchMessage(msg);
            }
        };
    
        public MyViewPager(Activity activity) {
            this.activity = activity;
            findViewById(activity);
            addData();
            initPoint();
        }
    
        private void addData() {
            pageViews = new ArrayList<View>();
            for (int i = 0; i < 5; i++) {
                ImageView imageView = new ImageView(activity);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                //picasso载入图片
                switch (i){
                    case 0:
                        imageView.setBackgroundResource(R.mipmap.a);
                        break;
                    case 1:
                        imageView.setBackgroundResource(R.mipmap.b);
                        break;
                    case 2:
                        imageView.setBackgroundResource(R.mipmap.c);
                        break;
                    case 3:
                        imageView.setBackgroundResource(R.mipmap.e);
                        break;
                    case 4:
                        imageView.setBackgroundResource(R.mipmap.f);
                        break;
                }
                pageViews.add(imageView);
            }
        }
    
    
        private void findViewById(Activity activity) {
            this.viewPager= (ViewPager)activity.findViewById(R.id.viewPager_main);
            this.mViewPoints= (LinearLayout)activity.findViewById(R.id.viewGroup);
        }
    
        //创建viewpager的那几个滑动的点
        private void initPoint() {
            // 创建imageviews数组,大小是要显示的图片的数量
            imageViews = new ImageView[pageViews.size()];
            // 加入小圆点的图片
            for (int i = 0; i < pageViews.size(); i++) {
                imageView = new ImageView(activity);
                // 设置小圆点imageview的參数
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                        20, 20);
                layoutParams.setMargins(5, 0, 5, 0);
                imageView.setLayoutParams(layoutParams);// 创建一个宽高均为20 的布局
                // 将小圆点layout加入到数组中
                imageViews[i] = imageView;
                // 默认选中的是第一张图片,此时第一个小圆点是选中状态,其它不是
                if (i == 0) {
                    imageViews[i]
                            .setBackgroundResource(R.mipmap.face_float_icon_on);
                } else {
                    imageViews[i]
                            .setBackgroundResource(R.mipmap.face_float_icon);
                }
    
                // 将imageviews加入到小圆点视图组
                mViewPoints.addView(imageViews[i]);
            }
            // 设置viewpager的适配器和监听事件
            Log.i("test", pageViews.size() + "====");
            viewPager.setAdapter(new EventPageAdapter(pageViews));
            viewPager.setOnPageChangeListener(new NavigationPageChangeListener(pageViews, imageViews));
            viewPager.setCurrentItem((pageViews.size()) * 50);
            if(pageViews.size()>1){
                mHandler.sendEmptyMessageDelayed(BaseConfig.MSG_CHANGE_PHOTO, BaseConfig.PHOTO_CHANGE_TIME);
            }
        }
    }


    它的滑动监听和适配器:

    NavigationPageChangeListener.java看命名应该就能知道这个类的作用了,不多说。

    package com.duora.bobge.duoradeliverly_version2.listener;
    
    import android.support.v4.view.ViewPager;
    import android.view.View;
    import android.widget.ImageView;
    
    import com.duora.bobge.duoradeliverly_version2.R;
    
    import java.util.ArrayList;
    
    /**
     * Created by bobge on 15/8/5.
     */
    //viewpager滑动监听
    public class NavigationPageChangeListener implements ViewPager.OnPageChangeListener {
    
        private ArrayList<View> pageViews;
        /** 将小圆点的图片用数组表示 */
        private ImageView[] imageViews;
        public NavigationPageChangeListener(ArrayList<View> pageViews, ImageView[] imageViews) {
            this.pageViews=pageViews;
            this.imageViews=imageViews;
        }
    
        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }
    
        @Override
        public void onPageSelected(int position) {
            //当页面切换时设置导航点的状态
            setPointStatus(position);
        }
        //设置导航点的状态
        private void setPointStatus(int position) {
            position=position%pageViews.size();
            for (int i = 0; i < imageViews.length; i++) {
                imageViews[position]
                        .setBackgroundResource(R.mipmap.face_float_icon_on);
                // 不是当前选中的page。其小圆点设置为未选中的状态
                if (position != i) {
                    imageViews[i]
                            .setBackgroundResource(R.mipmap.face_float_icon);
                }
            }
        }
    
    }
    EventPagerAdapter.java类是viewpager的适配器。instantiateItem方法做了一些处理。使事实上现无限循环。

    package com.duora.bobge.duoradeliverly_version2.adapter;
    
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.View;
    
    import java.util.ArrayList;
    
    /**
     * Created by bobge on 15/7/30.
     */
    public class EventPageAdapter extends PagerAdapter {
        private ArrayList<View> pageViews;
        public EventPageAdapter(ArrayList<View> pageViews) {
            this.pageViews=pageViews;
        }
    
        // 销毁position位置的界面
        @Override
        public void destroyItem(View container, int position, Object object) {
    
            ((ViewPager) container).removeView(pageViews.get(position%pageViews.size()));
        }
    
        // 获取当前窗口界面数
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }
    
        // 初始化position位置的界面
        @Override
        public Object instantiateItem(View v, int position) {
            try{
                //((ViewPager) arg0).addView(list.get(arg1),0);
                ((ViewPager) v).addView((View)pageViews.get(position%pageViews.size()),0);
            }catch (Exception e) {
                // TODO: handle exception
            }
            return pageViews.get(position%pageViews.size());
        }
    
        @Override
        public boolean isViewFromObject(View v, Object arg1) {
            return v == arg1;
        }
    
        @Override
        public void startUpdate(View arg0) {
        }
    
        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }
    
    }
    


    布局:custom_viewpager.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--带导航点的viewpager布局-->
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
    
        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

    在activity的布局中仅仅须要导入上面那个布局就可以:

    <include
        layout="@layout/custom_viewpager"
        android:id="@+id/myViewPager"
        android:layout_width="match_parent"
        android:layout_height="@dimen/viewpager_height"
        />

  • 相关阅读:
    10个最好的游戏开发在线资源
    程序员什么时候该考虑辞职
    程序员常去的14个顶级开发社区
    如何成为10倍速的程序员
    (通用)深度学习环境搭建:tensorflow安装教程及常见错误解决
    20行JS代码实现贪吃蛇
    程序员必备工具目录
    发布 Google Chrome插件教程
    高并发思路
    30分钟入门Java
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/7053141.html
Copyright © 2011-2022 走看看