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

上一篇已经说道了怎么通过请求网络获得的数据来更新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);
            }
        }