用RecyclerView+CardView实现 商城首页
2016-06-26 13:26
316 查看
商城首页用来展示热门活动的View,偶数和奇数 位上的View不同。
1)CardView,扩展 FrameLayout 类别并让您能够显示卡片内的信息,这些信息在整个平台中拥有一致的呈现方式。CardView 小组件可拥有阴影和圆角。
2)实现步骤
①添加依赖
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
②加入RecyclerView布局,得到RecyclerView实例,通过网络操作得到数据源,都与前面相同
③实现Adapter
public class HomeCatgoryAdapter extends RecyclerView.Adapter<HomeCatgoryAdapter.ViewHolder> {
private List<HomeCampaign> mDatas;
private Context mContext;
public HomeCatgoryAdapter(List<HomeCampaign> datas, Context context){
mDatas = datas;
this.mContext = context;
}
private OnCampaignClickListener mListener;
public void setOnCampaignClickListener(OnCampaignClickListener listener){
this.mListener = listener;
}
public interface OnCampaignClickListener{
void onClick(View view, Campaign campaign);
}
private static int VIEW_TYPE_L=0;
private static int VIEW_TYPE_R=1;
private LayoutInflater mInflater;
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {
mInflater = LayoutInflater.from(viewGroup.getContext());
if(type == VIEW_TYPE_R){
return new ViewHolder(mInflater.inflate(R.layout.template_home_cardview2,viewGroup,false));
}
return new ViewHolder(mInflater.inflate(R.layout.template_home_cardview,viewGroup,false));
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
HomeCampaign homeCampaign = mDatas.get(i);
viewHolder.textTitle.setText(homeCampaign.getTitle());
Picasso.with(mContext).load(homeCampaign.getCpOne().getImgUrl()).into(viewHolder.imageViewBig);
Picasso.with(mContext).load(homeCampaign.getCpTwo().getImgUrl()).into(viewHolder.imageViewSmallTop);
Picasso.with(mContext).load(homeCampaign.getCpThree().getImgUrl()).into(viewHolder.imageViewSmallBottom);
}
@Override
public int getItemCount() {
return mDatas.size();
}
@Override
public int getItemViewType(int position) {
if(position % 2==0){
return VIEW_TYPE_R;
}
else return VIEW_TYPE_L;
}
class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
TextView textTitle;
ImageView imageViewBig;
ImageView imageViewSmallTop;
ImageView imageViewSmallBottom;
public ViewHolder(View itemView) {
super(itemView);
textTitle = (TextView) itemView.findViewById(R.id.text_title);
imageViewBig = (ImageView) itemView.findViewById(R.id.imgview_big);
imageViewSmallTop = (ImageView) itemView.findViewById(R.id.imgview_small_top);
imageViewSmallBottom = (ImageView) itemView.findViewById(R.id.imgview_small_bottom);
imageViewBig.setOnClickListener(this);
imageViewSmallTop.setOnClickListener(this);
imageViewSmallBottom.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if(mListener !=null){
anim(v);
}
}
private void anim(final View v){
ObjectAnimator animator = ObjectAnimator.ofFloat(v, "rotationX", 0.0F, 360.0F)
.setDuration(200);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
HomeCampaign campaign = mDatas.get(getLayoutPosition());
switch (v.getId()){
case R.id.imgview_big:
mListener.onClick(v, campaign.getCpOne());
break;
case R.id.imgview_small_top:
mListener.onClick(v, campaign.getCpTwo());
break;
case R.id.imgview_small_bottom:
mListener.onClick(v,campaign.getCpThree());
break;
}
}
});
animator.start();
}
}
}
④实例化Adapter,设置监听器,将RecyclerView与dapter绑定
mAdatper = new HomeCatgoryAdapter(homeCampaigns,getActivity());
mAdatper.setOnCampaignClickListener(new HomeCatgoryAdapter.OnCampaignClickListener() {
@Override
public void onClick(View view, Campaign campaign) {
Toast.makeText(getContext(), "clicked", Toast.LENGTH_LONG).show();
Intent intent = new Intent(getActivity(), WareListActivity.class);
intent.putExtra(Contants.COMPAINGAIN_ID,campaign.getId());
startActivity(intent);
}
});
mRecyclerView.setAdapter(mAdatper);
⑤自定义ItemDocoration
public class CardViewtemDecortion extends RecyclerView.ItemDecoration {
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int layoutOrientation = getOrientation(parent);
if (layoutOrientation == LinearLayoutManager.VERTICAL) {
outRect.top = 10;
outRect.left=5;
outRect.right=5;
} else if(layoutOrientation == LinearLayoutManager.HORIZONTAL) {
outRect.left = 5;
}
}
private int getOrientation(RecyclerView parent) {
if (parent.getLayoutManager() instanceof LinearLayoutManager) {
LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
return layoutManager.getOrientation();
} else throw new IllegalStateException("DividerItemDecoration can only be used with a LinearLayoutManager.");
}
}
⑥将自定义ItemDocoration传入RecyclerView中
mRecyclerView.addItemDecoration(new CardViewtemDecortion());
⑦为RecyclerView传入布局管理器
mRecyclerView.setLayoutManager(new LinearLayoutManager(this.getActivity()));
⑧RecyclerView中每个Item的布局为:
<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_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#fff"
app:contentPadding="10dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
......
</LinearLayout>
</android.support.v7.widget.CardView>
1)CardView,扩展 FrameLayout 类别并让您能够显示卡片内的信息,这些信息在整个平台中拥有一致的呈现方式。CardView 小组件可拥有阴影和圆角。
2)实现步骤
①添加依赖
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
②加入RecyclerView布局,得到RecyclerView实例,通过网络操作得到数据源,都与前面相同
③实现Adapter
public class HomeCatgoryAdapter extends RecyclerView.Adapter<HomeCatgoryAdapter.ViewHolder> {
private List<HomeCampaign> mDatas;
private Context mContext;
public HomeCatgoryAdapter(List<HomeCampaign> datas, Context context){
mDatas = datas;
this.mContext = context;
}
private OnCampaignClickListener mListener;
public void setOnCampaignClickListener(OnCampaignClickListener listener){
this.mListener = listener;
}
public interface OnCampaignClickListener{
void onClick(View view, Campaign campaign);
}
private static int VIEW_TYPE_L=0;
private static int VIEW_TYPE_R=1;
private LayoutInflater mInflater;
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {
mInflater = LayoutInflater.from(viewGroup.getContext());
if(type == VIEW_TYPE_R){
return new ViewHolder(mInflater.inflate(R.layout.template_home_cardview2,viewGroup,false));
}
return new ViewHolder(mInflater.inflate(R.layout.template_home_cardview,viewGroup,false));
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
HomeCampaign homeCampaign = mDatas.get(i);
viewHolder.textTitle.setText(homeCampaign.getTitle());
Picasso.with(mContext).load(homeCampaign.getCpOne().getImgUrl()).into(viewHolder.imageViewBig);
Picasso.with(mContext).load(homeCampaign.getCpTwo().getImgUrl()).into(viewHolder.imageViewSmallTop);
Picasso.with(mContext).load(homeCampaign.getCpThree().getImgUrl()).into(viewHolder.imageViewSmallBottom);
}
@Override
public int getItemCount() {
return mDatas.size();
}
@Override
public int getItemViewType(int position) {
if(position % 2==0){
return VIEW_TYPE_R;
}
else return VIEW_TYPE_L;
}
class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
TextView textTitle;
ImageView imageViewBig;
ImageView imageViewSmallTop;
ImageView imageViewSmallBottom;
public ViewHolder(View itemView) {
super(itemView);
textTitle = (TextView) itemView.findViewById(R.id.text_title);
imageViewBig = (ImageView) itemView.findViewById(R.id.imgview_big);
imageViewSmallTop = (ImageView) itemView.findViewById(R.id.imgview_small_top);
imageViewSmallBottom = (ImageView) itemView.findViewById(R.id.imgview_small_bottom);
imageViewBig.setOnClickListener(this);
imageViewSmallTop.setOnClickListener(this);
imageViewSmallBottom.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if(mListener !=null){
anim(v);
}
}
private void anim(final View v){
ObjectAnimator animator = ObjectAnimator.ofFloat(v, "rotationX", 0.0F, 360.0F)
.setDuration(200);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
HomeCampaign campaign = mDatas.get(getLayoutPosition());
switch (v.getId()){
case R.id.imgview_big:
mListener.onClick(v, campaign.getCpOne());
break;
case R.id.imgview_small_top:
mListener.onClick(v, campaign.getCpTwo());
break;
case R.id.imgview_small_bottom:
mListener.onClick(v,campaign.getCpThree());
break;
}
}
});
animator.start();
}
}
}
④实例化Adapter,设置监听器,将RecyclerView与dapter绑定
mAdatper = new HomeCatgoryAdapter(homeCampaigns,getActivity());
mAdatper.setOnCampaignClickListener(new HomeCatgoryAdapter.OnCampaignClickListener() {
@Override
public void onClick(View view, Campaign campaign) {
Toast.makeText(getContext(), "clicked", Toast.LENGTH_LONG).show();
Intent intent = new Intent(getActivity(), WareListActivity.class);
intent.putExtra(Contants.COMPAINGAIN_ID,campaign.getId());
startActivity(intent);
}
});
mRecyclerView.setAdapter(mAdatper);
⑤自定义ItemDocoration
public class CardViewtemDecortion extends RecyclerView.ItemDecoration {
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
int layoutOrientation = getOrientation(parent);
if (layoutOrientation == LinearLayoutManager.VERTICAL) {
outRect.top = 10;
outRect.left=5;
outRect.right=5;
} else if(layoutOrientation == LinearLayoutManager.HORIZONTAL) {
outRect.left = 5;
}
}
private int getOrientation(RecyclerView parent) {
if (parent.getLayoutManager() instanceof LinearLayoutManager) {
LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
return layoutManager.getOrientation();
} else throw new IllegalStateException("DividerItemDecoration can only be used with a LinearLayoutManager.");
}
}
⑥将自定义ItemDocoration传入RecyclerView中
mRecyclerView.addItemDecoration(new CardViewtemDecortion());
⑦为RecyclerView传入布局管理器
mRecyclerView.setLayoutManager(new LinearLayoutManager(this.getActivity()));
⑧RecyclerView中每个Item的布局为:
<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_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#fff"
app:contentPadding="10dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
......
</LinearLayout>
</android.support.v7.widget.CardView>
相关文章推荐
- 亦大自学51cto ——H3C交换机配置自传2
- python - 类的属性
- java排序练习
- Ubuntu 下ibus拼音输入法启用 (ubuntu 16.04
- 自定义SlideBar
- DOM
- Cache应用中的服务过载案例研究
- Java面试总结
- nrf52-添加定时任务
- 创建sh文件
- ios 真机调试时出现CopyPngFile error解决方法
- ACM:蓝桥杯:独木舟上的旅行
- python 并行开发
- 初识STL
- JAVA笔记-类的初始化及对象的初始化
- 安卓开发之TypedValue.applyDimension的使用
- SlidingMenu左右侧划的实现
- 怎么区分有符号数和无符号数
- 四层负载均衡和七层负载均衡的区别
- GCD多线程开发