界面无小事(二): 让RecyclerView展示更多不同视图

简介: 界面无小事(一): RecyclerView+CardView了解一下界面无小事(二): 让RecyclerView展示更多不同视图界面无小事(三):用RecyclerView + Toolbar做个文件选择器界面无小事(四):来写个滚动选择器吧!界面...

界面无小事(一): RecyclerView+CardView了解一下
界面无小事(二): 让RecyclerView展示更多不同视图
界面无小事(三):用RecyclerView + Toolbar做个文件选择器
界面无小事(四):来写个滚动选择器吧!
界面无小事(五):自定义TextView
界面无小事(六):来做个好看得侧拉菜单!

目录

  • 前言
  • GridLayoutManager的使用
  • Glide加载图片
  • 让RecyclerView支持更多不同布局
  • 来看看横向滚动
  • 还有瀑布流
  • 最后

前言

之前设置布局的时候用了最简单的LinearLayoutManager, 而且是单一布局, 这次来感受下GridLayoutManager和瀑布流以及多布局.


GridLayoutManager的使用

比起LinearLayoutManager, GridLayoutManager可以适用的场景就更多了. 来看一段代码:

RecyclerView rvTest = (RecyclerView) findViewById(R.id.rv_test);
//rvTest.setLayoutManager(new LinearLayoutManager(this));

final GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
rvTest.setLayoutManager(gridLayoutManager);

final MyRVAdapter myRVAdapter = new MyRVAdapter(this);

if (gridLayoutManager != null) {
    gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            if (position == 0
                    || position == 4
                    || position == (myRVAdapter.getItemCount() - 1)) {
                return gridLayoutManager.getSpanCount();
            } else {
                return 1;
            }
        }
    });
}

rvTest.setAdapter(myRVAdapter);

将原本的LinearLayoutManager替换为GridLayoutManager, 并将0和4以及最后一个条目设置为填充父容器. 来看看效果图:

效果图
效果图

Glide加载图片

这是谷歌推荐的一个图片加载库. 我个人的评价就是, 异常强大, 可以满足各种花式加载. 而这里我们只是简单用一下, 不细说.
在构建当中加入:

compile 'com.github.bumptech.glide:glide:3.7.0'

使用类似:Glide.with(context).load(R.drawable.pic).centerCrop().into(imageView);加载即可. 第一个参数是上下文, 第二个参数是图片资源, 第三个参数是ImageView控件.


让RecyclerView支持更多不同布局

快速写一个带图布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cv_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:foreground="@drawable/card_foreground"
    card_view:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/iv_test"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/tv_test"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp" />
    </LinearLayout>

</android.support.v7.widget.CardView>

getItemViewType用来设置视图的类型. 这里我们把0, 4, 和最后一个设置为图片型. 和之前在GridLayoutManager中设置填充父容器的position一样.

public enum ITEM_TYPE {
    ITEM_TYPE_IMAGE,
    ITEM_TYPE_TEXT
}

private int[] mImageId = {R.drawable.test, R.drawable.test2, R.drawable.test3};
@Override
public int getItemViewType(int position) {
    if (position == 0 || position == 4 || position == (getItemCount() - 1)) {
        return ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal();
    } else {
        return ITEM_TYPE.ITEM_TYPE_TEXT.ordinal();
    }
}

添加一个新的viewHolder:

public static class MyTVHolder extends RecyclerView.ViewHolder {
    TextView mTextView;

    public MyTVHolder(View itemView) {
        super(itemView);
        mTextView = (TextView) itemView.findViewById(R.id.tv_test);
    }
}

public static class MyIVHolder extends RecyclerView.ViewHolder {
    TextView mTextView;
    ImageView mImageView;

    MyIVHolder(View view) {
        super(view);
        mTextView = (TextView) view.findViewById(R.id.tv_test);
        mImageView = (ImageView) view.findViewById(R.id.iv_test);
    }
}

然后就是修改onCreateViewHolder和onBindViewHolder部分, 区别处理文字item带图item, 顺带一提, 类上继承的RecyclerView.Adapter的泛型要变更, public class MyRVAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>:

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal()) {
        return new MyIVHolder(mLayoutInflater.inflate(R.layout.rv_image_item, parent, false));
    } else {
        return new MyTVHolder(mLayoutInflater.inflate(R.layout.rv_item, parent, false));
    }
}
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {

    if (holder instanceof MyTVHolder) {
        ((MyTVHolder) holder).mTextView.setText(mArray[position]);
    } else if (holder instanceof MyIVHolder) {
        Glide.with(mContext)
                .load(mImageId[position % 3])
                .centerCrop()
                .into(((MyIVHolder) holder).mImageView);
        ((MyIVHolder) holder).mTextView.setText(mArray[position]);
    }

    if (mOnItemClickListener != null) {
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int pos = holder.getLayoutPosition();
                mOnItemClickListener.onItemClick(holder.itemView, pos);
            }
        });
        holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                int pos = holder.getLayoutPosition();
                mOnItemClickListener.onItemLongClick(holder.itemView, pos);
                return false;
            }
        });
    }
}

其实目的就是根据getItemViewType的设置加载不同布局. 来看看效果图:

不同布局加载
不同布局加载

来看看横向滚动

一行代码足矣:
gridLayoutManager.setOrientation(GridLayoutManager.HORIZONTAL);

横着滚
横着滚

还有瀑布流

对, 还有瀑布流. 记得注释掉GridLayoutManager设置宽度那部分.

StaggeredGridLayoutManager layoutManager
                = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        rvTest.setLayoutManager(layoutManager);
瀑布流
瀑布流

最后

这是第二篇的全部内容, 感兴趣的还有第三篇哦, 或者你还没有看第一篇如果喜欢记得点赞或者关注我哦.


目录
相关文章
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(1)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
282 0
|
6月前
|
XML 前端开发 Java
Android App开发图像加工中卡片视图CardView和给图像添加装饰的讲解以及实战(附源码 简单易懂)
Android App开发图像加工中卡片视图CardView和给图像添加装饰的讲解以及实战(附源码 简单易懂)
238 0
不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefreshLayout+ViewPager+RecyclerView
不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefreshLayout+ViewPager+RecyclerView
248 0
|
6月前
|
存储 缓存 Android开发
构建高效的Android应用:采用RecyclerView优化列表显示
【4月更文挑战第2天】 在移动开发领域,列表显示是最常见的用户界面组件之一。对于Android平台而言,RecyclerView因其高效、灵活的特点而备受开发者青睐。本文将深入探讨如何利用RecyclerView在Android应用中实现流畅的列表滚动,以及通过各种优化策略来提升性能和用户体验。我们将从基本概念出发,逐步展开如何自定义适配器、视图持有者,以及利用布局管理器来实现复杂的列表布局。此外,还将讨论如何通过异步加载、缓存机制和动态数据更新来进一步优化性能。
89 1
|
6月前
使用ListView控件展示数据
使用ListView控件展示数据
|
前端开发 数据处理 Swift
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(3)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
118 0
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(2)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
71 0
|
Android开发
安卓中listview点击每一条进入不同界面
安卓中listview点击每一条进入不同界面
110 0
|
Android开发 Windows
weditor, 布局分析, 查看控件信息
weditor, 布局分析, 查看控件信息
494 0
|
XML Android开发 数据格式
《Activity显示界面历险记》
大家新年好,趁过年偷了个懒,现在恢复更新了。
103 0
《Activity显示界面历险记》