Android商城开发系列（十一）—— 首页秒杀布局实现

　　首页秒杀布局如下图：

　　

　　布局使用的是LinearLayout和RecyclerView去实现，新建seckkill_item.xml，代码如下所示：

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

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

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

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

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

         <TextView
             android:id="@+id/tv_more_seckill"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="@mipmap/home_arrow_right"
             android:gravity="end"
             android:text="查看更多"/>

     </LinearLayout>

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

 </LinearLayout>

　　在drawable目录下设置倒计时的TextView颜色，新建time_shape，代码如下所示：

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <solid android:color="#ff4040" />
     <corners android:radius="5dp" />
 </shape>

　　布局弄好了，我们要把数据展示在界面上，在HomeFragmentAdapter类的onCreateViewHolder()方法中去创建秒杀ViewHolder（SeckillViewHolder），在SeckillViewHolder中使用Handler去实现了秒杀倒计时的效果，SeckillViewHolder代码如下所示：

  /**
      * 秒杀
      */
     class SeckillViewHolder extends RecyclerView.ViewHolder{

         private Context mContext;
         private TextView tv_time_seckill;
         private TextView tv_more_seckill;
         private RecyclerView rv_seckill;
         private SeckillRecycleViewAdapter adapter;

         /**
          * 相差多少时间-毫秒
          */
         private long dt = 0;
         //使用Handler实现秒杀倒计时效果
         private Handler handler = new Handler(){
             @Override
             public void handleMessage(Message msg) {
                 super.handleMessage(msg);
                 dt = dt - 1000;
                 //时间格式化
                 SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm:ss");
                 //获取当前系统时间
                 String time = dateFormat.format(new Date(dt));
                 tv_time_seckill.setText(time);

                 handler.removeMessages(0);
                 //发送消息，不断减时间
                 handler.sendEmptyMessageDelayed(0,1000);
                 if (dt <= 0){
                     //把消息移除
                     handler.removeCallbacksAndMessages(null);
                 }
             }
         };

         public SeckillViewHolder(Context mContext, View itemView) {
             super(itemView);
             this.mContext = mContext;
             //初始化布局控件
             tv_time_seckill = (TextView) itemView.findViewById(R.id.tv_time_seckill);
             tv_more_seckill = (TextView) itemView.findViewById(R.id.tv_more_seckill);
             rv_seckill = (RecyclerView) itemView.findViewById(R.id.rv_seckill);
         }

         public void setData(ResultBeanData.ResultBean.SeckillInfoEntity seckill_info) {
             //得到数据后，就是设置数据（TextView和RecyclerView）的数据
             adapter = new SeckillRecycleViewAdapter(mContext,seckill_info.getList());
             rv_seckill.setAdapter(adapter);

             //设置布局管理器
             rv_seckill.setLayoutManager(new LinearLayoutManager(mContext,LinearLayoutManager.HORIZONTAL,false));
             //设置item的点击事件
             adapter.setOnSeckillRecyclerView(new SeckillRecycleViewAdapter.OnSeckillRecyclerView() {
                 @Override
                 public void onItemClick(int position) {
                     Toast.makeText(mContext,"秒杀"+position,Toast.LENGTH_SHORT).show();
                     startGoodsInfoActivity();
                 }
             });
             //秒杀倒计时-毫秒
             dt = Integer.valueOf(seckill_info.getEnd_time()) - Integer.valueOf(seckill_info.getStart_time());
             //进入后1秒钟就去发送这个消息
             handler.sendEmptyMessageDelayed(0,1000);

         }
     }

　　得到数据了，就是设置数据（TextView和RecyclerView）的数据，首先新建一个item_seckill.xml，代码如下所示：

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

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

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

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

         <TextView
             android:id="@+id/tv_origin_price"
             android:layout_width="100dp"
             android:layout_height="wrap_content"
             android:gravity="center_horizontal"
             android:text="￥288.88"
             android:textColor="#9a9a9a"/>

         <View
             android:layout_width="70dp"
             android:layout_height="1dp"
             android:layout_centerInParent="true"
             android:background="#ffbababa"/>
     </RelativeLayout>
 </LinearLayout>

　　新建一个SeckillRecycleViewAdapter类，代码如下所示：

 package com.nyl.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.TextView;

 import com.bumptech.glide.Glide;
 import com.nyl.shoppingmall.R;
 import com.nyl.shoppingmall.home.bean.ResultBeanData;
 import com.nyl.shoppingmall.utils.Constants;

 import java.util.List;

 /**
  * 秒杀RecycleView的适配器
  */

 public class SeckillRecycleViewAdapter extends RecyclerView.Adapter<SeckillRecycleViewAdapter.ViewHolder>{

     private final Context mContext;
     private final List<ResultBeanData.ResultBean.SeckillInfoEntity.ListBean> list;

     public SeckillRecycleViewAdapter(Context mContext, List<ResultBeanData.ResultBean.SeckillInfoEntity.ListBean> list) {
         this.mContext = mContext;
         this.list = list;
     }

     /**
      * 创建ViewHolder
      * @param parent
      * @param viewType
      * @return
      */
     @Override
     public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         View itemView = View.inflate(mContext, R.layout.item_seckill,null);
         return new ViewHolder(itemView);
     }

     /**
      * 绑定数据
      * @param holder
      * @param position
      */
     @Override
     public void onBindViewHolder(ViewHolder holder, int position) {
         //根据位置得到对应的数据
         ResultBeanData.ResultBean.SeckillInfoEntity.ListBean listBean = list.get(position);
         //绑定数据
         //使用Glide获取到图片数据
         Glide.with(mContext).load(Constants.BASE_URL_IMAGE+listBean.getFigure()).into(holder.iv_figure);
         //获取价钱的数据
         holder.tv_cover_price.setText(listBean.getCover_price());
         //获取降价的数据
         holder.tv_origin_price.setText(listBean.getOrigin_price());
     }

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

     class ViewHolder extends RecyclerView.ViewHolder{

         private ImageView iv_figure;
         private TextView tv_cover_price;
         private TextView tv_origin_price;

         public ViewHolder(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_origin_price = (TextView) itemView.findViewById(R.id.tv_origin_price);

             itemView.setOnClickListener(new View.OnClickListener() {
                 @Override
                 public void onClick(View view) {
                   //  Toast.makeText(mContext,"秒杀=="+getLayoutPosition(),Toast.LENGTH_SHORT).show();
                     if (onSeckillRecyclerView != null){
                         onSeckillRecyclerView.onItemClick(getLayoutPosition());
                     }
                 }
             });
         }
     }
     /**
      * 监听器
      */
     public interface OnSeckillRecyclerView{
         //当某条被点击的时候回调
         public void onItemClick(int position);
     }

     private OnSeckillRecyclerView onSeckillRecyclerView;

     /**
      * 设置item的监听器
      * @param onSeckillRecyclerView
      */
     public void setOnSeckillRecyclerView(OnSeckillRecyclerView onSeckillRecyclerView){
         this.onSeckillRecyclerView = onSeckillRecyclerView;
     }
 }

　　 关于秒杀布局实现就讲到！