手机商城第五天,用recyclerview设置秒杀区域的布局,以及为该recyclerview设置item级的点击事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机商城第五天,用recyclerview设置秒杀区域的布局,以及为该recyclerview设置item级的点击事件相关的知识,希望对你有一定的参考价值。

    代码已经托管到码云上,有兴趣的小伙伴可以下载看看:

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


    之前可能忘记了web端,也就是这个APP里面内容的来源。其实就是一个简单的Tomcat里的小项目,目的是给这个APP提供一个json字符串,以及字符串里对应的内容,如图片,文字,这个web项目会放到下面。

        这次的效果图如下,设置秒杀的布局以及给秒杀的每个item设置点击事件

技术分享            


    这个秒杀布局,用的是recyclerview的横向布局。


    一、在homeFragmentAdapter里,设置这个区域

        在onCreateViewHolder里,返回自定义的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));
    }
    return null;
}

      在onBindViewHolder里绑定这个秒杀区域的数据

    

/**
 * 相当于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());
    }
}


二、这个recyclerview的布局

    一个简单的线性布局,上面是个线性布局,有图片、文字,下面是个recyclerview,即我们的主角部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:padding="10dp"
              android:background="#fff"
              android:layout_width="380dp"
              android:layout_height="180dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:src="@drawable/home_arrow_left_flash"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:textColor="#000"
            android:text="今日限购,距.结束"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:id="@+id/tv_time_seckill"
            android:textColor="#fff"
            android:text="00:00:00"
            android:padding="2dp"
            android:background="@drawable/time_shape"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:id="@+id/tv_more_seckill"
            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>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_seckill"
        android:layout_width="380dp"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>


三、自定义的viewholder来设置这个recyclerview的数据与显示

        上面部分是在创建这个viewholder时,初始化布局里的各个控件

        下面的setData()是在onBindViewHolder时调用,传入数据。

在这个setData()方法里,设置了rv_seckill的布局管理器,来控制这个recyclerview是横着显示还是竖着显示,然后设置了这个recycle人view的适配器,最后设置了recyclerview里每个item的点击事件,详细的见下面的关于这个recyclerview的适配器。

class SeckillViewHolder extends RecyclerView.ViewHolder{
    /**
     * 初始化布局中的控件
     */
    TextView tv_time_seckill;
    TextView tv_more_seckill;
    RecyclerView rv_seckill;
    SeckillViewHolderAdapter seckillViewHolderAdapter;

    /**
     * 构造函数,对应上面传入的参数
     * @param context
     * @param view
     */
    public SeckillViewHolder(Context context,View view){
        super(view);
        /**
         * 实例化控件
         */
        tv_time_seckill= (TextView) view.findViewById(R.id.tv_time_seckill);
        tv_more_seckill= (TextView) view.findViewById(R.id.tv_more_seckill);
        rv_seckill= (RecyclerView) view.findViewById(R.id.rv_seckill);

    }

    public void setData(ResultBeanData.ResultBean.SeckillInfoBean seckill_info) {
        //1、得到数据
        //2、设置数据:文本和recycleview的数据
        seckillViewHolderAdapter=new SeckillViewHolderAdapter(context,seckill_info.getList());
        rv_seckill.setAdapter(seckillViewHolderAdapter);

        //要想recycleviewView起作用,还要设置管理器
        /**
         * 参数说明,第一个是上下文,第二个是方向:目前是水平方向,第三个是否采用倒序
         */
        rv_seckill.setLayoutManager(new LinearLayoutManager(context,LinearLayoutManager.HORIZONTAL,false));

        seckillViewHolderAdapter.setOnSeckillRecyclerView(new SeckillViewHolderAdapter.OnSeckillRecyclerView() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(context,"秒杀"+position,Toast.LENGTH_SHORT).show();
            }
        });
    }
}


四、秒杀区域的适配器,在此实现了item的点击事件

        这个适配器,同样是extends RecyclerView.Adapter,然后实现里面的三个方法,以及定义一个构造方法,在构造方法里,获取上下文,以及要显示的数据

        在onCreateViewHolder里,返回自定义的viewholder对象

        在onBindVIewHolder里绑定要显示的数据

        利用Glide加载远程图片


    注意的是:在自定义的viewholder里,有itemview这个对象,即每个recyclerview区域里的单独对象,给这个itemview设置点击事件,就可以实现recyclerview的item点击事件。

package com.yuanlp.shoppingmall.home.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
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/28.
 */

public class SeckillViewHolderAdapter extends RecyclerView.Adapter {

    private final Context context;
    private final List<ResultBeanData.ResultBean.SeckillInfoBean.ListBean> list;


    public SeckillViewHolderAdapter(Context context, List<ResultBeanData.ResultBean.SeckillInfoBean.ListBean> list) {
        this.context=context;
        this.list=list;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemview=View.inflate(context, R.layout.item_seckill,null);
        return new SeckillViewHolder(itemview);
    }


    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        SeckillViewHolder seckillViewHolder= (SeckillViewHolder) holder;

        //1、根据位置得到数据
        ResultBeanData.ResultBean.SeckillInfoBean.ListBean listBean = list.get(position);

        //2、绑定数据
        Glide.with(context).load(Constants.IMG_URL+listBean.getFigure()).into(((SeckillViewHolder) holder).iv_figure);
        ((SeckillViewHolder) holder).tv_cover_price.setText(listBean.getCover_price());
        ((SeckillViewHolder) holder).tv_origid_price.setText(listBean.getOrigin_price());

    }


    @Override
    public int getItemCount() {
        return list.size();
    }

    class SeckillViewHolder extends RecyclerView.ViewHolder{

        /**
         * 初始化item_skill这个布局中的控件
         * @param itemView
         */
        ImageView iv_figure;
        TextView tv_cover_price;
        TextView tv_origid_price;
        LinearLayout ll_root;

        public SeckillViewHolder(View itemView) {
            super(itemView);
            //实例化控件
            iv_figure= (ImageView) itemView.findViewById(R.id.iv_figure);
            tv_cover_price= (TextView) itemView.findViewById(R.id.tv_cover_price);
            tv_origid_price= (TextView) itemView.findViewById(R.id.tv_origid_price);

            //这里的itemview代表的就是 在页面上显示的item,因此可以设置这个的点击事件来做点击事件
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
//                    Toast.makeText(context,"秒杀位置="+getLayoutPosition(),Toast.LENGTH_SHORT).show();
                      if (onSeckillRecyclerView!=null){
                          onSeckillRecyclerView.onItemClick(getLayoutPosition());
                      }
                }
            });
        }
    }

    public interface OnSeckillRecyclerView{
        public void onItemClick(int position);
    }


    private OnSeckillRecyclerView onSeckillRecyclerView;

    public void setOnSeckillRecyclerView(OnSeckillRecyclerView onSeckillRecyclerView) {
        this.onSeckillRecyclerView = onSeckillRecyclerView;
    }


}


五、itemview的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/ll_root"
              android:padding="5dp"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_figure"
        android:background="@drawable/new_img_loading_2"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <TextView
        android:id="@+id/tv_cover_price"
        android:textSize="15sp"
        android:textColor="#ff4c4c"
        android:text="¥102.00"
        android:gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:layout_width="100dp"
        android:layout_height="wrap_content"/>

    <RelativeLayout
        android:layout_marginTop="2dp"
        android:layout_width="100dp"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_origid_price"
            android:textColor="#9a9a9a"
            android:text="¥159.00"
            android:gravity="center_horizontal"
            android:layout_width="100dp"
            android:layout_height="wrap_content"/>

        <View
            android:background="@android:color/background_dark"
            android:layout_centerInParent="true"
            android:layout_width="70dp"
            android:layout_height="1dp"/>

    </RelativeLayout>
</LinearLayout>


最终实现了秒杀区域的recyclerview的布局,以及给其每个item添加点击事件

本文出自 “YuanGuShi” 博客,请务必保留此出处http://cm0425.blog.51cto.com/10819451/1960315

以上是关于手机商城第五天,用recyclerview设置秒杀区域的布局,以及为该recyclerview设置item级的点击事件的主要内容,如果未能解决你的问题,请参考以下文章

高并发下商城秒杀活动的处理

python实现购物车+ATM机 第五天

微商城秒杀配置

手机商城笔记3--实现后台第一个页面

python之信用卡ATM(第五天)

Day437&438.秒杀服务 -谷粒商城