手機商城第五天，用recyclerview設置秒殺區域的布局,以及為該recyclerview設置item級的點擊事件
阿新 • • 發佈：2017-08-29
手機商城第五天 用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級的點擊事件