Banner+Viewpager+GridView实现首页简单布局

如标题所示，实现首页自动轮播的广告页和广告页下面对功能一个分类左右滑动的效果

权限AndroidManifest.xml：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

依赖build.gradle

compile 'com.android.support:appcompat-v7:24.+'
testCompile 'junit:junit:4.12'
compile 'com.youth.banner:banner:+'
compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
compile 'com.squareup.picasso:picasso:2.5.1'

主布局文件activity_main.xml

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.shibozheng.viewpagergridview.MainActivity">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:id="@+id/points"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"

            android:gravity="center_horizontal"
            android:orientation="horizontal" />
    </RelativeLayout>
</LinearLayout>

gridview_item.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="4">

</GridView>

item_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:padding="4dp">

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="4dp"
        android:textColor="#ff0000"/>
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {

    private ViewPager viewPager;
    private LinearLayout group;//圆点指示器
    private ImageView[] ivPoints;//小圆点图片的集合
    private int totalPage; //总的页数
    private int mPageSize = 8; //每页显示的最大的数量
    private List<ProductBean> listDatas;//总的数据源
    private List<View> viewPagerList;//GridView作为一个View对象添加到ViewPager集合中
    //private int currentPage;//当前页
    private String[] proName = {"名称0", "名称1", "名称2", "名称3", "名称4", "名称5",
            "名称6", "名称7", "名称8", "名称9", "名称10", "名称11", "名称12", "名称13",
            "名称14", "名称15", "名称16", "名称17", "名称18", "名称19"};

    private String[] imageUrls = {"http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg",
            "http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg",
            "http://pic18.nipic.com/20111215/577405_080531548148_2.jpg",
            "http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg",
            "http://pic.58pic.com/58pic/12/64/27/55U58PICrdX.jpg"};

    private Banner mBanner;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        initView();
        //添加业务逻辑
        initData();
    }

    private void initView() {
        // TODO Auto-generated method stub
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        group = (LinearLayout) findViewById(R.id.points);
        mBanner = (Banner) findViewById(R.id.banner);
        mBanner.setImageLoader(new GlideImageLoader());
        mBanner.setImages(Arrays.asList(imageUrls));
        mBanner.start();
        Log.d("zhengshibo", "initView: start1111111111");
        listDatas = new ArrayList<ProductBean>();
        for (int i = 0; i < proName.length; i++) {
            listDatas.add(new ProductBean(proName[i], R.drawable.iv_driving));
        }
    }

    private void initData() {
        // TODO Auto-generated method stub
        //总的页数向上取整
        totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
        viewPagerList = new ArrayList<View>();
        Log.d("zhengshibo", "initData: start2222222222");
        for(int i = 0; i < totalPage; i++){
            //每个页面都是inflate出一个新实例
            final GridView gridView = (GridView)View.inflate(this, R.layout.gridview_item, null);
            gridView.setAdapter(new GridViewAdapter(this, listDatas, i, mPageSize));
            //添加item点击监听
            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> arg0, View arg1,
                                        int position, long arg3) {
                    // TODO Auto-generated method stub
                    Object obj = gridView.getItemAtPosition(position);
                    if(obj != null && obj instanceof ProductBean){
                        System.out.println(obj);
                        Toast.makeText(MainActivity.this, ((ProductBean)obj).getProName(), Toast.LENGTH_SHORT).show();
                    }
                }
            });
            //每一个GridView作为一个View对象添加到ViewPager集合中
            viewPagerList.add(gridView);
        }
        //设置ViewPager适配器
        viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));

        //添加小圆点
        ivPoints = new ImageView[totalPage];
        for(int i = 0; i < totalPage; i++){
            //循坏加入点点图片组
            ivPoints[i] = new ImageView(this);
            if(i==0){
                ivPoints[i].setImageResource(R.drawable.page_focuese);
            }else {
                ivPoints[i].setImageResource(R.drawable.page_unfocused);
            }
            ivPoints[i].setPadding(8, 8, 8, 8);
            group.addView(ivPoints[i]);
        }
        //设置ViewPager的滑动监听，主要是设置点点的背景颜色的改变
        viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                //currentPage = position;
                for(int i=0 ; i < totalPage; i++){
                    if(i == position){
                        ivPoints[i].setImageResource(R.drawable.page_focuese);
                    }else {
                        ivPoints[i].setImageResource(R.drawable.page_unfocused);
                    }
                }
            }
        });
    }
}

MyViewPagerAdapter.java

public class MyViewPagerAdapter extends PagerAdapter {

    private List<View> viewList;//View就二十GridView

    public MyViewPagerAdapter(List<View> viewList) {
        this.viewList = viewList;
    }

    @Override
    public int getCount() {
        return viewList != null ? viewList.size() : 0;
    }

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

    /**
     * 将当前的View添加到ViewGroup容器中
     * 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPage上
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // TODO Auto-generated method stub
        container.removeView((View) object);
    }
}

GridViewAdapter.java

public class GridViewAdapter extends BaseAdapter {

    private Context context;
    private List<ProductBean> lists;//数据源
    private int mIndex;//页数下标，从0开始，标识第几页
    private int mPagerSize;//每页显示的最大数量

    public GridViewAdapter(Context context, List<ProductBean> lists, int mIndex, int mPagerSize) {
        this.context = context;
        this.lists = lists;
        this.mIndex = mIndex;
        this.mPagerSize = mPagerSize;
    }

    @Override
    public int getCount() {
        return lists.size() > (mIndex + 1) * mPagerSize ?
                mPagerSize : (lists.size() - mIndex*mPagerSize);
    }

    @Override
    public Object getItem(int i) {
        return lists.get(i + mIndex * mPagerSize);
    }

    @Override
    public long getItemId(int i) {
        return i + mIndex * mPagerSize;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder holder = null;
        if(view == null){
            holder = new ViewHolder();
            view = View.inflate(context, R.layout.item_view, null);
            holder.tv_name = (TextView)view.findViewById(R.id.item_text);
            holder.iv_nul = (ImageView)view.findViewById(R.id.item_image);
            view.setTag(holder);
        }else {
            holder = (ViewHolder)view.getTag();
        }
        //重新确定position因为拿到的总是数据源，数据源是分页加载到每页的GridView上的
        final int pos = i + mIndex * mPagerSize;//假设mPageSiez
        //假设mPagerSize=8，假如点击的是第二页（即mIndex=1）上的第二个位置item(position=1),那么这个item的实际位置就是pos=9
        holder.tv_name.setText(lists.get(pos).getProName() + "");
        holder.iv_nul.setImageResource(lists.get(pos).getUrl());
        //添加item监听
//        convertView.setOnClickListener(new View.OnClickListener() {
//
//            @Override
//            public void onClick(View arg0) {
//                // TODO Auto-generated method stub
//                Toast.makeText(context, "您点击了"  + lists.get(pos).getName(), Toast.LENGTH_SHORT).show();
//            }
//        });
        return view;
    }
    static class ViewHolder{
        private TextView tv_name;
        private ImageView iv_nul;
    }
}

GlideImageLoader.java

public class GlideImageLoader extends ImageLoader {

    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {

        //Glide 加载图片简单用法
//        Glide.with(context).load(path).into(imageView);

        //Picasso 加载图片简单用法
        Picasso.with(context).load((String) path).into(imageView);
        //用fresco加载图片简单用法，记得要写下面的createImageView方法
        Uri uri = Uri.parse((String) path);
        imageView.setImageURI(uri);
    }

}

ProductBean.java

public class ProductBean {
    private String proName;
    private int Url;

    public ProductBean(String proName, int url) {
        this.proName = proName;
        Url = url;
    }

    public String getProName() {
        return proName;
    }

    public void setProName(String proName) {
        this.proName = proName;
    }

    public int getUrl() {
        return Url;
    }

    public void setUrl(int url) {
        Url = url;
    }
}