标签：手机商城第四天 利用gridview和viewpager实现频道按钮和热门活动图片的展示
代码已经上传码云，有兴趣的小伙伴可以下载看看：
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
手机商城第四天，利用GridView和viewpager实现频道按钮和热门活动图片的展示
标签：手机商城第四天 利用gridview和viewpager实现频道按钮和热门活动图片的展示
原文地址：http://cm0425.blog.51cto.com/10819451/1958504
