神刀安全网

Android 轮播图的实现

开始之前

这是我的第一篇简书博客, 自己也在其他的博客网站写过 例如: CSDN , 当然还有我自己的小站 鹿鹿的博客 里面的博客质量参差不齐, 而且有很多内容没有”自主”知识, 所以心里没有什么成就感. 自己是比较喜欢简书中的 “简”字, 推荐大家多多使用和交流, 我会不定期发自己的一些有关Android功能点的实现, 望大家多多关注. 好, 废话说得太多了, 开始我们今天的内容

环境准备

开发环境

  • Android Studio 2.2.1
  • JDK1.7
  • API 24
  • Gradle 2.2.1

开发开始

先上效果预览

Android 轮播图的实现
效果预览

案例分析

这个案例网上也很多, 质量参差不齐, 我也就根据自己的理解来分析分析需要实现的几个功能点:

  • 轮播图有n张图片和相对应的n个小圆点(指示器 indicator) 实现联动
  • 除了可以手动滑动外, 也可以自动滚动(轮播) 可以考虑使用Handler实现
  • 实现无限轮回滚动
  • 当手指按下图片后不再自动滚动

根据上述分析进行开发

接下来搭建布局

**activity_main.xml**  <?xml version="1.0" encoding="utf-8"?> <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"     tools:context="com.lulu.shufflingpicdemo.MainActivity">      <LinearLayout         android:orientation="vertical"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_centerHorizontal="true"         android:layout_marginBottom="275dp">         <FrameLayout              android:layout_width="match_parent"             android:layout_height="220dp">             <!--轮播图位置-->             <android.support.v4.view.ViewPager                 android:id="@+id/live_view_pager"                 android:layout_width="match_parent"                 android:layout_height="match_parent"/>             <!--右下角小圆点-->             <LinearLayout                 android:layout_marginRight="5dp"                 android:layout_gravity="bottom|right"                 android:id="@+id/live_indicator"                 android:orientation="horizontal"                 android:layout_width="wrap_content"                 android:layout_height="10dp"/>         </FrameLayout>     </LinearLayout> </RelativeLayout>

指示器 小点绘制文件

indicator_select.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="oval">     <size         android:width="20dp"         android:height="20dp"/>     <solid android:color="#c213b7"/> </shape>

indicator_no_select.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="oval">     <size         android:width="20dp"         android:height="20dp"/>     <solid android:color="#fff"/> </shape>

ViewPager的实现

MyPagerAdapter.java

public class MyPagerAdapter extends PagerAdapter {      public static final int MAX_SCROLL_VALUE = 10000;      private List<ImageView> mItems;     private Context mContext;     private LayoutInflater mInflater;      public MyPagerAdapter(List<ImageView> items, Context context) {         mContext = context;         mInflater = LayoutInflater.from(context);         mItems = items;     }      /**      * @param container      * @param position      * @return 对position进行求模操作      * 因为当用户向左滑时position可能出现负值,所以必须进行处理      */     @Override     public Object instantiateItem(ViewGroup container, int position) {         View ret = null;          //对ViewPager页号求摸取出View列表中要显示的项         position %= mItems.size();         Log.d("Adapter", "instantiateItem: position: " + position);         ret = mItems.get(position);         //如果View已经在之前添加到了一个父组件,则必须先remove,否则会抛出IllegalStateException。         ViewParent viewParent = ret.getParent();         if (viewParent != null) {             ViewGroup parent = (ViewGroup) viewParent;             parent.removeView(ret);         }         container.addView(ret);          return ret;     }     /**      * 由于我们在instantiateItem()方法中已经处理了remove的逻辑,      * 因此这里并不需要处理。实际上,实验表明这里如果加上了remove的调用,      * 则会出现ViewPager的内容为空的情况。      *      * @param container      * @param position      * @param object      */     @Override     public void destroyItem(ViewGroup container, int position, Object object) {         //警告:不要在这里调用removeView, 已经在instantiateItem中处理了     }       @Override     public int getCount() {         int ret = 0;         if (mItems.size() > 0) {             ret = MAX_SCROLL_VALUE;         }         return ret;     }      @Override     public boolean isViewFromObject(View view, Object object) {         return view == (View) object;     } }

Note: 一定不要在destroyItem中再调用removeView了, 因为咱们已经instantiateItem中做了处理

在MainActivity.java中给ViewPager设置Adapter

mItems = new ArrayList<>(); mViewPager.setAdapter(mAdapter);  addImageView(); mAdapter.notifyDataSetChanged();
private void addImageView(){     ImageView view0 = new ImageView(this);     view0.setImageResource(R.mipmap.pic0);     ImageView view1 = new ImageView(this);     view1.setImageResource(R.mipmap.pic1);     ImageView view2 = new ImageView(this);     view2.setImageResource(R.mipmap.pic2);      view0.setScaleType(ImageView.ScaleType.CENTER_CROP);     view1.setScaleType(ImageView.ScaleType.CENTER_CROP);     view2.setScaleType(ImageView.ScaleType.CENTER_CROP);      mItems.add(view0);     mItems.add(view1);     mItems.add(view2);  }

Note: 因为咱们做的是Demo, 所以我们传入的是一个ImageView的集合, 真正开发时, 需要传入含有图片url的实体类, 在Adapter中可以使用加载图片的类库加载

实现右下角指示器

添加指示器

在onCreate中添加

//获取指示器(下面三个小点) mBottomLiner = (LinearLayout) findViewById(R.id.live_indicator); //右下方小圆点 mBottomImages = new ImageView[mItems.size()]; for (int i = 0; i < mBottomImages.length; i++) {     ImageView imageView = new ImageView(this);     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);     params.setMargins(5, 0, 5, 0);     imageView.setLayoutParams(params);     //如果当前是第一个 设置为选中状态     if (i == 0) {         imageView.setImageResource(R.drawable.indicator_select);     } else {         imageView.setImageResource(R.drawable.indicator_no_select);     }     mBottomImages[i] = imageView;     //添加到父容器     mBottomLiner.addView(imageView); }

实现联动

添加ViewPager的监听事件, 实现ViewPager.OnPageChangeListener接口

mViewPager.addOnPageChangeListener(this);

回调事件

/////////////////////////////////////////////////////////////////////////// // ViewPager的监听事件 /////////////////////////////////////////////////////////////////////////// @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  }  @Override public void onPageSelected(int position) {      currentViewPagerItem = position;     if (mItems != null) {         position %= mBottomImages.length;         int total = mBottomImages.length;          for (int i = 0; i < total; i++) {             if (i == position) {                 mBottomImages[i].setImageResource(R.drawable.indicator_select);             } else {                 mBottomImages[i].setImageResource(R.drawable.indicator_no_select);             }         }     } }  @Override public void onPageScrollStateChanged(int state) {  }

实现自动滚动

在mBottomImages初始化之后 开启一个线程 进行定时发送一个空消息给Handler处理, 由Handler决定切换到下一页

//让其在最大值的中间开始滑动, 一定要在 mBottomImages初始化之前完成 int mid = MyPagerAdapter.MAX_SCROLL_VALUE / 2; mViewPager.setCurrentItem(mid); currentViewPagerItem = mid;  //定时发送消息 mThread = new Thread(){     @Override     public void run() {         super.run();         while (true) {             mHandler.sendEmptyMessage(0);             try {                 Thread.sleep(MainActivity.VIEW_PAGER_DELAY);             } catch (InterruptedException e) {                 e.printStackTrace();             }         }      } }; mThread.start();

自定义Handler

/////////////////////////////////////////////////////////////////////////// // 为防止内存泄漏, 声明自己的Handler并弱引用Activity /////////////////////////////////////////////////////////////////////////// private static class MyHandler extends Handler {     private WeakReference<MainActivity> mWeakReference;      public MyHandler(MainActivity activity) {         mWeakReference = new WeakReference<MainActivity>(activity);     }      @Override     public void handleMessage(Message msg) {         super.handleMessage(msg);         switch (msg.what) {             case 0:                 MainActivity activity = mWeakReference.get();                 if (activity.isAutoPlay) {                      activity.mViewPager.setCurrentItem(++activity.currentViewPagerItem);                 }                  break;         }      } }

Note: 其中isAutoPlay是一个用来判断当前是否是自动轮播的boolean值变量, 主要用于实现我们接下来说的 当手指按下图片后不再滚动

实现当手指按下图片后不再滚动

思路: 我们可以考虑对ViewPager的触摸事件进行监听, 然后设置一个上节说到的isAutoPlay的boolean变量用来让Handler判断是否进行轮播滚动

代码实现:

ViewPager设置监听

mViewPager.setOnTouchListener(this);

事件回调

@Override public boolean onTouch(View v, MotionEvent event) {     int action = event.getAction();     switch (action) {         case MotionEvent.ACTION_DOWN:             isAutoPlay = false;             break;         case MotionEvent.ACTION_UP:             isAutoPlay = true;             break;     }     return false; }

注: 细心的同学可能会看出来, 我们没有单独说 无限循环 如何实现, 其实, 它的实现已经隐藏在了代码中, 在这里我简单的说一下思路:
给ViewPager的条目个数设置个较大值, 该案例中为10000, 然后我们刚进入时选中的位置为 10000/2=5000, 也就是说我们可以向左或向右滑动约5000多张图片, 但这是不现实的, 所以就给用户造成了无限循环的假象

我把源码放在了github 上, 希望大家多多支持

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Android 轮播图的实现

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址