手機商城第六天，利用GridView實現推薦地區以及火爆地區

標籤：手機商城第六天   利用gridview實現推薦地區以及火爆地區   

    代碼已提交碼雲，有興趣的可以下載看看

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

    本次代碼效果：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/05/78/wKiom1mlhtTCNdIVAAHLpCj-7As965.png-wh_500x0-wm_3-wmp_4-s_95162089.png" title="QQ圖片20170829232324.png" alt="wKiom1mlhtTCNdIVAAHLpCj-7As965.png-wh_50" />

效果如所示，2個地區，一個是分三列顯示，一個是分2列顯示，代碼類似，就拿一個地區做例子好了

    一、推薦地區

        布局檔案： 整體是個線性布局，裡面有2個子布局，一個線性布局，一個gridview.

    重點是gridview裡，設定numCloumns=3，表示分三列顯示資料

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:background="#fff"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <LinearLayout        android:padding="10dp"        android:gravity="center_vertical"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView            android:src="@drawable/home_arrow_left_new"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>        <TextView            android:text="新品推薦"            android:textColor="#000"            android:layout_marginLeft="10dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>        <TextView            android:id="@+id/tv_more_remommend"            android:text="查看更多"            android:gravity="end"            android:drawableRight="@drawable/home_arrow_right"            android:drawablePadding="5dp"            android:layout_weight="1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>    </LinearLayout>    <GridView        android:id="@+id/gv_commend"        android:numColumns="3"        android:layout_width="match_parent"        android:layout_height="380dp"></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:gravity="center_horizontal"              android:padding="10dp"              android:layout_width="match_parent"              android:layout_height="match_parent">    <ImageView        android:id="@+id/iv_recommend"        android:background="@drawable/new_img_loading_2"        android:layout_width="100dp"        android:layout_height="100dp"/>    <TextView        android:id="@+id/tv_name"        android:textColor="#000"        android:text="全款預售【喵鹿醬】櫻桃蜜語 毛呢繡花 小高腰半裙"        android:lines="2"        android:ellipsize="end"        android:layout_marginTop="10dp"        android:layout_width="100dp"        android:layout_height="wrap_content"/>    <TextView        android:id="@+id/tv_price"        android:textColor="#ff4242"        android:text="￥88.00"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></LinearLayout>

二、在HomeFragmentAdapter中

        1、建立推薦地區的viewholder

/** * 建立viewholder 相當於baseadapter裡的getview，相當於viewholder部分代碼 * @param parent * @param viewType  當前的類型 * @return  返回一個用來展示的控制項的布局，如下方的R。layout.banner_viewpager這個布局的頁面等 */@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));    }else if (viewType==SECKILL){  //秒殺        return  new SeckillViewHolder(context,layoutInflater.inflate(R.layout.seckill_item,null));    }else if (viewType==RECOMMEND){        return new RecommendViewHolder(context,layoutInflater.inflate(R.layout.recomment_item,null));    }else if (viewType==HOT){        return new HotViewHolder(context, layoutInflater.inflate(R.layout.hot_item,null));    }    return null;}2、綁定資料到這個地區/** * 相當於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());    }else if (getItemViewType(position)==SECKILL){  //秒殺        SeckillViewHolder seckillViewHolder= (SeckillViewHolder) holder;        seckillViewHolder.setData(resultBean.getSeckill_info());    }else if (getItemViewType(position)==RECOMMEND){        RecommendViewHolder recommendViewHolder= (RecommendViewHolder) holder;        recommendViewHolder.setData(resultBean.getRecommend_info());    }else if (getItemViewType(position)==HOT){        HotViewHolder hotViewHolder= (HotViewHolder) holder;        hotViewHolder.setData(resultBean.getHot_info());    }}/** * 推薦的viewholder */class RecommendViewHolder extends RecyclerView.ViewHolder{    TextView tv_more_remommend;    GridView gv_commend;    public RecommendViewHolder(final Context context, View inflate) {        super(inflate);        tv_more_remommend= (TextView) inflate.findViewById(R.id.tv_more_remommend);        gv_commend= (GridView) inflate.findViewById(R.id.gv_commend);        gv_commend.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();                //點擊後跳轉到詳情頁面                startGoodsInfoActivity();            }        });    }    3、 設定適配器，來顯示資料    public void setData(List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {        RecommendAdapter adapter=new RecommendAdapter(context,recommend_info);        gv_commend.setAdapter(adapter);    }}

三、gridview的適配器，與listview的適配器類似，都是extends BaseAdapter，實現裡面的方法

    注意在裡面建立內部類viewholder，用來臨時存放每個gridview的item內部控制項

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.List;/** * Created by 原立鵬 on 2017/8/29. */public class RecommendAdapter extends BaseAdapter {    private final Context context;    private final List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info;    public RecommendAdapter(Context context, List<ResultBeanData.ResultBean.RecommendInfoBean> recommend_info) {        this.context=context;        this.recommend_info=recommend_info;    }    @Override    public int getCount() {        return recommend_info.size();    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder viewholder=new ViewHolder();        if (convertView==null){            convertView=View.inflate(context, R.layout.item_recommend,null);            viewholder.iv_recommend= (ImageView) convertView.findViewById(R.id.iv_recommend);            viewholder.tv_name= (TextView) convertView.findViewById(R.id.tv_name);            viewholder.tv_price= (TextView) convertView.findViewById(R.id.tv_price);            convertView.setTag(viewholder);        }else{            viewholder= (ViewHolder) convertView.getTag();        }        ResultBeanData.ResultBean.RecommendInfoBean recommendInfoBean = recommend_info.get(position);        Glide.with(context).load(Constants.IMG_URL+recommendInfoBean.getFigure()).into(viewholder.iv_recommend);        viewholder.tv_name.setText(recommendInfoBean.getName());        viewholder.tv_price.setText(recommendInfoBean.getCover_price());        return convertView;    }    @Override    public Object getItem(int position) {        return recommend_info.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    class ViewHolder {        TextView tv_name;        TextView tv_price;        ImageView iv_recommend;    }}

明天講解利用scrollviewcontainer這個第三方外掛程式，來實現點擊商品後跳轉商品詳情頁面。

本文出自 “YuanGuShi” 部落格，請務必保留此出處http://cm0425.blog.51cto.com/10819451/1960968

手機商城第六天，利用GridView實現推薦地區以及火爆地區