手机商城第四天，利用GridView和viewpager实现频道按钮和热门活动图片的展示

Posted 2020-10-04

        代码已经上传码云，有兴趣的小伙伴可以下载看看：

    https://git.oschina.net/joy_yuan/ShoppingMall

下面是这次的效果图：

其中哪些服饰、游戏、动漫等栏目以及下方的那个活动都是这次的内容。

一 、频道栏目的实现 ----GridView

    布局文件，每行五个控件

<?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="170dp"
              android:background="#fff"
              android:orientation="vertical">

    <GridView
        android:id="@+id/gv_channel"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:numColumns="5"
        ></GridView>
</LinearLayout>

        每个控件的布局如下：上面是imageview，下面是textview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:padding="10dp"
              android:gravity="center_horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_channel"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/menu_cyc"
        />

    <TextView
        android:id="@+id/tv_channel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center_horizontal"
        android:textColor="#000"
        android:textSize="12sp"
        android:text="原立鹏"
        />
</LinearLayout>

    1、创建viewholder

            在recycle人view的onCreateViewHolder方法里，如果是里面有GridView，那么就返回一个GridView的viewholder，如下的 if（viewType==CHANNEL）

        

/**
 * 创建viewholder 相当于baseadapter里的getview，相当于viewholder部分代码
 * @param parent
 * @param viewType  当前的类型
 * @return
 */
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    if (viewType==BANNER){
        return new BannerViewHolder(context,layoutInflater.inflate(R.layout.banner_viewpager,null));
    }else if (viewType==CHANNEL){
        return new ChannelViewHolder(context,layoutInflater.inflate(R.layout.channel_item,null));
    }else if (viewType==ACT){
        return new ActViewHolder(context,layoutInflater.inflate(R.layout.act_item,null));
    }
    return null;
}

    创建viewholder，并实例化里面的GridView控件

        

class ChannelViewHolder extends RecyclerView.ViewHolder{
    private GridView gv_channel;

    public ChannelViewHolder(final Context context, View itemView) {
        super(itemView);
        gv_channel= (GridView) itemView.findViewById(R.id.gv_channel);

        gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(context,"position是"+position,Toast.LENGTH_SHORT).show();
            }
        });

    }

    public void setData(List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {

        //这里得到数据了，然后设置GridView的适配器
        ChannelAdapter adapter=new ChannelAdapter(context,channel_info);
        gv_channel.setAdapter(adapter);

    }
}

2、根据recyclerview的方法，在绑定方法里即onBindViewHolder给每个viewholder绑定数据，其中setData()方法在上面。

    

/**
 * 相当于getview里的绑定数据
 * @param holder
 * @param position
 */
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    //通过position，来获取当前是哪个类型
    if (getItemViewType(position)==BANNER){
        //是banner类型，将holder强转为bannerviewholder
        BannerViewHolder bannerViewHolder= (BannerViewHolder) holder;
        bannerViewHolder.setData(resultBean.getBanner_info());
    }else if (getItemViewType(position)==CHANNEL){
        ChannelViewHolder channelViewHolder= (ChannelViewHolder) holder;
        channelViewHolder.setData(resultBean.getChannel_info());
    }else if (getItemViewType(position)==ACT){
        ActViewHolder actviewholder= (ActViewHolder) holder;
        actviewholder.setData(resultBean.getAct_info());

    }
}

    3、设置适配器。

        GridView的数据显示方式类似于listview，都要设置适配器，即额外写一个适配器。这里就不赘述了，跟listview一样的方法与意义。有一点要注意，就是每个频道channel的imageview需要用到Glide插件来进行加载远程图片

package com.yuanlp.shoppingmall.home.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.yuanlp.shoppingmall.R;
import com.yuanlp.shoppingmall.home.model.ResultBeanData;
import com.yuanlp.shoppingmall.utils.Constants;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by 原立鹏 on 2017/8/18.
 *
 * 频道的适配器，类似于listview的适配器
 */

public class ChannelAdapter extends BaseAdapter {

    Context mContext;
    ArrayList<ResultBeanData.ResultBean.ChannelInfoBean> list;
    public ChannelAdapter(Context context, List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info){
        this.mContext=context;
        this.list= (ArrayList<ResultBeanData.ResultBean.ChannelInfoBean>) channel_info;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=new ViewHolder();
        if (convertView==null){
            convertView=View.inflate(mContext, R.layout.item_channel,null);  //子布局，类似于listview的每个行的布局一样
            viewHolder.iv_channel= (ImageView) convertView.findViewById(R.id.iv_channel);
            viewHolder.tv_channel= (TextView) convertView.findViewById(R.id.tv_channel);
            convertView.setTag(viewHolder);
        }else{
            viewHolder= (ViewHolder) convertView.getTag();
        }
        ResultBeanData.ResultBean.ChannelInfoBean channelInfoBean=list.get(position);
        //利用glide加载远程图片到本地图片上
        Glide.with(mContext).load(Constants.IMG_URL+channelInfoBean.getImage()).into(viewHolder.iv_channel);
        viewHolder.tv_channel.setText(channelInfoBean.getChannel_name());
        return convertView;
    }

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


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


    //根据子布局，里面的控件类型，做一个内部的viewholder
    static class ViewHolder{
        ImageView iv_channel;
        TextView tv_channel;

    }

}

如此，这个channel即可实现显示。

    二 、viewpager实现活动图片的展示

    类似于上面的GridView，在recyclerview的oncreateviewholder方法里，返回一个actViewHolder的实例对象。

    然后在recyclerview的onBindviewHolder绑定数据里面，写一个内部监听，在里面实现图片的加载以及切换效果。

    

class ActViewHolder extends RecyclerView.ViewHolder {
    private ViewPager act_viewpager;
   public ActViewHolder(Context context, View inflate) {
       super(inflate);
       act_viewpager= (ViewPager) inflate.findViewById(R.id.act_viewpager);

   }


    public void setData(final List<ResultBeanData.ResultBean.ActInfoBean> act_info) {
        act_viewpager.setPageMargin(30);
        act_viewpager.setOffscreenPageLimit(3);
        act_viewpager.setPageTransformer(true,new ScaleInTransformer());
        /**
         * 设置viewpage热的适配器，至少要重写下方的四个方法
         */
        act_viewpager.setAdapter(new PagerAdapter() {

            @Override
            public int getCount() {
                return act_info.size();
            }

            /**
             * 确认2者是不是相同
             * @param view 页面
             * @param object  instantiateItem方法返回的值
             * @return
             */
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }

            /**
             *
             * @param container  这个其实就是viewpager自身
             * @param position    对应页面的位置
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView imageView=new ImageView(context);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);  //设置imageview的拉伸，xy轴都拉伸
               //远程加载imageview的图片
               Glide.with(context).load(Constants.IMG_URL+act_info.get(position).getIcon_url()).into(imageView);

                //将图片添加到容器中
                container.addView(imageView);

                imageView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(context, "点击了图片", Toast.LENGTH_SHORT).show();
                    }
                });
                return imageView;
            }

            /**
             * 移除图片
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
               container.removeView((View) object);
            }
        });
    }
}

本文出自 “YuanGuShi” 博客，请务必保留此出处http://cm0425.blog.51cto.com/10819451/1958504