设置图片轮流滑动播放的效果——学习笔记

上一篇已经说道了怎么通过请求网络获得的数据来更新ListView的UI，这次是在上一次的基础上给ListView顶部加上一个轮播图的效果，同时完善更多的布局。
首先是关于ListView的设置，上次的ListView只在一个页面中，现在可以先创建多页ListView，然后把这些页面放入一个ViewPager中，然后结合TabLayout，这样就做成一个基本的左右滑动切换浏览新闻列表的效果。

上次Okhttp3的使用方式不完整，先说一下用okhttp去请求网络。
首先把以下方法放入一个HttpUtil类中，方便调用：

    //使用okhttp3    public static void sendOkHttpRequest(String url, okhttp3.Callback callback){        OkHttpClient client = new OkHttpClient();        okhttp3.Request request = new okhttp3.Request.Builder()                .url(url)                .build();        client.newCall(request).enqueue(callback);    }

然后使用okhttp请求网络的时候，只需要：

private void getDataByOkhttp(){        HttpUtil.sendOkHttpRequest(url, new Callback() {            @Override            public void onFailure(Call call, IOException e) {                LogUtil.e("使用okhttp失败~~~");            }            @Override            public void onResponse(Call call, okhttp3.Response response) throws IOException {                LogUtil.e("使用okhttp成功~~~当前线程是——" + Thread.currentThread().getName());                final String data = response.body().string();                //json数据类                final NewsTopBeanAuto bean = HttpUtil.parsedJsonWithGson(data);                String title = bean.getResult().getResult().getChannel();                MainActivity mainActivity = (MainActivity) context;                mainActivity.runOnUiThread(new Runnable() {                    @Override                    public void run() {                        processData(data);                    }                });                LogUtil.e("数据解析成功，标题是——" + title );            }        });    }

这是okhttp最基本的使用方式了，用这个结合Gson去获取新闻的列表，把Gson解析数据方法也放在HttpUtil中：

    //使用Gson解析数据    public static NewsTopBeanAuto parsedJsonWithGson(String json) {//        Gson gson = new Gson();//        NewsTopBean bean = gson.fromJson(json, NewsTopBean.class);        return new Gson().fromJson(json, NewsTopBeanAuto.class);    }

也是最基本的用法。
然后在ListView所在的页面去请求数据，在上一篇中可以看到ListView的效果，每一行数据之间有两条分隔线，这时候只需要添加一个android:divider=”@null”属性即可，下面是ListView的布局listview_detailpager.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <ListView        android:id="@+id/listview"        android:divider="@null"        android:cacheColorHint="@android:color/transparent"        android:layout_width="match_parent"        android:layout_height="wrap_content"/></LinearLayout>

这条属性添加后ListView列表是这样的：

ListView布局就是这样，然后需要给它添加顶部轮播图片的布局，我在一个app中（应该有人看得出来是啥子app）找了一个基本上差不多的布局效果，就是下面这样：

布局里面有图片，文字，轮播时候切换的小原点。其实整个布局还算简单，小圆点是放在一个水平的LinearLayout中的，然后文字和这个LinearLayout可以放在一个相对布局中，然后就是所有轮播的图片放在一个ViewPager中，这个ViewPager和上面的相对布局又放在一个相对布局里面，下面就是具体的布局——top_news.xml:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="200dp">    <android.support.v4.view.ViewPager        android:id="@+id/top_news_viewpager"        android:layout_width="match_parent"        android:layout_height="200dp"/>    <RelativeLayout        android:padding="5dp"        android:background="#44000000"        android:layout_alignParentBottom="true"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <TextView            android:id="@+id/top_news_title"            android:text="敲代码的日常"            android:layout_marginLeft="8dp"            android:layout_centerVertical="true"            android:textColor="@android:color/white"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>        <LinearLayout            android:id="@+id/top_point_group"            android:orientation="horizontal"            android:layout_marginRight="8dp"            android:layout_centerVertical="true"            android:layout_alignParentRight="true"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>    </RelativeLayout></RelativeLayout>

这个布局创建完成后，只需要通过ListView的addHeaderView方法，即可把这个轮播图以头布局的方式添加到ListView上面。
差不多是这样一个效果：

现在当然是没有图片的，这个时候可以在轮播图所在ViewPager适配器中，去加载图片，使用Glide结合Okhttp去加载图片，首先添加依赖：

compile 'com.github.bumptech.glide:glide:3.7.0'compile 'com.android.support:support-v4:25.3.1'

然后在适配器的初始化视图方法instantiateItem里面使用Glide：

            ImageView imageView = new ImageView(context);            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            Glide.with(context)                    .load(listBeen.get(position).pic) //加载网络图片的地址                    .error(R.drawable.huaji1)  //没网时候加载这个                    .into(imageView);            container.addView(imageView);            return imageView;

大概效果是这样：

这就是一个页面的布局，接下来先不去完善轮播图的布局，先把多个这样的页面放在ViewPager中结合TabLayout去显示，把这些页面显示在一个NewsPager中去，下面是NewsPager的布局newsdetail_pager.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <android.support.design.widget.TabLayout            android:id="@+id/news_tablayout"            android:layout_width="0dp"            style="@style/MyCustomTabLayout"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_weight="1"/>        <ImageButton            android:id="@+id/ib_tab_next"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="8dp"            android:background="@android:color/transparent"            android:padding="5dp"            android:src="@drawable/news_cate_arr"/>    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/newsdetail_viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"/></LinearLayout>

很明显，要把之前的页面全部添加的上面的ViewPager中去，下面是集合了ListView和轮播图页面NewsDetailPager.class的代码:

public class NewsDetailPager {    private final Context context;    private final String url;    private ListView listView; //新闻列表    public View rootView;    private TextView top_news_title; // 顶部轮播图标题    private LinearLayout top_point_group; //顶部轮播图滑动的小点    private ViewPager top_news_viewpager; //顶部轮播图的图片    public NewsDetailPager(Context context, String url) {        this.context = context;        this.url = url;        rootView = initView();    }    public View initView() {        View view = View.inflate(context, R.layout.listview_detailpager, null);        listView = (ListView) view.findViewById(R.id.listview);        View topNewsView = View.inflate(context, R.layout.top_news, null);        top_news_viewpager = (ViewPager) topNewsView.findViewById(R.id.top_news_viewpager);        top_news_title = (TextView) topNewsView.findViewById(R.id.top_news_title);        top_point_group = (LinearLayout) topNewsView.findViewById(R.id.top_point_group);        //把顶部轮播图部分视图，以头的方式添加ListView中        listView.addHeaderView(topNewsView);        return view;    }    public void initData() throws JSONException {        LogUtil.e("页面数据被初始化——");        String saveJson = CacheUtils.getString(context, url);        if (!TextUtils.isEmpty(saveJson)){            processData(saveJson);        }        getDataByOkhttp();    }    public void getDateByVolley(){        RequestQueue queue = Volley.newRequestQueue(context);        queue.add(getDataFromNetByVolley());    }    private void processData(String json) {        final NewsTopBeanAuto bean = HttpUtil.parsedJsonWithGson(json);        String title = bean.getResult().getResult().getChannel();        List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen = bean.getResult().getResult().getList();        LogUtil.e("解析Json数据成功----title2----：" + title);        listView.setAdapter(new MyListViewAdapter(listBeen));        top_news_viewpager.setAdapter(new MyTopViewPagerAdapter(listBeen));    }    private void getDataByOkhttp(){        HttpUtil.sendOkHttpRequest(url, new Callback() {            @Override            public void onFailure(Call call, IOException e) {                LogUtil.e("使用okhttp失败~~~");            }            @Override            public void onResponse(Call call, okhttp3.Response response) throws IOException {                LogUtil.e("使用okhttp成功~~~当前线程是——" + Thread.currentThread().getName());                final String data = response.body().string();                final NewsTopBeanAuto bean = HttpUtil.parsedJsonWithGson(data);                String title = bean.getResult().getResult().getChannel();                MainActivity mainActivity = (MainActivity) context;                mainActivity.runOnUiThread(new Runnable() {                    @Override                    public void run() {                        processData(data);                    }                });                LogUtil.e("数据解析成功，标题是——" + title );            }        });    }    //ListView的适配器    private class MyListViewAdapter extends BaseAdapter {        List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen;        public MyListViewAdapter(List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen) {            this.listBeen = listBeen;        }        @Override        public int getCount() {            return listBeen.size();        }        @Override        public Object getItem(int position) {            return null;        }        @Override        public long getItemId(int position) {            return 0;        }        @Override        public View getView(int position, View convertView, ViewGroup parent) {            ViewHolder viewHolder;            if (convertView == null){                convertView = View.inflate(context, R.layout.listview_detail, null);                viewHolder = new ViewHolder();                viewHolder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);                viewHolder.tv_time = (TextView) convertView.findViewById(R.id.tv_time);                convertView.setTag(viewHolder);            } else {                viewHolder = (ViewHolder) convertView.getTag();            }            String data1 = listBeen.get(position).getTitle();            String data2 = listBeen.get(position).getTime();            viewHolder.tv_title.setText(data1);            viewHolder.tv_time.setText(data2);            LogUtil.e("内容是——" + data1 + data2);            return convertView;        }    }    public class ViewHolder {        TextView tv_title;        TextView tv_time;    }    private class MyTopViewPagerAdapter extends PagerAdapter {        List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen;        public MyTopViewPagerAdapter(List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen) {            this.listBeen = listBeen;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            ImageView imageView = new ImageView(context);            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);            Glide.with(context)                    .load(listBeen.get(position).pic) //加载网络图片的地址                    .error(R.drawable.huaji1)  //没网时候加载这个                    .into(imageView);            container.addView(imageView);            return imageView;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }        @Override        public int getCount() {            return 3;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }    }}

这之后就是NewsPager.class的代码：

public class NewsPager extends  BasePager{    private ArrayList<NewsDetailPager> newsDetailPagers;    private ViewPager viewPager;    private TabLayout tabLayout;    private ImageButton ib_tab_next;    public NewsPager(Context context) {        super(context);    }    public View initThisView() {        base_content_fl.removeAllViews();        View view = View.inflate(context, R.layout.newsdetail_pager, null);        viewPager = (ViewPager)view.findViewById(R.id.newsdetail_viewpager);        tabLayout = (TabLayout) view.findViewById(R.id.news_tablayout);        base_content_fl.addView(view);        ib_tab_next = (ImageButton) view.findViewById(R.id.ib_tab_next);        ib_tab_next.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);            }        });        return base_content_fl;    }    @Override    public void initData() {        super.initData();        LogUtil.e("新闻页面数据被初始化——");        initThisView();        title_text.setText("新闻");        LogUtil.e("当前主线程是——" + Thread.currentThread().getName());        getNewsPagers();    }    public void getNewsPagers(){        newsDetailPagers = new ArrayList<>();        for (int i = 0 ; i < Constants.all_urls.length; i++){            newsDetailPagers.add(new NewsDetailPager(context, Constants.all_urls[i]));        }        viewPager.setAdapter(new MyViewAdapter());        tabLayout.setupWithViewPager(viewPager);        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);    }    private class MyViewAdapter extends PagerAdapter {        @Override        public CharSequence getPageTitle(int position) {            if(!TextUtils.isEmpty( CacheUtils.getString(context, Constants.all_urls[position]))){                String json = CacheUtils.getString(context, Constants.all_urls[position]);                NewsTopBeanAuto beanAuto = HttpUtil.parsedJsonWithGson(json);                String title = beanAuto.getResult().getResult().getChannel();                return title;            } else {                return Constants.all_titles[position];            }        }        @Override        public int getCount() {            return newsDetailPagers.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            NewsDetailPager newsDetailPager = newsDetailPagers.get(position);            View rootView = null;            try {                rootView = newsDetailPager.rootView;                newsDetailPager.initData();                container.addView(rootView);            } catch (JSONException e) {                e.printStackTrace();            }            return rootView;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }    private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            if (position == 0){                //slidingMenu可以全屏滑动                isEnableSlidingMenu(SlidingMenu.TOUCHMODE_FULLSCREEN);            } else {                //slidingMenu不可以滑动                isEnableSlidingMenu(SlidingMenu.TOUCHMODE_NONE);            }        }        @Override        public void onPageScrollStateChanged(int state) {        }    }    //根据传入的参数设置SlidingMenu能否滑动的方法    private void isEnableSlidingMenu(int touchMode) {        MainActivity mainActivity = (MainActivity) context;        mainActivity.getSlidingMenu().setTouchModeAbove(touchMode);    }}

其中，将TabLayout和ViewPager绑定在一起使用方法 tabLayout.setupWithViewPager(viewPager);
然后需要给ViewPager添加一个页面监听，设置了当不处于第一页新闻的时候，取消掉SlidingMenu的滑动效果，这样就消去了一个冲突。效果就是下面这个样子的：

不过这个时候，还有一些东西没有设置完，比如小圆点还没有设置，而且还有一个问题就是在第一个页面的时候，右滑图片会直接出现SlidingMenu的左侧菜单。

首先，先设置滑动图片对应的小圆点，其实之前的文章中，设置导航页面的时候已经写过如何设置小圆点了，上次是通过Shape属性设置的点，这次可以直接使用图片，效果是差不多的，步骤就是在上面的LinearLayout布局中创建ImageView，然后添加进去：

//设置移动的小红点    private void addPoint() {        top_point_group.removeAllViews();//由于processData要执行两次，所以要添加一个移除红点的方法，否则红点的数量会是原来的两倍        for (int i = 0; i< 4; i++){            ImageView imageView = new ImageView(context);            imageView.setBackgroundResource(R.drawable.topnews_point_selector);//设置背景选择器            //设置点的大小            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(DensityUtils.dip2px(context, 5), DensityUtils.dip2px(context, 5));            //默认第一个点为红色            if (i == 0){                imageView.setEnabled(true);            } else {                imageView.setEnabled(false);                params.leftMargin = DensityUtils.dip2px(context, 8);            }            imageView.setLayoutParams(params);            top_point_group.addView(imageView);        }    }

小圆点的布局topnews_point_selector.xml是：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="false" android:drawable="@drawable/dot_normal"/>    <item android:state_enabled="true" android:drawable="@drawable/dot_focus"/></selector>

上面是使用的两张很小的图片设置的，效果就是下面这样：

不过这时候红点还是不能动的，这时候就需要监听顶部轮播图片的ViewPager的页面，然后去更改红点的位置，在此之前需要先设置一个prePosition = 0，表示点的默认位置，然后用以下方法去设置红点：

top_news_viewpager.addOnPageChangeListener(new MyTopViewOnPageChangeListener(listBeen));//监听顶部轮播图片的滑动，然后改变红点的位置top_news_title.setText(listBeen.get(prePosition).getTitle());//设置默认第一个点的标题

下面是页面的监听：

private class MyTopViewOnPageChangeListener implements ViewPager.OnPageChangeListener {        List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen;        public MyTopViewOnPageChangeListener(List<NewsTopBeanAuto.ResultBeanX.ResultBean.ListBean> listBeen) {            this.listBeen = listBeen;        }        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            //设置图片对应的标题            top_news_title.setText(listBeen.get(position).getTitle());            //将之前的点变为白色            top_point_group.getChildAt(prePosition).setEnabled(false);            //当前点设为红色            top_point_group.getChildAt(position).setEnabled(true);            //把之前点的位置设置为现在点的位置            prePosition = position;        }        @Override        public void onPageScrollStateChanged(int state) {        }    }

然后看一下效果：

这时候有一个bug，第一页有时候会出现两个红点，比如下面这样：

其实这个问题很好解决，只需要在请求联网的时候，把之前的prePosition设置为0，就不会出现该bug了。

接着给下面的新闻列表也加上图片，只要在listview_detail布局中添加一个ImageView然后把文字列表所在的LinearLayout放在它的右边或者左边即可，然后在ListView的适配器里面加载图片和文字就行。下面是更改的布局部分：

<ImageView        android:id="@+id/iv_icon"        android:layout_alignParentRight="true"        android:scaleType="centerInside"        android:layout_marginLeft="8dp"        android:layout_centerVertical="true"        android:src="@drawable/huaji1"        android:layout_width="90dp"        android:layout_height="90dp"/>        <LinearLayout android:layout_centerVertical="true"                      android:layout_alignParentLeft="true"                      android:layout_marginLeft="5dp"                      android:layout_toLeftOf="@+id/iv_icon"                      android:orientation="vertical"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content">            <TextView                android:id="@+id/tv_title"                android:text="为什么这么难找bug呢"                android:lines="2"                android:textSize="16sp"                android:textColor="@android:color/black"                android:layout_width="wrap_content"                android:layout_height="wrap_content"/>            <TextView                android:layout_marginTop="8dp"                android:id="@+id/tv_time"                android:text="2017-10-14"                android:textSize="14sp"                android:textColor="#44000000"                android:layout_width="wrap_content"                android:layout_height="wrap_content"/>        </LinearLayout>

然后是更改后的效果：

下面来说一下为什么在【头条】页面，右滑图片会直接把SlidingMenu的左侧菜单滑出来。

其实这就是滑动冲突的后果。在这里，SlidingMenu作为一个顶层的布局，把我们的滑动事件给拦截了，也就是说滑动事件无法传到顶部图片所在的ViewPager中去，其实这个问题也好解决。

我们只需要重写一个类继承ViewPager，然后重写它的dispatchTouchEvent（）方法，在这个方法里面去阻止父布局拦截滑动事件即可，和前几篇里面使用RadioButton处理方法差不多。
写一个HorizontalScrollViewPager.class继承ViewPager：

public class HorizontalScrollViewPager extends ViewPager {    public HorizontalScrollViewPager(Context context) {        super(context);    }    public HorizontalScrollViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    public boolean dispatchTouchEvent(MotionEvent ev) {        getParent().requestDisallowInterceptTouchEvent(true);//把事件都传给当前控件        return super.dispatchTouchEvent(ev);    }}

然后把之前声明顶部轮播图片的ViewPager替换成HorizontalScrollViewPager，同时把布局里面轮播图所在的ViewPager也替换掉即可。

private HorizontalScrollViewPager top_news_viewpager; //顶部轮播图的图片top_news_viewpager = (HorizontalScrollViewPager) topNewsView.findViewById(R.id.top_news_viewpager);<com.example.administrator.simpleapp.pager.HorizontalScrollViewPager        android:id="@+id/top_news_viewpager"        android:layout_width="match_parent"        android:layout_height="200dp"/>

然后看一下效果

这时候滑动图片就不会再调出左侧菜单了，不过之前滑动图片是可以切换新闻页面的，但是现在却不可以了，所以还可以完善一下。只需要设置，在图片滑到第一个和最后一个的时候，把上面的

getParent().requestDisallowInterceptTouchEvent(true)属性换成false就ok了，但是需要注意的一点是，在第一个【头条】页面，如果也是这样设置的话，那在滑倒最后一张图片的时候右滑，就又会调出左侧菜单了，所以这时候不仅仅要判断图片是否是最后一个，还需要判断滑动的方向。

下面就是修改后的代码：

    private float startX; //起始的X坐标    private float startY; //起始的Y坐标    @Override    public boolean dispatchTouchEvent(MotionEvent ev) {        switch (ev.getAction()){            case MotionEvent.ACTION_DOWN:   //手指按下的时候                getParent().requestDisallowInterceptTouchEvent(true);//把事件都传给当前控件                startX = ev.getX(); //记录起始的X坐标                startY = ev.getY();//记录起始的Y坐标                break;            case MotionEvent.ACTION_MOVE:  //手指移动的时候                float endX = ev.getX(); //当前位置的X坐标                float endY = ev.getY(); //当前位置的Y坐标                //计算偏移量,然后根据在X轴、Y轴上谁的偏移量更大以及为正数或负数，从而确定是水平的左右滑还是竖直的上下滑                float distanceX = endX - startX;                float distanceY = endY - startY;                if (Math.abs(distanceX) > Math.abs(distanceY)){                    //水平方向滑动                    //当滑动到ViewPager的第0个页面，并且是从左到右滑动                    if (getCurrentItem() == 0 && distanceX > 0){                        getParent().requestDisallowInterceptTouchEvent(false);                    }                    //当滑动到ViewPager的最后一个页面，并且是从右到左滑动                    else if ((getCurrentItem() == (getAdapter().getCount() - 1)) && distanceX < 0){                        getParent().requestDisallowInterceptTouchEvent(false);                    }                    //其他                    else{                        getParent().requestDisallowInterceptTouchEvent(true);                    }                } else {                    //竖直方向滑动                    getParent().requestDisallowInterceptTouchEvent(false);                }                break;            case MotionEvent.ACTION_UP:                break;            default:                break;        }        return super.dispatchTouchEvent(ev);    }

然后是修改后的效果

然后，是如何让图片实现自动轮流播放的效果，可以通过Handler去实现：

    private InternalHandler internalHandler;    class InternalHandler extends Handler {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            //切换ViewPager的下一个页面            int item = (top_news_viewpager.getCurrentItem() + 1) % 4;//取余            top_news_viewpager.setCurrentItem(item);            internalHandler.postDelayed(new MyRunnable(), 4000);        }    }    class MyRunnable implements Runnable{        @Override        public void run() {            internalHandler.sendEmptyMessage(0);        }    }

然后在processData()中添加：

        //是把消息队列所有的消息和回调移除        internalHandler.removeCallbacksAndMessages(null);        internalHandler.postDelayed(new MyRunnable(), 4000);

不过如果这时候图片是一直在循环，无法停止的，如果想通过手指按住图片，不让图片滑动，就需要对图片的触摸事件监听，于是在顶部轮播图的ViewPager中对imageView进行监听：

imageView.setOnTouchListener(new View.OnTouchListener() {                @Override                public boolean onTouch(View v, MotionEvent event) {                    switch (event.getAction()){                        case MotionEvent.ACTION_DOWN:                            LogUtils.e("按下");                            //是把消息队列所有的消息和回调移除                            internalHandler.removeCallbacksAndMessages(null);                            break;                        case MotionEvent.ACTION_UP:                            LogUtils.e("离开");                            //是把消息队列所有的消息和回调移除                            internalHandler.removeCallbacksAndMessages(null);                            internalHandler.postDelayed(new MyRunnable(), 4000);                            break;//                        case MotionEvent.ACTION_CANCEL://                            LogUtils.e("取消");//                            //是把消息队列所有的消息和回调移除//                            internalHandler.removeCallbacksAndMessages(null);//                            internalHandler.postDelayed(new MyRunnable(), 4000);//                            break;                        default:                    }                    return true;                }            });

然后为了更加完善上面的效果，还可以在监听图片滑动的适配器中，对onPageScrollStateChanged进行补充：

private boolean isDragging = false;        @Override        public void onPageScrollStateChanged(int state) {            if (state == ViewPager.SCROLL_STATE_DRAGGING){ //拖拽状态                isDragging = true;                //拖拽的时候要移除消息                internalHandler.removeCallbacksAndMessages(null);            } else if (state == ViewPager.SCROLL_STATE_SETTLING && isDragging){ //惯性状态                //发消息                isDragging = false;                internalHandler.removeCallbacksAndMessages(null);                internalHandler.postDelayed(new MyRunnable(), 4000);            } else if (state == ViewPager.SCROLL_STATE_IDLE && isDragging){//禁止状态                isDragging = false;                internalHandler.removeCallbacksAndMessages(null);                internalHandler.postDelayed(new MyRunnable(), 4000);            }        }