之前的清單更多的是用Listview和GridView,很少使用RecycleView,導緻使用擴充卡謝了很多代碼,并且在處理item的子控件的點選事件的時候顯得捉襟見肘,總是會有各種問題,但是RecycleView卻又不像LIstview和GridView那樣可以很友善的這是item的間距,關于這個問題下邊也給出了很簡單的方案,親測完全實作,這樣RecycleView就完勝了ListView和GridView,現在主要解決item中子控件的點選事件,如下圖所示:需求就是點選item中的圖檔進入詳情頁,點選右下角圖檔更換一張圖檔
這裡要實作卡片效果就可以給item的根部局使用cardview,通過設定z軸方向的陰影實作卡片效果
先說不帶陰影效果的item布局
<?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="250dp"
android:background="@color/white"
android:descendantFocusability="afterDescendants"
android:layout_marginBottom="@dimen/ali_auth_space_10"
android:layout_marginLeft="@dimen/ali_auth_space_10"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:background="@color/white"
android:gravity="center">
<ImageView
android:id="@+id/iv_shopImgitem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@color/line_bg_color"
android:scaleType="centerCrop"
android:src="@drawable/default_img" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:background="@color/white">
<ImageView
android:id="@+id/iv_zuo"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="@color/shopdivide" />
<ImageView
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="@color/shopdivide" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="@color/shopdivide" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/margin_5dp"
android:layout_marginRight="1dp"
android:layout_toRightOf="@id/iv_zuo"
android:background="@color/white"
android:layout_marginBottom="1dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_shopName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:singleLine="true"
android:text="商品名稱"
android:textColor="@color/tab_text_color"
android:textSize="@dimen/text_size_hint" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="15dp"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:src="@drawable/jifenbi" />
<TextView
android:id="@+id/tv_needJifen"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/margin_5dp"
android:gravity="center_vertical"
android:text="200"
android:textColor="@color/shoptextcolor"
android:textSize="@dimen/text_size_middle" />
<TextView
android:id="@+id/tv_price_yuan"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="¥218"
android:textColor="@color/text_color_summery"
android:textSize="@dimen/text_size_hint" />
<RelativeLayout
android:id="@+id/ll_love"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="1dp"
android:layout_height="18dp"
android:layout_centerInParent="true"
android:background="@color/div_color" />
<ImageView
android:id="@+id/iv_love"
android:layout_width="23dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="@dimen/margin_5dp"
android:scaleType="centerInside"
android:src="@drawable/like" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
如果需要卡片陰影效果,就把上述根部局LinerLayout改成CardView
但使用之前在build。gridle中需要添加依賴
compile ‘com.android.support:cardview-v7:25.0.0’
方法如下:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="160dp"
android:layout_height="200dp"
android:layout_margin="1dp"
android:padding="4dp"
app:cardCornerRadius="2dp"
app:cardElevation="4dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
、、、
至此item布局就完成了,這裡補充一下Cardview中的其他參數
app:cardBackgroundColor這是設定背景顔色
app:cardCornerRadius這是設定圓角大小
app:cardElevation這是設定z軸的陰影
app:cardMaxElevation這是設定z軸的最大高度值
app:cardUseCompatPadding是否使用CompatPadding
app:cardPreventCornerOverlap是否使用PreventCornerOverlap
app:contentPadding 設定内容的padding
app:contentPaddingLeft 設定内容的左padding
app:contentPaddingTop 設定内容的上padding
app:contentPaddingRight 設定内容的右padding
app:contentPaddingBottom 設定内容的底padding
然後就是寫擴充卡,填充item中的資料
添加Recycle和BaseQuickAdapter依賴:
compile 'com.android.support:recyclerview-v7:25.0.0-alpha1'
compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.0'
repositories {
、、、
maven { url "https://jitpack.io" }這個也要添加
}
自定義BaseQuickAdapter的類,這裡就不像之前寫的那麼複雜還要複用,直接暴力加載item指派,注意不要導錯包,
package com.lab.web.adapter;
import android.content.Context;
import android.graphics.Paint;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.squareup.picasso.Picasso;
import java.util.List;
import java.util.Map;
import lab.tonglu.com.hybriddemo.R;
/**
* Created by YTF on 2017/9/11.
*/
public class RvAdapter extends BaseQuickAdapter<Map<String, Object>, BaseViewHolder> {
private Context context;
private ImageView view;
public RvAdapter(int layoutResId, List<Map<String, Object>> data, Context context) {
super(layoutResId, data);
this.context = context;
}
@Override
protected void convert(BaseViewHolder helper, Map<String, Object> item) {
view = helper.getView(R.id.iv_shopImgitem);
// helper.setImageUrl();
Picasso.with(context)
.load((String) item.get("shopImg"))
.fit()
.placeholder(R.drawable.default_img)
.into(view);
helper.setText(R.id.tv_shopName, (CharSequence) item.get("shopName"))
.setText(R.id.tv_needJifen,String.valueOf(item.get("jifen")) )
.setText(R.id.tv_newPrice, String.valueOf(item.get("buprice")) )
.setText(R.id.tv_price_yuan, "¥" + String.valueOf(item.get("price")))
.setImageResource(R.id.iv_love,R.drawable.like);
TextView textView = helper.getView(R.id.tv_price_yuan);
textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);//添加删除線
helper.addOnClickListener(R.id.ll_love);
helper.addOnClickListener(R.id.iv_love);
helper.addOnClickListener(R.id.iv_shopImgitem);
//上述操作就是直接給item子控件添加點選事件,至于處理,在acvitity中執行,向下看
}
}
接下來就是使用RecycleView展示資料了,依賴上邊已經加過了,acvitity布局檔案在需要位置添加RecycleView控件,加上id即可:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/marginjianju_10dp"
android:layout_marginTop="@dimen/marginjianju_10dp"
android:background="@color/shopbg">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
至于上邊為何RecycleView要用一個相對布局包括給大家解釋一下,雖然看着沒有必要,但其實這樣做是為了給RecycleView添加橫向和縱向間距用的,上邊item的根布局你也會看到添加了左邊距和下邊距,因為網上有很多用代碼單獨給RecycleView添加分割線或者間距很是麻煩,并且不一定有效果,這樣利用item和根部局的色差就可以簡單完整的實作,如果沒有色差,有了間距後再用ImageView填充也是一樣效果
最後一步:展示圖檔,添加item子控件點選事件
recycleview= (RecyclerView) findViewById(R.id.recycleview);
recycleview.addOnItemTouchListener(new OnItemChildClickListener() {
@Override
public void onSimpleItemChildClick(BaseQuickAdapter adapter, View view, int position) {
}
@Override
public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
super.onItemChildClick(adapter, view, position);
int itemViewId = view.getId();
mapItem=list_hot.get(position);
imageViewLove= (ImageView) view.findViewById(R.id.iv_love);
switch (itemViewId) {
case R.id.iv_shopImgitem:
String imgURL= (String) mapItem.get("shopImg");
Intent intentShop=new Intent(context,DaiFuKuanActivity.class);
intentShop.putExtra("url_huo",imgURL);
startActivity(intentShop);
break;
case R.id.ll_love:
if (ifLike){
imageViewLove.setImageResource(R.drawable.like);
ifLike=false;
}else {
imageViewLove.setImageResource(R.drawable.star);
ifLike=true;
}
break;
case R.id.iv_love:
if (ifLike){
imageViewLove.setImageResource(R.drawable.like);
ifLike=false;
}else {
imageViewLove.setImageResource(R.drawable.star);
ifLike=true;
}
break;
}
}
});
GridLayoutManager manager = new GridLayoutManager(this, );
recycleview.setLayoutManager(manager);
rvAdapter = new RvAdapter(R.layout.hot_recommend_item, list_hot,this);
recycleview.setAdapter(rvAdapter);
至此完全搞定