手机商城第六天，利用GridView实现推荐区域以及火爆区域
代码已提交码云，有兴趣的可以下载看看
https://git.oschina.net/joy_yuan/ShoppingMall
本次代码效果截图：
效果如上图所示，2个区域，一个是分三列显示，一个是分2列显示，代码类似，就拿一个区域做例子好了
一、推荐区域
布局文件： 整体是个线性布局，里面有2个子布局，一个线性布局，一个gridview.
重点是gridview里，设置numCloumns=3，表示分三列显示数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<?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的布局如下:
外围是线性布局，然后里面包含图片、文本
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<?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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
/**
* 创建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内部控件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
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这个第三方插件，来实现点击商品后跳转商品详情页面。
本文转自老婆的宝宝51CTO博客，原文链接：http://blog.51cto.com/cm0425/1960968 ，如需转载请自行联系原作者
