UI----实现京东首页轮播图

先看一下要实现的效果
就是红色框框的部分，注意他是可以左右滑动的，单纯就这一部分来说，第一页的实现就是GridView网格布局，5列，10个item，因为可以左右滑动，因此可以使用ViewPager实现，整体的就是使用GridView+ViewPager实现。

（1）ViewPager的配置

关键的是要通过适配器，填充内容，内容就是GridView；

–>首先知道ViewPager需要几页，根据图知道每页是10个item，一共是2页，那么就先将GridView装在List集合中。

给ViewPager设置适配器

ViewPager适配器的代码：

public class MyPagerAdapter extends PagerAdapter {
    private final Context context;
    private final List<GridView> gridViewList;

    public MyPagerAdapter(Context context, List<GridView> gridViewList){
        this.context = context;
        this.gridViewList = gridViewList;
    }
    @Override
    public int getCount() {
        return gridViewList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(gridViewList.get(position));
        return gridViewList.get(position);
    }

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

（2）给GridView设置适配器，显示数据
接下来重中之重，就是给GridView设置适配器
因为数据的总量肯定是超过1页的GridView的item总量，所以我们需要去分页加载，举个例子：

假设一共是32个数据，每页只显示10个数据，那么第0页（就是第1页，但是数组是从0开始）显示的数据就是,1-10，起始值是1，终点值是10；第2页起始值是11，终点至是20… 第 i 页起始值start是 i * item_num（每页的item数量），终点值是start + item_num；

所以在给GridView配置数据时，要分页处理数据，代码如下：

public class GridViewAdapter extends BaseAdapter {
    private  Context context;
    //第i页的数据集合
    private List<DataBean> list = new ArrayList<>();
    //每个GridView的最大item数
    private static final int item_num = 10;

    public GridViewAdapter(Context context, List<DataBean> gridList, int i){
        this.context = context;
        int start = i * item_num;
        int end = start + item_num;
        while((start < gridList.size()) && (start < end)){
            list.add(gridList.get(start));
            start++;
        }
    }
    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int i) {
        return list.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder viewHolder = null;
        if(view == null){
            view = LayoutInflater.from(viewGroup.getContext())
                    .inflate(R.layout.item_grid, viewGroup,false);
            viewHolder = new ViewHolder();
            viewHolder.iv_back = view.findViewById(R.id.iv_back);
            viewHolder.tv_text = view.findViewById(R.id.tv_text);
            view.setTag(viewHolder);
        }else{
           viewHolder = (ViewHolder) view.getTag();
        }
       viewHolder.tv_text.setText(list.get(i).getText());
       viewHolder.iv_back.setImageResource(list.get(i).getIcon());
        return view;
    }

    static class ViewHolder{
        ImageView iv_back;
        TextView tv_text;
    }
}

然后给GridView设置适配器

GridView的item布局如下，当然也可以自己new GridView（this），没有问题的。

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:numColumns="5">

</GridView>

运行之后，实现下面的布局（因为不能做gif，所以只能看到一个页面的布局，抱歉）。

一个基本的布局已经形成，接下来把京东轮播页面的资源加载进来，不就迎刃而解了吗！
之前创建的一个DataBean类，就是用来封装一个item显示的text文本以及图片资源的。

public class DataBean {
    private String text;
    private int icon;

    public DataBean(String text, int icon) {
        this.text = text;
        this.icon = icon;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }
}

那么现在需要的就是把京东轮播图的资源封装到DataBean中。

 for (int i = 0; i < ids.length; i++) {
            gridList.add(new DataBean(text[i],
                    ids[i]));
        }

因为自己这边没有后台的接口，所以只能自己手写数据，但是没问题，还是能实现基本的UI的。


使用ViewPager+GridView实现京东首页的轮播图的效果就实现了，包括单击事件，设置单击事件监听即可。