美文网首页Android开发安卓RecycleViewAndroid 开发技术分享
使用RecyclerView+CardView实现双向的瀑布流

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

作者: code小生 | 来源:发表于2016-12-20 10:12 被阅读903次

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

    个人微信公众号原创通知（昨天）.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开发资源经验分享

    相关文章

      网友评论

      • 黑白咖:签到
      • 皇马船长:瀑布流效果是怎么出来的 ？
        我看有些demo是在adapter 动态设置item 的高度，来实现瀑布流效果的。
        你这是是因为图片大小不一吗 ？

      本文标题：使用RecyclerView+CardView实现双向的瀑布流

      本文链接：https://www.haomeiwen.com/subject/mvyxvttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      Android开发

      安卓RecycleView

      Android 开发技术分享

      Android知识点和文章分享

      Android进阶之旅

      Android知识

      Android开发

      Android技术知识

      关于我们|服务条款|联系我们|使用RecyclerView+CardView实现双向的瀑布流|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！