android 图片轮播

作者: cnbzlj 发布时间: 2019-09-23 浏览: 171 次 编辑

今天,简单讲讲Android图片轮播功能。

其实图片轮播功能就是使用ViewPager和Handler,网上查找了资料,把这个简单的问题写的很复杂。其实一个自定义控件完全可以解决。这里直接上代码,不在做过多的讲解了。有问题的可以提问,我看到后会尽量回复。

一.定义相关变量

private final int DELAY_TIME = 3000;//自动轮播时间
private List<String> mUrls;
private List<ImageView> mViewpagerViews;  //轮播图片的列表
private List<ImageView> mDotImageviews;   //轮播圆点的列表
private Context context;
private int size;//圆点的大小
private int margin;//圆点的间距
private int count;//viewpager中view的数量
private ViewPager mViewPager;
private LinearLayout mDotlayout;//圆点布局
private MyPager mPagerAdapter;
 
private int currentItem;//当前viewpager索引
private Handler handler = new Handler();
private BannerClicklistener mBannerClicklistener;

2.初始化代码

private void init(Context context, AttributeSet attrs) {
        this.context = context;
        mUrls = new ArrayList<>();
        mViewpagerViews = new ArrayList<>();
        mDotImageviews = new ArrayList<>();
        //拿到自定义的属性数组
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Banner);
        //得到数组里的自定义的size(圆点大小)
        size = typedArray.getDimensionPixelSize(R.styleable.Banner_size, 10);
        //得到数组里的自定义的margin(圆点间距)
        margin = typedArray.getDimensionPixelSize(R.styleable.Banner_margin, 10);
 
        typedArray.recycle();//通知jvm的垃圾回收器,当你回收对象的时候,一定要把我回收了
 
 
        View view = LayoutInflater.from(context).inflate(R.layout.banner_layout, this, true);
//        addView(view);
//        View child = LayoutInflater.from(context).inflate(R.layout.banner_layout,null);
//        addView(child);
        mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
        mDotlayout = (LinearLayout) view.findViewById(R.id.layout_dot);
 
        //添加viewpager页面改变监听
        mViewPager.addOnPageChangeListener(this);
 
 
    }

3.绘制图片

private void drawViewpager() {
        for (int i = 0; i < count; i++) {
            ImageView iv = new ImageView(context);
            iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            mViewpagerViews.add(iv);
        }
        if (mViewpagerViews != null) {
            mPagerAdapter = new MyPager();
            mViewPager.setAdapter(mPagerAdapter);
        }
    }

图片的adapter:

class MyPager extends PagerAdapter {
 
        @Override
        public int getCount() {
            return mViewpagerViews.size();
        }
 
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
 
        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
 
            ImageView view = mViewpagerViews.get(position);
            container.addView(view);
 
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
 
                    //实现点击逻辑
 
                    mBannerClicklistener.onClickListener(position);
                }
            });
 
//            System.out.println("urls:"+mUrls.get(position));
            ImageLoader.getInstance().displayImage(mUrls.get(position), view);
//            Glide.with(context)
//                    .load(mUrls.get(position))
//                    .into(view);
            return view;
        }
 
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

4.绘制圆点

/**
     * 绘制圆点
     */
    private void drawDots() {
 
        for (int i = 0; i < count; i++) {
 
            ImageView iv = new ImageView(context);
 
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(size, size);
            params.leftMargin = margin;
            params.rightMargin = margin;
            iv.setLayoutParams(params);
 
            mDotImageviews.add(iv);
 
            if (i == 0) {
 
                iv.setImageResource(R.drawable.dot_selected);
            } else {
                iv.setImageResource(R.drawable.dot_normal);
            }
 
            mDotlayout.addView(iv);
        }
 
 
    }

5.设置自动滚动

/**
     * 设置自动滚动
     */
    private void setAuto() {
        handler.postDelayed(mTask, DELAY_TIME);
    }

这个其实就是使用handle循环发送消息,进行图片轮播。mTask代码:

/**
     * 定时任务
     */
    Runnable mTask = new Runnable() {
        @Override
        public void run() {
            currentItem++;
            if (currentItem >= count) {
                currentItem = 0;
            }
            mViewPager.setCurrentItem(currentItem);
            handler.postDelayed(this, DELAY_TIME);
        }
    };

6.监听滑动事件,当用户滑动时,停止自动轮播

/**
     * 处理自动轮播和手动滑动的冲突
     *
     * @param ev
     * @return
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        if (action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_MOVE) {
            stopAuto();
        } else if (action == MotionEvent.ACTION_UP) {
            setAuto();
        }
        return super.dispatchTouchEvent(ev);
    }
/**
     * 取消自动轮播任务
     */
    private void stopAuto() {
        handler.removeCallbacks(mTask);//取消任务
    }

简单讲讲,其实就是自定义控件,里面有图片的adapter,和圆点的列表,设置一个handler不停的发送命令,实现了图片自动轮播,监听滑动点击事件,处理用户手动滑动与自动滑动的冲突。

自定义控件的xml文件:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
 
    <LinearLayout
        android:id="@+id/layout_dot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="10dp" />
 
</FrameLayout>

使用也很简单:

banner = (Banner) findViewById(R.id.banner);
 
        urls = new ArrayList<>();
        urls.add("http://img2.imgtn.bdimg.com/it/u=3585804305,763553611&fm=27&gp=0.jpg");
        urls.add("http://img0.imgtn.bdimg.com/it/u=3281146250,5393266&fm=27&gp=0.jpg");
        urls.add("http://img5.imgtn.bdimg.com/it/u=2496610138,254842195&fm=27&gp=0.jpg");
        urls.add("http://img5.imgtn.bdimg.com/it/u=2951375427,1212049814&fm=27&gp=0.jpg");
 
 
        //解耦
        banner.loadData(urls).display();//构建者模式返回对象本身
 
 
        banner.setBannerClicklistener(new Banner.BannerClicklistener() {
            @Override
            public void onClickListener(int pos) {
 
                Toast.makeText(MainActivity.this, "pos====" + pos, Toast.LENGTH_SHORT).show();
            }
        });

如果有一定基础,应该能看懂了。如果看不懂,可以下载源码:https://download.csdn.net/download/bzlj2912009596/10588473

android 图片轮播就讲完了。

就这么简单。