ViewPager 和 GridView 结合实现左右滑动

来源：互联网发布：淘宝造物节编辑：程序博客网时间：2024/05/22 16:47

仿美团主页的分类，实现左右滑动的功能节省空间

主页面的布局

<?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="match_parent"    android:background="#d4d3d3"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="180dp"        android:background="#FFFFFF">        <android.support.v4.view.ViewPager            android:id="@+id/viewpager"            android:layout_width="match_parent"            android:layout_height="wrap_content" />        <LinearLayout            android:id="@+id/ll_dot"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="8dp"            android:gravity="center"            android:orientation="horizontal" />    </RelativeLayout></RelativeLayout>

实现主要功能的代码块

import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.LayoutInflater;import android.view.View;import android.widget.AdapterView;import android.widget.GridView;import android.widget.LinearLayout;import android.widget.Toast;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private String[] titles = {"美食", "电影", "酒店住宿", "休闲娱乐", "外卖", "自助餐", "KTV", "机票/火车票", "周边游", "美甲美睫",            "火锅", "生日蛋糕", "甜品饮品", "水上乐园", "汽车服务", "美发", "丽人", "景点", "足疗按摩", "运动健身", "健身", "超市", "买菜",            "今日新单", "小吃快餐", "面膜", "洗浴/汗蒸", "母婴亲子", "生活服务", "婚纱摄影", "学习培训", "家装", "结婚", "全部分配"};    private ViewPager mPager;    private List<View> mPagerList;    private List<Model> mDatas;    private LinearLayout mLlDot;    private LayoutInflater inflater;    /**     * 总的页数     */    private int pageCount;    /**     * 每一页显示的个数     */    private int pageSize = 10;    /**     * 当前显示的是第几页     */    private int curIndex = 0;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mPager = (ViewPager) findViewById(R.id.viewpager);        mLlDot = (LinearLayout) findViewById(R.id.ll_dot);        //初始化数据源        initDatas();        inflater = LayoutInflater.from(this);        //总的页数=总数/每页数量，并取整        pageCount = (int) Math.ceil(mDatas.size() * 1.0 / pageSize);        mPagerList = new ArrayList<View>();        for (int i = 0; i < pageCount; i++) {            //每个页面都是inflate出一个新实例            GridView gridView = (GridView) inflater.inflate(R.layout.gridview, mPager, false);            gridView.setAdapter(new GridViewAdapter(this, mDatas, i, pageSize));            //使用GridView作为每个ViewPager的页面，也就是说每个ViewPager的页面都是inflate出一个GridView新实例            mPagerList.add(gridView);            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {                @Override                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                    int pos = position + curIndex * pageSize;                    Toast.makeText(MainActivity.this, mDatas.get(pos).getName(), Toast.LENGTH_SHORT).show();                }            });        }        //设置适配器        mPager.setAdapter(new ViewPagerAdapter(mPagerList));        //设置圆点        setOvalLayout();    }    /**     * 初始化数据源     */    private void initDatas() {        mDatas = new ArrayList<Model>();        for (int i = 0; i < titles.length; i++) {            //动态获取资源ID，第一个参数是资源名，第二个参数是资源类型例如drawable，string等，第三个参数包名            int imageId = getResources().getIdentifier("ic_category_" + i, "mipmap", getPackageName());            mDatas.add(new Model(titles[i], imageId));        }    }    /**     * ViewPager翻页时，正确显示目前选中的是那一页呢，也就是说在左右滑动时，下面小圆点的状态也要相应地做出改变：     * 设置圆点     */    public void setOvalLayout() {        for (int i = 0; i < pageCount; i++) {            mLlDot.addView(inflater.inflate(R.layout.dot, null));        }        // 默认显示第一页        mLlDot.getChildAt(0).findViewById(R.id.v_dot)                .setBackgroundResource(R.drawable.dot_selected);        mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            public void onPageSelected(int position) {                // 取消圆点选中                mLlDot.getChildAt(curIndex)                        .findViewById(R.id.v_dot)                        .setBackgroundResource(R.drawable.dot_normal);                // 圆点选中                mLlDot.getChildAt(position)                        .findViewById(R.id.v_dot)                        .setBackgroundResource(R.drawable.dot_selected);                curIndex = position;            }            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            public void onPageScrollStateChanged(int arg0) {            }        });    }}

小圆点布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <!-- 小圆点View -->    <View        android:id="@+id/v_dot"        android:layout_width="8dp"        android:layout_height="8dp"        android:layout_marginLeft="2dp"        android:layout_marginRight="2dp"        android:background="@drawable/dot_normal"/></RelativeLayout>

圆点的背景颜色的改变 drawable

dot_normal.xml<?xml version="1.0" encoding="utf-8"?><!-- 圆点未选中 --><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <solid android:color="#D4D3D3" />    <corners android:radius="8dp" /></shape>

dot_selected.xml<?xml version="1.0" encoding="utf-8"?><!-- 圆点选中 --><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <solid android:color="@color/colorPrimary" />    <corners android:radius="8dp" /></shape>

Gridview的布局以及item的布局

<?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="wrap_content"    android:numColumns="5"    android:overScrollMode="never" />

item的布局<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical"    android:paddingBottom="10dp"    android:paddingTop="10dp">    <ImageView        android:id="@+id/imageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:paddingTop="2dp"        android:textSize="12dp" /></LinearLayout>

GridView的适配器：进行填充数据

import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import java.util.List;/** * GridView的适配器 */public class GridViewAdapter extends BaseAdapter {    private List<Model> mDatas;    private LayoutInflater inflater;    /**     * 页数下标,从0开始(当前是第几页)     */    private int curIndex;    /**     * 每一页显示的个数     */    private int pageSize;    public GridViewAdapter(Context context, List<Model> mDatas, int curIndex, int pageSize) {        inflater = LayoutInflater.from(context);        this.mDatas = mDatas;        this.curIndex = curIndex;        this.pageSize = pageSize;    }    /**     * 先判断数据集的大小是否足够显示满本页？mDatas.size() > (curIndex+1)*pageSize,     * 如果够，则直接返回每一页显示的最大条目个数pageSize,     * 如果不够，则有几项返回几,(mDatas.size() - curIndex * pageSize);(也就是最后一页的时候就显示剩余item)     */    @Override    public int getCount() {        return mDatas.size() > (curIndex + 1) * pageSize ? pageSize : (mDatas.size() - curIndex * pageSize);    }    @Override    public Object getItem(int position) {        return mDatas.get(position + curIndex * pageSize);    }    @Override    public long getItemId(int position) {        return position + curIndex * pageSize;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder viewHolder = null;        if (convertView == null) {            convertView = inflater.inflate(R.layout.item_gridview, parent, false);            viewHolder = new ViewHolder();            viewHolder.tv = (TextView) convertView.findViewById(R.id.textView);            viewHolder.iv = (ImageView) convertView.findViewById(R.id.imageView);            convertView.setTag(viewHolder);        } else {            viewHolder = (ViewHolder) convertView.getTag();        }        /**根据当前下标curIndex和每页显示最大数pageSize         * 在给View绑定显示的数据时，计算正确的position = position + curIndex * pageSize，         */        int pos = position + curIndex * pageSize;        viewHolder.tv.setText(mDatas.get(pos).name);        viewHolder.iv.setImageResource(mDatas.get(pos).iconRes);        return convertView;    }    class ViewHolder {        public TextView tv;        public ImageView iv;    }}

所有主要的代码完成，效果如下

这里写图片描述

0 0