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

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

大概效果是这样：