轮播图(ViewPager)用法

一.XML布局

下面的Liner是用来给小圆点的,其中先align再marin可以让这个布局自动就是再ViewPager的下方

<androidx.viewpager.widget.ViewPager
   android:id="@+id/starfrag_vp"
   android:layout_width="match_parent"
   android:layout_height="220dp"
  />
  <LinearLayout
    android:id="@+id/starfrag_layout"
    android:layout_width="match_parent"
    android:layout_height="10dp"    
    android:orientation="horizontal"
    android:layout_alignBottom="@id/starfrag_vp"
    android:layout_marginBottom="10dp"
    android:gravity="center_horizontal"/>

二.java代码

1.声明一个ViewPager对象

ViewPager starVp=getView.findViewById(R.id.xx)

2.声明一个int数组装本地图片

int[]imgIds={R.mipmap.bg,R.mipmap.bg1};

3.声明ViewPager和小圆点ivList的数据源

List<ImageView>ivList;
List<ImageView>poinList;

4.自定义一个initPager函数来将数据传到3的List中

    private void initPager(){
        LinearLayout pointLayout;
        ivList=new ArrayList<>();
        poinList=new ArrayList<>();
        for (int i = 0; i <imgIds.length ; i++) {
            //ImageView的构造器有多种,我们选择context的这种,用getContext来实例化
            ImageView iv = new ImageView(getContext());

            //设置iv对应的图片资源并且记得设置拉伸XY
            iv.setImageResource(imgIds[i]);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);

            //设置图片view的宽高,实例化一个LinearLayout.LayoutParams,选择和父类相同
            LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);

            //把设置的宽高设置进iv
            iv.setLayoutParams(lp);

            //将设置好的图片iv加载到集合当中
            ivList.add(iv);

    //小圆点的做法和上面基本一样-----------------------------------------------

            //创建图片对应的指示器小圆点
            ImageView piv = new ImageView(getContext());
            piv.setImageResource(R.mipmap.point_normal);
            LinearLayout.LayoutParams plp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            //设置以下margin值让小圆点有间隔
            plp.setMargins(20,0,0,0);
            piv.setLayoutParams(plp);
            //这步特别注意：要将小圆点添加到布局中,ViewPager是再适配器中addview
            pointLayout.addView(piv);
            //为了便于操作,将小圆点添加到统一管理的集合当中
            poinList.add(piv);
        }
    //---------------------------------------------------------------------    
        //默认第一个小圆点是获取焦点的状态
        poinList.get(0).setImageResource(R.mipmap.point_focus);
        //利用5中的构造方法,传入context和图片的list
        starPagerAdapter = new StarPagerAdapter(getContext(), ivList);
        //添加适配器
        starVp.setAdapter(starPagerAdapter);
    }

5.ViewPager的适配器

首先要新建一个类StarPagerAdapter继承PagerAdpter

第一个构造方法：要去拿一下图片资源(别忘了context)
第二个方法返回集合大小
第三个方法判断两次对象是不是同一个对象

对于第四和第五个方法：其中contain是ViewGroup的对象,,position返回当前图片位置

第四个方法是实例化item, 用imageView获取当前img,然后用addView加入到ViewPager的 布中最后返回imageView
第五个方法是销毁item,直接获取到当前的图片,然后用removeView(imageView)来销毁

    public class StarPagerAdapter extends PagerAdapter {
            Context context;
            List<ImageView>imgList;

    public StarPagerAdapter(Context context, List<ImageView> imgList) {
        this.context = context;
        this.imgList = imgList;
    }

    @Override
    public int getCount() {
        return imgList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view==object;//判断两次对象是不是一个对象
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView imageView = imgList.get(position);
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        ImageView imageView=imgList.get(position);
        container.removeView(imageView);
    }
}       

6.实现滑动图片原点跟着变化监听事件

里面用到的函数就硬背就行了,功能也好理解

    //设置ViewPager的监听器函数
    private void setVPListener() {
        starVp.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i <poinList.size() ; i++) {
                    poinList.get(i).setImageResource(R.mipmap.point_normal);
                }
                poinList.get(position).setImageResource(R.mipmap.point_focus);
            }
        });
    }

7.实现自动轮播效果(利用handler传递信息)

先在onCreate主函数中发送一条信息,重写一下Handler中的handleMessage方法,其中内部一定要注意再发送形成循环,对于一种状态,onCreat中只会发一次handler,所以在匿名方法内部要再发送信息形成循环

    handler.sendEmptyMessageDelayed(1,5000);  

    Handler handler=new Handler(){
        @Override
        public void handleMessage(@NonNull Message msg) {
                if(msg.what==1){
                    //获取当前ViewPager显示的页面(getCurrentItem是自带的方法)
                    int currentItem=starVp.getCurrentItem();
                    //判断是否为最后一张,如果是最后一张就回到第一张,否则显示最后一张
                    if (currentItem==ivList.size()-1) {
                        starVp.setCurrentItem(0);
                    }
                    else {
                        currentItem++;
                        starVp.setCurrentItem(currentItem);
                    }

                    //形成循环发送--接受消息的效果,在接受消息的同时也要进行信息发送
                    handler.sendEmptyMessageDelayed(1,5000);

                }
        }
    };