使用RecyclerView+CardView实现双向的瀑布流
2016-12-20 本文已影响903人
code小生
首先记录一下昨天的一个好消息，看下图
个人微信公众号原创通知（昨天）.jpg
说明：历时不满40天时间开通了原创功能，在此期间所发文章都是原创，逢周末两天都没有发过文。今天想都没想到下午给了我开通原创通知。好开心！比如赞赏等功能还没有开通，期待中，我的文章都在公众号首发，敬请关注
进入正题：
昨天发的一篇《Android5.0竖向瀑布流RecyclerView+CardView》关于使用RecyclerView实现竖向瀑布流效果，今天给大家介绍横向的效果，并实现回调监听。
一、效果图：
recyclerview双向瀑布流.gif
说明：通过按钮监听设置布局方向，关联不同的item布局，加载不同的数据。其它的都没有啥需要说的。
二、代码
1，首页布局代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp">
<Button
android:id="@+id/btn_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="横向" />
<Button
android:id="@+id/btn_veretical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="竖向" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:background="#eaeaea"
android:padding="5dp" />
</LinearLayout>
说明：两个按钮切换方向，下面就是RecyclerView.
2，首页Java代码
package com.example.mjj.verticalwaterfallfromrecycler;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
/**
* Description：使用RecyclerView+CardView实现竖向的瀑布流效果
* <p>
* Created by Mjj on 2016/12/18.
*/
public class MainActivity extends AppCompatActivity {
private Button btn1, btn2;
private RecyclerView recyclerView;
private RecyclerViewAdapter adapter;
private StaggeredGridLayoutManager layoutManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initView();
}
private void initView() {
setContentView(R.layout.activity_main);
btn1 = (Button) findViewById(R.id.btn_veretical);
btn2 = (Button) findViewById(R.id.btn_horizontal);
recyclerView = (RecyclerView) findViewById(R.id.recycler_main);
layoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
adapter = new RecyclerViewAdapter(MainActivity.this, true);
recyclerView.setAdapter(adapter);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
layoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
adapter = new RecyclerViewAdapter(MainActivity.this, true);
recyclerView.setAdapter(adapter);
adapter.notifyDataSetChanged();
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
layoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);
adapter = new RecyclerViewAdapter(MainActivity.this, false);
recyclerView.setAdapter(adapter);
adapter.notifyDataSetChanged();
}
});
//调用方法,传入一个接口回调
adapter.setItemClickListener(new RecyclerViewAdapter.MyItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(MainActivity.this, "点击了" + position, Toast.LENGTH_SHORT).show();
}
});
}
}
说明：默认显示的竖向布局方式，通过按钮监听切换布局方向；设置了回调监听，需要注意这里的回调只有没有切换方向的时候生效，因为切换方向导致监听对象为空了，这里是为了演示将两种效果放在了一块，实际写的话监听设置没问题。
3，适配器
package com.example.mjj.verticalwaterfallfromrecycler;
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;
/**
* Description：RecyclerView适配器
* <p>
* Created by Mjj on 2016/12/18.
*/
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ListHolder> {
Context context;
boolean flag; // 横竖方向
private MyItemClickListener mItemClickListener;
int iconsV[] = {R.drawable.p1, R.drawable.p2, R.drawable.p3, R.drawable.p4, R.drawable.p5,
R.drawable.p6, R.drawable.p7, R.drawable.p9,
R.drawable.p10, R.drawable.p11, R.drawable.p12, R.drawable.p13, R.drawable.p14,
R.drawable.p15, R.drawable.p16, R.drawable.p17, R.drawable.p18, R.drawable.p19,
R.drawable.p20, R.drawable.p21, R.drawable.p22, R.drawable.p23, R.drawable.p24,
R.drawable.p25, R.drawable.p26, R.drawable.p27, R.drawable.p28, R.drawable.p29,
R.drawable.p30, R.drawable.p31, R.drawable.p32, R.drawable.p33, R.drawable.p34,
R.drawable.p35, R.drawable.p36, R.drawable.p37, R.drawable.p38, R.drawable.p39,
R.drawable.p40, R.drawable.p41, R.drawable.p42, R.drawable.p43, R.drawable.p44};
int iconsH[] = {R.drawable.h1, R.drawable.h2, R.drawable.h3, R.drawable.h4, R.drawable.h5,
R.drawable.h6, R.drawable.h7, R.drawable.h9, R.drawable.h10, R.drawable.h11,
R.drawable.h12, R.drawable.h13, R.drawable.h14, R.drawable.h15, R.drawable.h16,
R.drawable.h17, R.drawable.h18, R.drawable.h19, R.drawable.h20, R.drawable.h21,
R.drawable.h22, R.drawable.h23, R.drawable.h24, R.drawable.h25, R.drawable.h26,
R.drawable.h27, R.drawable.h28, R.drawable.h29, R.drawable.h30, R.drawable.h31,
R.drawable.h32, R.drawable.h33, R.drawable.h34, R.drawable.h35, R.drawable.h36,
R.drawable.h37, R.drawable.h38, R.drawable.h39, R.drawable.h40, R.drawable.h41,
R.drawable.h42, R.drawable.h43, R.drawable.h44};
public RecyclerViewAdapter(Context context, boolean flag) {
this.context = context;
this.flag = flag;
}
@Override
public ListHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = View.inflate(context, flag ? R.layout.staggered_grid_item :
R.layout.staggered_grid_item_h, null);
return new ListHolder(view, mItemClickListener);
}
@Override
public void onBindViewHolder(ListHolder holder, int position) {
holder.setData(position);
}
@Override
public int getItemCount() {
return 100;
}
class ListHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
ImageView icon;
TextView name;
private MyItemClickListener mListener;
public ListHolder(View itemView, MyItemClickListener myItemClickListener) {
super(itemView);
icon = (ImageView) itemView.findViewById(R.id.pic);
name = (TextView) itemView.findViewById(R.id.name);
//将全局的监听赋值给接口
this.mListener = myItemClickListener;
itemView.setOnClickListener(this);
}
public void setData(int position) {
if (flag) {
icon.setImageResource(iconsV[position % iconsV.length]);
} else {
icon.setImageResource(iconsH[position % iconsH.length]);
}
name.setText("This is position " + position);
}
@Override
public void onClick(View view) {
if (mListener != null) {
mListener.onItemClick(view, getPosition());
}
}
}
/**
* 创建一个回调接口
*/
public interface MyItemClickListener {
void onItemClick(View view, int position);
}
/**
* 在activity里面adapter就是调用的这个方法,将点击事件监听传递过来,并赋值给全局的监听
*
* @param myItemClickListener
*/
public void setItemClickListener(MyItemClickListener myItemClickListener) {
this.mItemClickListener = myItemClickListener;
}
}
说明：适配器通过传入的Boolean值来加载不同的布局，关联不同的数据源。
4，引入包
compile 'com.android.support:recyclerview-v7:25.1.0'
compile 'com.android.support:cardview-v7:25.1.0'
三、尾言
源码已上传至github，链接在公众号里。
个人提供的交流学习平台：
1.微信公众号：code小生
2.Android成长群：481794398
3.简述投稿专题：Android开发资源经验分享
