RecyclerView仿应用列表实现网格布局
时间:2022-07-27
本文章向大家介绍RecyclerView仿应用列表实现网格布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简介
使用RecyclerView实现网格布局,实现手机界面应用列表
效果
效果如下图:
详细代码
XML布局文件
在布局中使用RecyclerView控件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:background="#9709F7"
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" /
</LinearLayout
RecyclerView子项列表布局
recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#20FDFDFD"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_margin="20dp"
<ImageView
android:id="@+id/iv_apply_image"
android:layout_width="112dp"
android:layout_height="112dp"
android:layout_marginTop="32dp"
android:src="@mipmap/ic_launcher" /
<TextView
android:id="@+id/tv_apply_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="19dp"
android:text="闹钟"
android:textColor="#fff"
android:textSize="28sp" /
</LinearLayout
JAVA代码
MainActivity
package com.matt.recyclerview;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private GridAdapter mGridAdapter;
private List<ApplyBean mApplyList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = findViewById(R.id.recyclerview);
mApplyList = new ArrayList< ();
mApplyList.add(new ApplyBean("SETTINGS","设置", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("CALCULATOR","计算器", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("WEATHER","天气", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("CALENDAR","日历", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("PHOTO" ,"相册", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("TIME" ,"时钟", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("FM" ,"收音机", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("CAMERA" ,"相机", R.mipmap.ic_launcher));
mApplyList.add(new ApplyBean("PLAY","播放器", R.mipmap.ic_launcher));
mGridAdapter = new GridAdapter(mApplyList);
//这里的第二个参数4代表的是网格的列数
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
mRecyclerView.setAdapter(mGridAdapter);
}
}
RecyclerView适配器GridAdapter
package com.fenda.homepage.Adapter;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.fenda.homepage.R;
import com.fenda.homepage.bean.ApplyBean;
import java.util.List;
/**
* @author:Matt.Liao
* 日期时间: 2019/9/1 17:45
* 内容描述:
* 版本:
* 包名:
*/
public class GridAdapter extends RecyclerView.Adapter<GridAdapter.Holder {
private List<ApplyBean mList;
private RecyclerView recyclerView;
public GridAdapter(List<ApplyBean list){
this.mList = list;
}
@Override
public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.submenu_item_recyclerview, null);
final Holder holder = new Holder(view);
//对加载的子项注册监听事件
holder.fruitView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = holder.getAdapterPosition();
String applyId = mList.get(position).getApplyId();
onItemClickListener.onItemClick(view ,applyId);
}
});
return holder;
}
@Override
public void onBindViewHolder(Holder holder, int position) {
holder.mApplyNameTv.setText(mList.get(position).getApplyName());
holder.mApplyImageIv.setImageResource(mList.get(position).getApplyImage());
}
@Override
public int getItemCount() {
return mList == null ? 0 : mList.size();
}
private OnItemClickListener onItemClickListener;
public void setOnItemClickListener(OnItemClickListener onItemClickListener){
this.onItemClickListener = onItemClickListener;
}
/**
* 定义RecyclerView选项单击事件的回调接口
*/
public interface OnItemClickListener{
/**
* @param view 当前单击的View
* @param applyId 单击的View的应用id
*/
void onItemClick(View view, String applyId);
}
class Holder extends RecyclerView.ViewHolder {
private TextView mApplyNameTv;
private ImageView mApplyImageIv;
private View fruitView; //表示我们自定义的控件的视图
public Holder(View itemView) {
super(itemView);
fruitView = itemView;
mApplyNameTv = itemView.findViewById(R.id.tv_apply_name);
mApplyImageIv = itemView.findViewById(R.id.iv_apply_image);
}
}
}
应用列表实体类ApplyBean
package com.matt.recyclerview;
import android.os.Parcel;
import android.os.Parcelable;
/**
* @author matt.liaojianpeng
* 日期时间: 2019/9/1 16:31
* 内容描述:
* 版本:
* 包名:
*/
public class ApplyBean{
private String applyId;
private String applyName;
private int applyImage;
public String getApplyId() {
return applyId;
}
public void setApplyId(String applyId) {
this.applyId = applyId;
}
public ApplyBean(String applyName, int applyImage){
this.applyName = applyName;
this.applyImage = applyImage;
}
public ApplyBean(String applyId , String applyName, int applyImage){
this.applyId = applyId;
this.applyName = applyName;
this.applyImage = applyImage;
}
public ApplyBean() {
}
public String getApplyName() {
return applyName;
}
public void setApplyName(String applyName) {
this.applyName = applyName;
}
public int getApplyImage() {
return applyImage;
}
public void setApplyImage(int applyImage) {
this.applyImage = applyImage;
}
public ApplyBean(Parcel source) {
applyId = source.readString();
applyName = source.readString();
applyImage = source.readInt();
}
}
详细讲解
设置RecyclerView适配器
//这里的第二个参数3代表的是网格的列数
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
mRecyclerView.setAdapter(mGridAdapter);
可以设置的一些参数,说明如下:
setLayoutManager设置RecyclerView布局样式
GridLayoutManager:网格布局
LinearLayoutManager:线性布局
适配器GridAdapter继承RecyclerView.Adapter
初始化
重写构造方法,传入子项数据列表
private List<ApplyBean mList;
private RecyclerView recyclerView;
public GridAdapter(List<ApplyBean list){
this.mList = list;
}
内部类Holder用于绑定数据类型
class Holder extends RecyclerView.ViewHolder {
private TextView mApplyNameTv;
private ImageView mApplyImageIv;
private View fruitView; //表示我们自定义的控件的视图
public Holder(View itemView) {
super(itemView);
fruitView = itemView;
mApplyNameTv = itemView.findViewById(R.id.tv_apply_name);
mApplyImageIv = itemView.findViewById(R.id.iv_apply_image);
}
}
onCreateViewHolder()方法,负责承载每个子项的布局。
onBindViewHolder()方法,负责将每个子项holder绑定数据。
getItemCount()方法,返回子项列表数目。
setOnItemClickListener()方法,设置子项列表监听。
OnItemClickListener()接口,定义RecyclerView选项单击事件的回调接口。
子项监听实现的方法,如下
mGridAdapter.setOnItemClickListener(new GridAdapter.OnItemClickListener() {
@Override
public void onItemClick(View view, String applyId) {
if(applyId.equals("SETTINGS")){
Toast.makeText(getApplicationContext(),"设置",Toast.LENGTH_SHORT).show();
} else if (applyId.equals("CALCULATOR")){
Toast.makeText(getApplicationContext(),"计算器",Toast.LENGTH_SHORT).show();
}
}
});
以上就是本文的全部内容,希望对大家的学习有所帮助。
- 《全球贸易信息动态》
- .NET Core的日志[3]:将日志写入Debug窗口
- Code2Cloud:比ALM中断更大
- .NET Core的日志[4]:将日志写入EventLog
- 微信小程序不行了?看小马哥带你忆童年
- ASP.NET MVC三个重要的描述对象:ControllerDescriptor和ActionDescriptor的创建
- .NET Core的日志[5]:利用TraceSource写日志
- 物联网芯片正在积极开发 明年将得到爆发
- 韩国全球首测5G网络下自动驾驶 为汽车安全保驾护航的竟是路灯
- 通过与Quickbuild和Mist.io的持续集成实现云管理和使用监控
- .NET Core的文件系统[1]:读取并监控文件的变化
- ASP.NET MVC以ValueProvider为核心的值提供系统: ValueProviderFactory
- 云本机应用程序成熟度的模型
- 如何利用ETW(Event Tracing for Windows)记录日志
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php基础教程 第九步 自定义函数
- php基础教程 第十步 阶段性知识补充
- php基础教程 第十一步 面向对象
- php基础教程 第十一步 面向对象补充
- Serverless|Framework——图文玩转 AWS Lambda
- C++入门指南及实战 第一步 概述及经典HelloWorld
- C++入门指南及实战 第二步 HelloWorld及扩展详解
- 依托于GitLab持续集成基础配置和使用
- C++入门指南及实战 第三步 基本变量
- 最全总结 | 聊聊 Python 数据处理全家桶(配置篇)
- FlexSDK工具包的介绍与编译使用
- 《零基础看得懂的C语言入门教程 》——(二)C语言没那么难简单开发带你了解流程
- Ansible自动化运维学习笔记5
- Ansible自动化运维学习笔记4
- 《零基础看得懂的C语言入门教程 》——(三)轻轻松松理解第一个C语言程序