轮播图封装使用

最新推荐文章于 2022-10-11 16:43:02 发布

原创最新推荐文章于 2022-10-11 16:43:02 发布 · 758 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android #轮播图 #封装

本文详细介绍了一款自定义轮播图控件的实现过程，包括核心代码、XML配置及Java文件示例。该控件支持无限轮播、自动播放等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图是我们开发过程中基本都会用到的，而为了方便使用我已经把它封装成一个自定义控件。方便大家使用和参考。

1，首先是轮播图的封装

public class AutoScrollViewPager extends ViewPager {
   private int pos;   //用于图片的点击事件
   

   // .xml
   public AutoScrollViewPager(Context context, AttributeSet attrs) {
      super(context, attrs);
//    imageCache = new ImageCache(getContext());
      view=new SimpleDraweeView(getContext());
   }

   // 暴露添加图片地址的方法
// private ImageCache imageCache = null;


   //这个Fresco是facebook推出的一款强大的android图片处理库，SimpleDraweeView是它的一个API,
   //如果不会使用可查看我另外一篇关于Fresco的介绍，也可以自行去百度寻找，或者如果不想使用可以改为ImageView，单下面需要修改。
   SimpleDraweeView view;

   private List<String> imgurls = new ArrayList<String>();

   public void setImgurls(List<String> imgurls) {
      this.imgurls = imgurls;
   }

   // 暴露添加标题的方法
   private List<String> titles = null;
   private TextView titleView;

   public void setTitles(List<String> titles, TextView titleView) {
      this.titles = titles;
      this.titleView = titleView;
      this.titleView.setText(titles.get(0));
   }

   private int pageCount = 2;
   // 支持无限滑动
   private boolean isLooping = false;

   public void setLooping(boolean flag) {
      isLooping = flag;
   }

   private Handler handler = new Handler() {
      // 回调函数: 1.重写 2.系统或其它对象调用
      // on
      public void handleMessage(Message msg) {
         if (msg.what == 1) {
            Log.i("wzx", "切换到下一页");
            // 切换到下一页
            int curr = getCurrentItem();
            ++curr;
            setCurrentItem(curr);// 显示指定页面
            // 重写给自己发一个消息
            // Message msg=new Message();
            Message msg2 = handler.obtainMessage();// obtain=get 是一种优化写法
            // 内部查找可重用的Message 如果有就重用 没有呢 才创建新的。
            msg2.what = 1;
            handler.sendMessageDelayed(msg2, 3000);// ---->handleMessage
            // 循环发送息
         }
      };
   };

   // 支持自动播放
   // 暴露给外面调用。
   public void startScroll() {
      // 3000
      // Message msg=new Message();
      Message msg = handler.obtainMessage();// obtain=get 是一种优化写法
      // 内部查找可重用的Message 如果有就重用 没有呢 才创建新的。
      msg.what = 1;
      handler.sendMessageDelayed(msg, 3000);// ---->handleMessage

   }

   /**
    * 停止播放
    */
   public void stopScroll() {
      // 清除所有消息 handleMessage就不能执行
      // 使用回调函数没有条件满足
      handler.removeCallbacksAndMessages(null);//

   }

   // 选择器:selector 管理素材的对象 根据 不同的状态显示不同的图片 press
   // select=true false
   // view.setSlected()
   private List<ImageView> dots = new ArrayList<ImageView>();

   public void init(int pageNumber, LinearLayout layoutDot) {
      // 3
      pageCount = pageNumber;
      // .xml
      // .java
      for (int i = 0; i < pageNumber; i++) {
         ImageView img = new ImageView(getContext());
         //dot_selector是小红点图片选择
         img.setBackgroundResource(dot_selector);
         img.setSelected(false);// 红
         // .xml layout_width layout_height
         // .java LinearLayout.LayoutParams 布局参数
         LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(//
               14, 14);
         // .xml marginRight
         // .java rightMargin
         p.rightMargin = 18;
         layoutDot.addView(img, p);
         dots.add(img);
      }
      dots.get(0).setSelected(true);
      // 设置内容
      PagerAdapter adpater = new ImageViewAdapter();
      this.setAdapter(adpater);// PageAdpater FragmentPageAdapter

      // ④　添加监听OnPageChangedListener
      // ⑤　自动滚动保持点的同步
      // ⑥　手动滚动时 停止滚动
      OnPageChangeListener listener = new MyOnPageChangeListener();
      this.setOnPageChangeListener(listener);// OnPageChangeListener监听滑动到第几页
   }

   private class MyOnPageChangeListener implements OnPageChangeListener {
      @Override
      public void onPageScrollStateChanged(int arg0) {

      }

      @Override
      public void onPageScrolled(int arg0, float arg1, int arg2) {

      }

      // 滑动第几页面
      @Override
      public void onPageSelected(int arg0) {


         dots.get(currPageIndex % pageCount).setSelected(false);
         // 新点高亮
         currPageIndex = arg0;
         dots.get(currPageIndex % pageCount).setSelected(true);
         if (titleView != null && titles != null) {
            titleView.setText(titles.get(currPageIndex % pageCount));
         }

      }

   }

   private int currPageIndex = 0;

   private class ImageViewAdapter extends PagerAdapter {

      // 页数
      @Override
      public int getCount() {
         if (isLooping) {
            return Integer.MAX_VALUE;
         } else {
            return pageCount;
         }
      }

      @Override
      public boolean isViewFromObject(View arg0, Object arg1) {
         return arg0 == arg1;
      }

      // 当前显示视图
      @Override
      public Object instantiateItem(ViewGroup container, int position) {
         // 创建显示的页面 是一张图片
         SimpleDraweeView imag = new SimpleDraweeView(getContext());

         imag.setScaleType(ScaleType.CENTER_CROP);
//
         LayoutParams p = new LayoutParams();
         p.width = LayoutParams.MATCH_PARENT;
         p.height = LayoutParams.MATCH_PARENT;
         container.addView(imag, p);
         if (imgurls != null&&imgurls.size()>0) {

            Uri uri =Uri.parse(imgurls.get(position%pageCount));
            imag.setImageURI(uri);

//
         }

         OnTouchListener listener = new MyOnTouchListener();
         imag.setOnTouchListener(listener);
         return imag;
      }

      private class MyOnTouchListener implements OnTouchListener {

         private int downX = 0;
         private long downTime = 0;


         @Override
         public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {// 获取动作
            case MotionEvent.ACTION_DOWN:// 按下
               stopScroll();
               downX = (int) event.getX();// 获取按下位
               downTime = System.currentTimeMillis();// 保存按下时间
               Log.i("wzx", "ACTION_DOWN");
               break;
            case MotionEvent.ACTION_MOVE:// 移动
               Log.i("wzx", "ACTION_MOVE");
               break;
            case MotionEvent.ACTION_UP:// 提起
               Log.i("wzx", "ACTION_UP");
               int upX = (int) event.getX();
               if (downX == upX && System.currentTimeMillis() - downTime < 300) {


                  if (listener != null) {
                     listener.onItemClick(pos % pageCount);// 方法内部的代码
                  }
               }
               startScroll();
               break;
            case MotionEvent.ACTION_CANCEL:// 取消

               startScroll();
               break;
            }
            return true;// 返回值 处理这个事件就返回true
         }

      }

      // 移除显示

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

   }

   public static interface OnViewItemClickListener {
      // 使用Command设计模式 可以增加一个接口作监听器
      // 1.创建interface
      // 2.抽象方法 (抽取代码 去掉方法体)
      public void onItemClick(int i);
      // 3.添加监听器
      // 4.监听器是要被调用。
      // 让开发者把代码写监听器里（控件外边）
   }

   private OnViewItemClickListener listener;

   public void setOnViewItemClickListener(OnViewItemClickListener listener) {
      this.listener = listener;
   }


}

（上面的内容可以直接复制粘贴即可使用，当然会有报错，但我都已经注释好了，如果还是解决不了可以加我QQ406176962进行讨论）

	2，XML文件的书写

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>
    <!--AutoScrollViewPager是封装好的轮播viewpager-->
    <comr.example.administrator.dome.AutoScroll.AutoScrollViewPager
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/asvp"
        >

    </comr.example.administrator.dome.AutoScroll.AutoScrollViewPager>

    <!--LinearLayout是为了小红点的父控件-->
    <LinearLayout
        android:orientation="horizontal"
      android:layout_alignBottom="@id/asvp"
       android:layout_marginBottom="20dp"
       android:layout_centerHorizontal="true"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:id="@+id/dot_ll"
        >

   </LinearLayout>
</RelativeLayout>

（一样可以只直接复制粘贴使用）

		3，Java文件的书写


public class MainActivity extends AppCompatActivity {
    private AutoScrollViewPager mAutoScrollViewPager;
    private LinearLayout mDotLayout;
    //list为图片地址的集合
    private List<String>list=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().hide();
        mAutoScrollViewPager=(AutoScrollViewPager)findViewById(R.id.asvp);
        mDotLayout=(LinearLayout)findViewById(R.id.dot_ll);

        //添加图片地址
        list.add("http://pic.51yuansu.com/pic/cover/00/12/02/578104aea3b47_610.jpg");
        list.add("http://pic.51yuansu.com/pic/cover/00/09/45/577dca5e5e80c_610.jpg");
        list.add("http://pic.51yuansu.com/pic/cover/00/11/52/5780f207c8947_610.jpg");
        list.add("http://pic.51yuansu.com/pic/cover/00/09/31/577dc57d77e21_610.jpg");

        //首先先把图片地址集合设置
        mAutoScrollViewPager.setImgurls(list);
        //设置是否要无线轮播
        mAutoScrollViewPager.setLooping(true);
        //设置小红点的个数和他的父控件LinearLayout
        mAutoScrollViewPager.init(list.size(),mDotLayout);
        //设置开始轮播
        mAutoScrollViewPager.startScroll();

    }
}

（一样可以只直接复制粘贴使用，注释也是已经非常明确了，
如果有什么决解不了的BUG，可以直接留言或联系我。）