RecyclerView仿应用列表实现网格布局

移动开发 得得之家
这篇文章主要为大家详细介绍了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();
        }
      }
    });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持得得之家。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果
这篇文章主要为大家详细介绍了RecyclerView+PagerSnapHelper实现抖音首页翻页的Viewpager效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
RecyclerView+SnapHelper实现无限循环筛选控件
这篇文章主要为大家详细介绍了RecyclerView+SnapHelper实现无限循环筛选控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android特卖列表倒计时卡顿问题的解决方法
这篇文章主要为大家详细介绍了android特卖列表倒计时卡顿问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android利用RecyclerView实现列表倒计时效果
这篇文章主要为大家详细介绍了Android利用RecyclerView实现列表倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android ListView列表实现倒计时
这篇文章主要为大家详细介绍了Android ListView列表实现倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
RecyclerView实现列表倒计时
这篇文章主要为大家详细介绍了RecyclerView实现列表倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式