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();
        }
      }
    });

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

(0)

相关推荐

  • Android RecyclerView实现下拉列表功能

    现在市面上的很多的应用,都带有下拉列表的功能,将所有选项都放在下拉列表中,当用户点击选择的时候,弹出所有的选项,用户选择一项后,下拉列表自动隐藏,很多下拉列表都是用ListView + PopupWindow来实现的,由于Google推出了替代ListView的RecyclerView,所以简单实现一下: MainActivity.java package com.jackie.countdowntimer; import android.graphics.drawable.BitmapDraw

  • Android RecyclerView实现拼团倒计时列表实例代码

    前言 最近一直被需求赶着走,有些功能经过测试上线后就没再review.闲下来还是重新优化下老代码,温故而知新,还是有点收获和进步的 需求TODO 团购这种促销方式已经很普遍,尤其是大家熟悉的"并夕夕"更是玩的很6.现在我们就要实现一个团购倒计时列表,并以"剩余:09:12:24.8"这种样式来展示该团距离结束时间的倒计时. 技术初步分析 首先,有关时间变化的,首先想到TimerTask+Timer这个定时器组合,列表不用多说RecyclerView.其中涉及到UI更

  • Android使用RecyclerView实现列表数据选择操作

    这些时间做安卓盒子项目,因为安卓电视的显示器比较大,所以一个界面显示 很多数据 ,最多的时候,一个Actvity中用到了好几个RecyclerView. 在RecyclerView中实现Item选中处理时,发现用CheckBox的OnCheckedChangeListener监听事件时,会达不到预期,所以用了OnClickListener来实现. 主界面代码: public class CheckRecyclerViewActivity extends AppCompatActivity imp

  • Android单个RecyclerView实现列表嵌套的效果

    很多时候会遇到一种需求,列表里面有列表,像这种需求之前一般都是用多个列表控件互相嵌套来实现,但是这样很容易出现一些问题,例如滚动冲突.数据显示不全.多余的逻辑处理等.后来发现,一个recyclerview就可以实现列表嵌套的效果,这里需要用到recyclerview的多布局功能. 效果图: recyclerview的多布局涉及到的主要方法是getItemViewType,作用是设置每个item要显示的布局类型.之前不了解的时候,都是直接用数学逻辑直接去计算,多少个position后显示什么布局,

  • Android如何利用RecyclerView实现列表倒计时效果实例代码

    前言 最近面试时,面试官问了一个列表倒计时效果如何实现,然后脑袋突然懵的了O(∩_∩)O,现在记录一下. 运行效果图 实现思路 实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新item处理: 2.只启动一个定时器,然后遍历数据,再做再做更新item处理. 经过思考,包括性能.实现等方面,决定使用第2种方式实现. 实现过程 数据实体 /** * 总共的倒计时的时间(结束时间-开始时间),单位:毫秒 * 例: 2019-02-23 11:00:30 与 2019-02-2

  • Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    前言 首先不得不吐槽一下产品,尼玛为啥要搞这样的功能....搞个两级的不就好了嘛...自带控件,多好.三级,四级,听说还有六级的....这样丧心病狂的设计,后台也不好给数据吧. 先看看效果: 两级的效果: 三级的效果: 全部展开的效果(我只写了五级) 说说为什么写这货吧: 公司产品提出三级这个需求后,我就在网上找啊找. 找的第一个,发现实现其实是ExpandListview嵌套. 找的第二个,ExpandRecyclview,然后就用呗,发现三级展开很卡,看源码, 发现是RecyclerView

  • Android RecyclerView网格布局(支持多种分割线)详解(2)

    上篇Android RecyclerView 详解(1)-线性布局 记录了下RecyclerView的使用方法,并且讲述了线性布局列表的使用方法,在此基础上加上了万能分割线,支持颜色分割线和图片分割线,同时支持对分割线设置线宽. 这篇是总结一下网格布局的使用,同样也支持两种分割线和线宽的设置. 主要的相关类: 1. RecyclerView.Adapter 2. GridLayoutManager 网格布局管理器 3. RecycleView.ItemDecoration 分割线 下面就直接通过

  • RecyclerView实现常见的列表菜单

    在很多地方我们都会用到纵向列表样式的菜单,比如微信首页的我.发现页面,微博的首页的我页面,QQ的动态页面等等等等,大多数的应用中都会存在这样的页面.我们怎样实现这种页面比较好呢? 布局方案 完成这样的页面,常见的布局方案有: 1. 用ScrollView+LinearLayout很容易的暴力布局出来,但是这样得到的布局太固定了,如果条目多一点,加载起来很耗时. 2. 用ListView来实现,这种方案比方案一要好上不少,起码数据多点的时候,加载时不会太耗时.但是分割线和中间空白在要求差异化的时候

  • Android中RecyclerView实现多级折叠列表效果(二)

    前言 在本文开始之前请大家先看一下这篇文章:http://www.jb51.net/article/113510.htm 上面的这篇文章是之前写的,里面发现有很多不好用地方,也学到些新姿势,改动了许多地方.下面来看看详细的介绍: 要点: 1.可以通过后台控制Item的展示. 2.TreeRecyclerAdapter,可以展开,折叠.多级展示 3.adapter可以使用装饰者模式进行扩展.支持EmptyAdapter.可以添加headview和footview 4.item的样式可以编写文档,t

  • Android基于RecyclerView实现高亮搜索列表

    话不多说先看今天的实现的效果: 相信这种效果很多项目都会用到,今天就讲讲利用RecycleView来实现他,博主把此篇文章定位初级篇,可能因为这确实很简单,所以我要更要讲的详细一点让新手也可以能看的懂. 饭要开始做了,我们要准备哪些食材呢. 1.一个RecyclerView或是listview或是其他可以显示多item的控件(主要的干货) 2.搞清楚EditText的实时监听 3.让一个textview出现不同的颜色 4.如何穿过Adpter找出textview中key值(也就是高亮字符串) 当

  • android实现RecyclerView列表单选功能

    本文实例为大家分享了android实现RecyclerView列表单选功能的具体代码,供大家参考,具体内容如下 实现思维 1.首先在一行的xml布局中添加一个选中效果的icon图片,未选中的情况下INVISIBLE或者GONE 都可以,推荐使用INVISIBLE它会占用布局位置但是不显示,这样可以避免布局中其他控件因为勾选布局的消失而轻微变动位置 2.将适配器类中的onCreateViewHolder方法重写添加按键监听,onBindViewHolder方法中重写添加判断点击的位置(具体原理请查

  • Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新

    Android使用RecyclerView 1. 什么是RecyclerView RecyclerView 是 Android-support-v7-21 版本中新增的一个 Widgets,官方对于它的介绍则是:RecyclerView 是 ListView 的升级版本,更加先进和灵活. 简单来说就是:RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的support-V7版本中提供支持. 2.

  • Android RecyclerView实现数据列表展示效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1.首先导入依赖: compile 'com.android.support:recyclerview-v7:25.3.1' 2.适配器类: public class NewsAdapter extends RecyclerView.Adapter { private View view; private Context mcontext; private ArrayList<NewsData.DataBean

随机推荐