轮播图

忙的太久啦,也没有写一篇博客,最近闲下来啦,准备写我的处女做。轮播图在常见不过啦,如果你是一个程序员宝宝的话,网上也有很多demo,也是五花八门的,让人看起来头疼,下面我来写一个我自己的思路分享给大家。宝宝们,你们准备好走进我的套路里面啦吗?哈哈哈。。。。。

主要思路

ViewPager加线程,利用Handler通知ViewPager滑动。

布局文件废话太多啦,我决定上代码啦宝宝们

<span style="font-size:14px;"></span><pre style="background-color: rgb(255, 255, 255); font-family: Menlo;"><pre name="code" class="java"><!--放轮播图的-->
<android.support.v4.view.ViewPager
    android:id="@+id/carousel_view_page"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@mipmap/ic_launcher"
    android:layout_marginRight="50dp"
    android:layout_marginLeft="50dp"
    android:clipChildren="false" />
<!--放与轮播图联动的圆点-->
<LinearLayout
    android:id="@+id/carousel_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:layout_marginTop="-25dp"
    android:orientation="horizontal" />

 
 
android:clipChildren="false"这里我设置了false,默认是true
核心代码
<span style="font-size:14px;">public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private ViewGroup viewGroup;//里面放与轮播图联动的线性布局,(小圆点)
    private ImageView[] imgCircles;//放小圆点的集合
    private boolean userTouch = false;//判断用户是否触摸
    private Handler handler;//刷新UI
    private boolean threadAlive = true;//用来销毁线程的
    private CarouselAdapter carouselAdapter;
    //轮播图中的图片来源,只是一个例子,也可以是从网络拉取的图片
    private int photos[] = {R.mipmap.page_one, R.mipmap.page_two, R.mipmap.page_three,};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewGroup = (ViewGroup) findViewById(R.id.carousel_layout);
        viewPager = (ViewPager) findViewById(R.id.carousel_view_page);
        carouselAdapter = new CarouselAdapter();
        carouselAdapter.setImageViews(photos, this);
        viewPager.setAdapter(carouselAdapter);
        getCircle();

    }

    //添加联动的圆点
    public void getCircle() {
        final int size = photos.length;//应该添加的小圆点数量
        imgCircles = new ImageView[size];//初始化放小圆点的集合
        for (int i = 0; i < imgCircles.length; i++) {
            ImageView iv = new ImageView(this);
            //设置小圆点的大小
            iv.setLayoutParams(new ViewGroup.LayoutParams(10, 10));
            //设置进去
            imgCircles[i] = iv;
            //设置默认第一个圆点为蓝色,其他为黑色
            if (i == 0) {
                imgCircles[i].setImageResource(R.mipmap.blue_view);
            } else {
                imgCircles[i].setImageResource(R.mipmap.black_view);
            }
            //设置放小圆点的线性布局的大小
            LinearLayout.LayoutParams layoutparams = new LinearLayout.LayoutParams(
                    new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                            ViewGroup.LayoutParams.WRAP_CONTENT));
            //圆点左右相距为10
            layoutparams.leftMargin = 10;
            layoutparams.rightMargin = 10;
            viewGroup.addView(iv, layoutparams);
        }
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /*
             onPageScrolled(int arg0,float arg1,int arg2),当页面在滑动的时候会调用此方法,
             在滑动被停止之前,此方法回一直得到调用。其中三个参数的含义分别为:
             arg0 :当前页面,及你点击滑动的页面
             arg1:当前页面偏移的百分比
             arg2:当前页面偏移的像素位置
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /*
            onPageSelected(int position):此方法是页面跳转完后得到调用,
            position是你当前选中的页面的Position(位置编号)
             */
            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i < size; i++) {
                    if (i == position % size) {
                        imgCircles[i].setImageResource(R.mipmap.blue_view);
                    } else {
                        imgCircles[i].setImageResource(R.mipmap.black_view);
                    }
                }

            }

            /*
            onPageScrollStateChanged(int arg0)   ,此方法是在状态改变的时候调用,其中arg0这个参数

            有三种状态(0,1,2)。arg0 ==1的时辰默示正在滑动,arg0==2的时辰默示滑动完毕了,arg0==0的时辰默示什么都没做。
             */
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        //当用户触摸轮播图的时候
                        userTouch = true;
                        break;
                    case MotionEvent.ACTION_UP:
                        //用户手离开手机
                        userTouch = false;
                        break;
                }

                return false;
            }
        });
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (threadAlive) {
                    //每隔3秒自动滑动一次
                    try {
                        Thread.sleep(3000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    if (!userTouch) {
                        handler.sendEmptyMessage(0);
                    }
                }
            }
        }).start();
        handler = new Handler(new Handler.Callback() {
            @Override
            public boolean handleMessage(Message msg) {
                //获取当前的位置,再将ViewPager刷新到下一页
                int current = viewPager.getCurrentItem();
                //刷新轮播
                viewPager.setCurrentItem(current + 1);
                return false;
            }
        });
    }

    //记得把线程杀死
    @Override
    protected void onDestroy() {
        super.onDestroy();
        threadAlive = false;
    }
}</span>

适配器
<span style="font-size:14px;">public class CarouselAdapter extends PagerAdapter {
    //PagerAdapter 的Item 是View
    private List<ImageView> imageViews;

    public void setImageViews(int[] photos, Context context) {
        imageViews = new ArrayList<>();
        for (int photo : photos) {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(photo);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageViews.add(imageView);
        }
        notifyDataSetChanged();
    }


    @Override
    public int getCount() {
        //设置成无上限的数量,可以无限的滑动
        return imageViews != null ? Integer.MAX_VALUE : 0;//返回Integer的最大值
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //取出指定位置的图片,对集合取余
        ImageView imageView = imageViews.get(position % imageViews.size());
        /*
        当图片少的时候,不会触发destroyItem
        这个时候去向container中addView会报错
        手动捕获这个异常
         */
        try {
            container.addView(imageView);
        } catch (IllegalStateException e) {
            container.removeView(imageView);//先移除
            container.addView(imageView);//然后添加进去
        }

        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        if (container.getChildAt(position % imageViews.size()) == object) {
            //销毁指定位置的ImageView,回收内存
            container.removeViewAt(position % imageViews.size());
        }
    }
}</span>

代码写到这啦,轮播图就Ok啦,注解写的挺详细的,我相信你们能看懂,代码写起来很随意,只要你讲道理。
demo下载地址https://github.com/liujingdong/CarouselImage.git




  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值