ViewPager+GridView实现商品分类.滑动点击效果(团购,商城都会用到)--binbinyang

来源：互联网发布：人工智能假肢多少钱编辑：程序博客网时间：2024/05/17 21:31

团购项目,商城项目,都会用到商品分类滑动展示的效果.类似于美团. 淘宝,京东等

公司以后,自己的商城也会用到这种,于是最近就在自己写商城项目,写个DEMO 练练手

先上我的效果图吧

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

首先分析一下，实现的主要思路就是将GridView作为一个View添加到ViewPager的adapter中，如上图展示的效果，数据源被分为二页，那么我们就需要inflate2个GridView出来，并add到ViewPager的集合中，并将这个集合作为ViewPager的数据源传给ViewPager的Adapter。

我在这个里面其实写的是.我用的是一个GridView ,只是用了2个集合往里面添加数据,然后切换罢了

老规矩.先上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="match_parent"                android:background="#CDCDCD"               >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="220dp"        android:background="#FFFFFF"        >        <android.support.v4.view.ViewPager            android:id="@+id/viewPager"            android:layout_width="match_parent"            android:layout_height="wrap_content"            />        <LinearLayout            android:layout_marginTop="30dp"            android:id="@+id/points"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="10dp"            android:gravity="center"            android:orientation="horizontal"            />    </RelativeLayout></RelativeLayout>

接下来是作为ViewPager的item布局文件GridView，

<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    >    <GridView        android:numColumns="4"        android:id="@+id/gridview"        android:layout_width="match_parent"        android:layout_height="match_parent"></GridView></LinearLayout>

然后是GridView中的item布局文件

<?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">    <ImageView        android:layout_marginTop="10dp"        android:layout_gravity="center"        android:id="@+id/iv"        android:layout_width="wrap_content"        android:layout_height="60dp"/>    <TextView        android:layout_gravity="center"        android:id="@+id/tv"        android:layout_width="wrap_content"        android:layout_height="30dp"/></LinearLayout>

分析完布局文件之后，我们就开始说我们的GridView的adapter，我们都知道，根据上面的动态效果图可以看出，我一页有8个,分2页,也就是设置了16个,我这16个的图片跟文字,是写死的....当然如果要灵活运用,就请求接口就行了,其实一样,我把图片,文字写到了res/values/arrays里面

<?xml version="1.0" encoding="utf-8"?><resources>    <array name="home_bar_labels">        <item>美食</item>        <item>电影</item>        <item>酒店</item>        <item>休闲娱乐</item>        <item>自助餐</item>        <item>KTV</item>        <item>蛋糕甜点</item>        <item>旅游</item>        <item>购物</item>        <item>摄影写真</item>        <item>丽人</item>        <item>生活服务</item>        <item>门票</item>        <item>抽奖公益</item>        <item>今日新单</item>        <item>全部分类</item>    </array>    <array name="home_bar_icon">        <item>@drawable/icon_home_food_99</item>        <item>@drawable/icon_home_movie_29</item>        <item>@drawable/icon_home_hotel_300</item>        <item>@drawable/icon_home_happy_2</item>        <item>@drawable/icon_home_self_189</item>        <item>@drawable/icon_home_ktv_31</item>        <item>@drawable/icon_home_93</item>        <item>@drawable/icon_home_400</item>        <item>@drawable/icon_home_3</item>        <item>@drawable/icon_home_37</item>        <item>@drawable/icon_home_42</item>        <item>@drawable/icon_home_life_46</item>        <item>@drawable/icon_home_18</item>        <item>@drawable/icon_home_16</item>        <item>@drawable/icon_home_999</item>        <item>@drawable/icon_home_all_0</item>    </array></resources>

下面是适配器的代码

public class MyGridAdapter extends BaseAdapter {    private List<HomeIconInfo> itemData = new ArrayList<>();    private Context mContext;    public MyGridAdapter(List<HomeIconInfo> itemData, Context context) {        this.itemData = itemData;        mContext = context;    }    @Override    public int getCount() {        return itemData.size();    }    @Override    public Object getItem(int i) {        return null;    }    @Override    public long getItemId(int i) {        return 0;    }    @Override    public View getView(int i, View view, ViewGroup viewGroup) {        View inflate = LayoutInflater.from(mContext).inflate(R.layout.grid_item, null);        ImageView imageView = (ImageView) inflate.findViewById(R.id.iv);        imageView.setImageResource(itemData.get(i).getIconID());        TextView textView = (TextView) inflate.findViewById(R.id.tv);        textView.setText(itemData.get(i).getIconName());        return inflate;    }}

实体类

/** * GridView实体 */public class HomeIconInfo {    private String iconName;    private int iconID;    public String getIconName() {        return iconName;    }    public void setIconName(String iconName) {        this.iconName = iconName;    }    public int getIconID() {        return iconID;    }    public void setIconID(int iconID) {        this.iconID = iconID;    }    public HomeIconInfo(String iconName, int iconID) {        this.iconName = iconName;        this.iconID = iconID;    }}

接下来我们再看一下ViewPager的adapter实现。inflate出来的GridView作为View被add到ViewPager集合中，然后将数据传给adapter处理

public class MyViewPagerAdapter extends PagerAdapter {    private List<View> mViews = new ArrayList<>();    public MyViewPagerAdapter(List<View> views) {        mViews = views;    }    /**     *这个方法，是从ViewGroup中移出当前View     */    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mViews.get(position));    }    /**     * 将当前View添加到ViewGroup容器中     * 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中     */    @Override    public Object instantiateItem(ViewGroup container, int position) {        View view = mViews.get(position);        container.addView(view);        return view;    }    /**     *这个方法，是获取当前窗体界面数     */    @Override    public int getCount() {        return mViews.size();    }    /**     *用于判断是否由对象生成界面     */    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;//官方文档要求这样写    }}

最后 activity

/** * Created by yangbin on 2/22/2017. */public class ViewPaActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {    private ViewGroup points;//小圆点指示器    private ImageView[] ivPoints;//小圆点图片集合    private int totalPage = 2;//总的页数    private int currentPage;//当前页    private List<View> mViews = new ArrayList<>();//GridView作为一个View对象添加到ViewPager集合中    /**     * GridView 一共二页的数据     */    private List<HomeIconInfo> mPagerOneData = new ArrayList<>();//第一页数据    private List<HomeIconInfo> mPagerTwoData = new ArrayList<>();//第二页数据    ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_viewpa);        mViewPager = (ViewPager) findViewById(viewPager);        points = (ViewGroup) findViewById(R.id.points);        initData();        initGridView();    }    /**     * 初始化gridview数据     */    private void initData() {        String[] iconName = getResources().getStringArray(R.array.home_bar_labels);        TypedArray typedArray = getResources().obtainTypedArray(R.array.home_bar_icon);        for (int i = 0; i < iconName.length; i++) {            if (i < 8) {                mPagerOneData.add(new HomeIconInfo(iconName[i], typedArray.getResourceId(i, 0)));            } else {                mPagerTwoData.add(new HomeIconInfo(iconName[i], typedArray.getResourceId(i, 0)));            }        }    }    /**     * 初始化gridview     */    private void initGridView() {        View pagerOne = getLayoutInflater().inflate(R.layout.home_gridview, null);        GridView gridView01 = (GridView) pagerOne.findViewById(R.id.gridview);        gridView01.setAdapter(new MyGridAdapter(mPagerOneData, ViewPaActivity.this));        gridView01.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {                Toast.makeText(ViewPaActivity.this, "第一页的" + i + "个", Toast.LENGTH_SHORT).show();            }        });        View pagerTwo = getLayoutInflater().inflate(R.layout.home_gridview, null);        GridView gridView02 = (GridView) pagerTwo.findViewById(R.id.gridview);        gridView02.setAdapter(new MyGridAdapter(mPagerTwoData, ViewPaActivity.this));        gridView02.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {                Toast.makeText(ViewPaActivity.this, "第二页的" + i + "个", Toast.LENGTH_SHORT).show();            }        });        mViews.add(pagerOne);        mViews.add(pagerTwo);        mViewPager.setAdapter(new MyViewPagerAdapter(mViews));        ivPoints = new ImageView[totalPage];        for (int i = 0; i < ivPoints.length; i++) {            ImageView imageView = new ImageView(this);            //设置图片的宽高            imageView.setLayoutParams(new ViewGroup.LayoutParams(10, 10));            if (i == 0) {                imageView.setBackgroundResource(R.drawable.page__selected_indicator);            } else {                imageView.setBackgroundResource(R.drawable.page__normal_indicator);            }            ivPoints[i] = imageView;            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));            layoutParams.leftMargin = 20;//设置点点点view的左边距            layoutParams.rightMargin = 20;//设置点点点view的右边距            points.addView(imageView, layoutParams);        }        //设置ViewPager滑动监听        mViewPager.addOnPageChangeListener(this);    }    /**     * 改变点点点的切换效果     *     * @param selectItems     */    private void setImageBackground(int selectItems) {        for (int i = 0; i < ivPoints.length; i++) {            if (i == selectItems) {                ivPoints[i].setBackgroundResource(R.drawable.page__selected_indicator);            } else {                ivPoints[i].setBackgroundResource(R.drawable.page__normal_indicator);            }        }    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {        //改变小圆圈指示器的切换效果        setImageBackground(position);        currentPage = position;    }    @Override    public void onPageScrollStateChanged(int state) {    }}

0 0