手機商城第六天，利用GridView實現推薦區域以及火爆區域
阿新 • • 發佈：2017-08-30
手機商城第六天 利用gridview實現推薦區域以及火爆區域
代碼已提交碼雲，有興趣的可以下載看看
https://git.oschina.net/joy_yuan/ShoppingMall
本次代碼效果截圖：
效果如上圖所示，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這個布局的頁面等
*/
@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));
}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
*/
@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());
}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實現推薦區域以及火爆區域