安卓开发之用RecyclerView做陈列式布局

一、使用RecyclerView要先导入recyclerview-v7库
二、在layout文件夹内，新建一个xml文件，编写你要展示的item的样式
三、在你要展示的页面上，插入你编写recycleview
四、在活动程序单元内编写对应的适配器

哈哈哈，好久没写东西了，先看看效果图吧，做成了gif的，用初中语文老师教的就是，更加形象生动了！！！哈哈，我真是个小机灵鬼。

就是类似淘宝商品浏览的界面，我是参照小红书的哈哈哈，我简直太爱小红书的交互设计了kakaka！！清晰明了，简直不能再爱了哈哈哈，hh好像跑偏了，来，回正题，咳咳

直接看代码点这里

ennn，其实一开始我是不知道这种界面效果叫做陈列式布局，然后网上搜了好多仿淘宝商品的，都是写的商品详情页，然后决定自己写一写，发现意外的简单哈哈哈，RecyclerView简直不能再爱了（我好像一个渣男？？见一个爱一个哈哈哈）

简单介绍一下Recyclerview吧（其实我并没有很懂哈哈哈~~~）（所以，以下部分来自摘抄hhh）

不想看的可以直接跳后面代码

RecyclerView是安卓5.0之后提供的用于**在有限的窗口范围内显示大量数据的控件**。
（就是类似你逛淘宝的时候，那些商品都是以一块一块的，一个item一个item这样展示出来的，那部分就是用RecyclerView做出来的，简单说来就是以列表的形式展示出来。）
另外还有一种也是用于以列表形式展示数据的是ListView，但是ListView没有RecyclerView那么灵活，具体区别如下

【1】展示效果
ListView只能展示竖直的列表效果。
RecyclerView可以展示更多的界面效果，如横向、竖向的列表效果，瀑布流效果、GridView的效果，这些效果主要是通过LayoutManager类来实现的。（我写的陈列式布局采用的就是GridView表格的效果实现的。）

【2】适配器
ListView主要有三种常用的数据适配器，BaseAdapter、SimpleAdapter、ArrayAdapter（具体不写了，写不动了，老娘乏了，大家感兴趣的可以去请度娘喝杯茶hh）
RecyclerView使用RecyclerView.Adapter适配器，该适配器将BaseAdapter中的getView（）方法拆分为onCreateViewHolder（）方法和onBindViewHolder（）方法，强制使用ViewHolder类，式代码编写规范化，避免了初学者写的代码性能不佳。

【3】复用效果
ListView复用item对象的工作需要开发者通过convertView的setTag（）方法和getTag（）方法进行操作。
RecyclerView复用item对象的工作由控件自己实现。

【4】动画效果
RecyclerView可以通过setItemAnimator（）方法为item添加动画效果。
ListView不可以通过该方法为item添加动画效果。

ok，进入正题！！

一、使用RecyclerView要先导入recyclerview-v7库

二、在layout文件夹内，新建一个xml文件，编写你要展示的item的样式

名字随便起，怎么开心怎么起hhh，不过不能出现大写字母和中文(不过还是建议起名规范一点）

这个展示出来的就是你单独一个item的样子，我的预览图长这样

我的代码如下

<?xml version="1.0" encoding="utf-8"?>
<!--这个background引用的是另外写的一个设置背景效果为圆角的xml文件，我前面的文章有写过，有兴趣的可以看看-->
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:background="@drawable/home_item_shape"><!--图片或视频区域，这个地方我还没改好，我的item背景是设置成圆角的，但是这里图片显示的时候盖住了那个圆角，所以显示出来的是直角，后面有时间再改改--><ImageViewandroid:id="@+id/home_item_img"android:layout_width="200dp"android:layout_height="200dp" /><!--标题区域,最大行数为2--><TextViewandroid:id="@+id/home_item_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="8dp"android:layout_marginRight="8dp"android:maxLines="2"android:text="标题"android:textColor="#333"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!--头像图片，这个CricleImageView是另写的一个类继承自ImageView，用来实现圆形的图片效果和缩放效果的--><com.example.dumb.CircleImageViewandroid:id="@+id/home_item_head"android:layout_width="30dp"android:layout_height="30dp"android:layout_margin="8dp"android:src="@drawable/user"android:scaleType="centerCrop"android:layout_gravity="center"/><!--昵称区域--><TextViewandroid:id="@+id/home_item_username"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="阿呆"android:textSize="12sp"android:textColor="#333333"/><!--点赞区域--><LinearLayoutandroid:id="@+id/home_item_good"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginRight="8dp"android:orientation="vertical"android:layout_gravity="top"android:gravity="right"><ImageViewandroid:layout_width="30dp"android:layout_height="25dp"android:src="@drawable/good_unchecked"/><TextViewandroid:layout_width="25dp"android:layout_height="wrap_content"android:gravity="center"android:text="123"android:textSize="10dp"android:textColor="#333"/></LinearLayout></LinearLayout>
</LinearLayout>

三、在你要展示的页面上，插入你编写recycleview

插入部分代码如下（就是插入RecyclerView控件，没有什么神奇的地方hhh）

<androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/home_item"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginRight="2.5dp"android:layout_weight="1"/>

简单来说就是，把你写的RecyclerView作为一个控件写进去，和其他控件一样设置样式

全部代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="#fff"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:layout_marginTop="10dp"><!--发现--><TextViewandroid:id="@+id/found"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="30dp"android:text="发现"android:textSize="20sp"android:textColor="#333333"/><!--附近--><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="30dp"android:layout_toRightOf="@+id/found"android:text="附近"android:textSize="20sp"android:textColor="#333333"/></RelativeLayout><!--消息图标--><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:layout_alignParentRight="true"android:src="@drawable/message"android:layout_marginRight="10dp"android:layout_marginTop="8dp"android:layout_marginBottom="2dp"/></RelativeLayout><!--搜索栏--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:background="@drawable/home_search_item_shape"android:layout_marginTop="5dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"><!--搜索图标--><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:src="@drawable/search"android:layout_marginTop="4dp"android:layout_marginBottom="2dp"android:layout_marginLeft="8dp"/><!--搜索--><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:hint="搜索"android:background="@null"android:textColorHint="#aaa"/><!--background=none用于隐藏下划线--></LinearLayout><!--直线--><Viewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:layout_marginTop="5dp"android:background="#333333"/><!--中间存放item，这个RelativeLayout是为了展示item的地方占满屏，把菜单栏挤到最底端--><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:background="#f2f2f2"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/home_item"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginRight="2.5dp"android:layout_weight="1"/></RelativeLayout><!--底部菜单栏的直线--><Viewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:background="#333"android:layout_gravity="bottom"/><!--底部菜单栏--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!--首页--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="bottom"android:orientation="vertical"><!--首页图标--><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_gravity="center"android:src="@drawable/home_checked"/><!--首页文字--><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="首页"android:textSize="14sp"android:textColor="#F24A47"android:gravity="center"/></LinearLayout><!--打卡--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="bottom"android:orientation="vertical"><!--打卡图标--><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_gravity="center"android:src="@drawable/clock_unchecked"/><!--打卡文字--><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="打卡"android:textSize="14sp"android:textColor="#333333"android:gravity="center"/></LinearLayout><!--编辑--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><!--编辑图标--><ImageViewandroid:layout_width="60dp"android:layout_height="55dp"android:layout_gravity="bottom"android:layout_marginLeft="25dp"android:src="@drawable/edit"/></LinearLayout><!--社区--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="bottom"android:orientation="vertical"><!--社区图标--><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_gravity="center"android:src="@drawable/community_unchecked"/><!--社区文字--><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="社区"android:textSize="14sp"android:textColor="#333"android:gravity="center"/></LinearLayout><!--我--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:layout_gravity="bottom"android:orientation="vertical"><!--我图标--><ImageViewandroid:layout_width="25dp"android:layout_height="25dp"android:layout_gravity="center"android:src="@drawable/mine_unchecked"/><!--我文字--><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="我"android:textSize="14sp"android:textColor="#333"android:gravity="center"/></LinearLayout></LinearLayout>
</LinearLayout>

然后这个xml文件的预览图效果长这样，蓝色框框选中的位置，就是写好的RecyclerView控件

四、在活动程序单元内编写对应的适配器

因为是item嘛，肯定有很多数据的，所以要给这个RecyclerView设置一个适配器，用来显示不同的数据。

我只是测试，所以直接写在MainActivity了，只写了5个测试的item数据，比较简单hhh，注释我应该写的挺清楚的了，所以不多说了，看代码呀hh

package com.example.dumb;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;import android.graphics.Rect;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;public class MainActivity extends AppCompatActivity {private int space=5;//设置RecyclerView控件的item的上下间距//要展示的对应item的数据，imgs是上方的图片/视图//titles是标题，headsIcon是头像，username是用户名private int[] imgs={R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img4};private String[] titles={"电影\n看书的女人","阿呆的沙雕绘画","帅猫","夕阳下的教学楼","看不见的"};private int[] headsIcon={R.drawable.user,R.drawable.files_txt,R.drawable.add_friends,R.drawable.clock_unchecked,R.drawable.community_unchecked};private String[] usernames={"阿呆","Wacke","肉团","加密","ajia"};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.home);//设置刚写的xml文件页面HomeAdapter homeAdapter=new HomeAdapter();//创建适配器对象RecyclerView recyclerView1=findViewById(R.id.home_item);//创建recyclerView对象，并初始化其xml文件recyclerView1.setLayoutManager(new GridLayoutManager(this,2));//设置为表格布局，列数为2（这个是最主要的，就是这个来展示陈列式布局）recyclerView1.addItemDecoration(new space_item(space));//给recycleView添加item的间距recyclerView1.setAdapter(homeAdapter);//将适配器添加到recyclerView}class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder>{@NonNull@Override//加载布局文件并返回MyViewHolder对象public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {//创建view对象View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.home_item,parent,false);//创建MyViewHolder对象MyViewHolder myViewHolder=new MyViewHolder(view);return myViewHolder;}@Override//获取数据并显示到对应控件public void onBindViewHolder(@NonNull HomeAdapter.MyViewHolder holder, int position) {//给我的四个控件获取一下数据，注意不同类型调用不同的方法，设置图片用setImageResource（），设置文字用setText（）holder.img.setImageResource(imgs[position]);holder.title.setText(titles[position]);holder.head.setImageResource(headsIcon[position]);holder.username.setText(usernames[position]);}@Overridepublic int getItemCount() {//获取列表条目总数return titles.length;}class MyViewHolder extends RecyclerView.ViewHolder{//初始化控件ImageView img,head;TextView title,username;public MyViewHolder(@NonNull View itemView) {super(itemView);img=itemView.findViewById(R.id.home_item_img);title=itemView.findViewById(R.id.home_item_title);head=itemView.findViewById(R.id.home_item_head);username=itemView.findViewById(R.id.home_item_username);}}}class space_item extends RecyclerView.ItemDecoration{//设置item的间距private int space=5;public space_item(int space){this.space=space;}public void getItemOffsets(Rect outRect,View view,RecyclerView parent,RecyclerView.State state){outRect.bottom=space;outRect.top=space;}}
}

然后！！！就结束了hhh，上张自拍，你看我帅不帅？

安卓开发之用RecyclerView做陈列式布局（仿小红书首页/淘宝商品浏览）相关推荐

安卓开发之Handler、HandlerThread学习篇
安卓开发之Handler.HandlerThread学习心得篇开篇说明:本文采用的都是最基础最简单的例子,目的只有一个:希望大家将学习的焦点放在Handler的理解和使用上,我不 ...
安卓开发之WebView，进度条ProgressBar以及MediaPlayer和SonundPool的使用
原安卓开发之WebView,进度条ProgressBar以及MediaPlayer和SonundPool的使用 2018年06月06日 15:04:21 阅读数:106 内容比较简单,仅用作笔记,所 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
基于Android的小区核酸检测系统--Square广场界面（仿淘宝小红书的陈列式布局的实现）
是目录耶!!! 本片文章是参考了 CSDN一位大佬的文章他是Activity下实现写的很详细有需要的家人们可以去看看本次项目我是在Fragment界面下实现的目录是目录耶!!! 一.创造样式 ...
利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇，超详细教程
项目内容本案例选择>> 商品类目:沙发: 数量:共100页 4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析词云可视化 2. ...
python爬取淘宝商品做数据挖掘
作业要求:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3159 项目内容: 本项目选择淘宝商品类目:零食数量:一共100页,44 ...
python大数据可视化分析淘宝商品，开专卖店不行啊
python大数据可视化分析淘宝商品,开专卖店不行啊现如今大数据分析异常火爆,如何正确分析数据,并且抓住数据特点,获得不为人知的秘密?今天沉默带你用python爬虫,爬取淘宝网站进行淘宝商品大数据分 ...
做母婴代购如何通过小红书引流？
做母婴代购如何通过小红书引流? 线上推广母婴用品要么通过短视频或直播包装,要么通过文字包装,一定要给足用户诚意,刺激消费欲望.这一点并不好做,因为要避免千篇一律,持续打造用户喜爱的优质内容.我的建议是 ...

安卓开发之用RecyclerView做陈列式布局（仿小红书首页/淘宝商品浏览）