代码已经上传码云,有兴趣的小伙伴可以下载看看:
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); } }); } }
时间: 2024-10-14 06:15:53