手機商城第四天，利用GridView和viewpager實現頻道按鈕和熱門活動圖表片的展示

標籤：手機商城第四天   利用gridview和viewpager實現頻道按鈕和熱門活動圖表片的展示   

        代碼已經上傳碼雲，有興趣的小夥伴可以下載看看：

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

下面是這次的：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M00/00/B9/wKiom1mcQOqQFI73AAK58F-fUVI597.png-wh_500x0-wm_3-wmp_4-s_4039475636.png" title="QQ圖片20170822223331.png" alt="wKiom1mcQOqQFI73AAK58F-fUVI597.png-wh_50" />

其中哪些服飾、遊戲、動漫等欄目以及下方的那個活動都是這次的內容。

一 、頻道欄目的實現 ----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 */@Overridepublic 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的方法，在Binder 方法裡即onBindViewHolder給每個viewholder綁定資料，其中setData()方法在上面。

    

/** * 相當於getview裡的綁定資料 * @param holder * @param position */@Overridepublic 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

手機商城第四天，利用GridView和viewpager實現頻道按鈕和熱門活動圖表片的展示