使用RecyclerView+CardView实现双向的瀑布流

首先记录一下昨天的一个好消息,看下图

个人微信公众号原创通知(昨天).jpg

说明:历时不满40天时间开通了原创功能,在此期间所发文章都是原创,逢周末两天都没有发过文。今天想都没想到下午给了我开通原创通知。好开心!比如赞赏等功能还没有开通,期待中,我的文章都在公众号首发,敬请关注

进入正题:
昨天发的一篇《Android5.0竖向瀑布流RecyclerView+CardView》关于使用RecyclerView实现竖向瀑布流效果,今天给大家介绍横向的效果,并实现回调监听。

一、效果图:

recyclerview双向瀑布流.gif

说明:通过按钮监听设置布局方向,关联不同的item布局,加载不同的数据。其它的都没有啥需要说的。

二、代码

1,首页布局代码




    

        

说明:两个按钮切换方向,下面就是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实现竖向的瀑布流效果
 * 

* 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适配器
 * 

* Created by Mjj on 2016/12/18. */ public class RecyclerViewAdapter extends RecyclerView.Adapter { 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开发资源经验分享

你可能感兴趣的:(使用RecyclerView+CardView实现双向的瀑布流)