同一页面实现recycleView三种布局【recycleView + adapter】

news2025/1/26 15:27:13

文章目录

  • 🥭🥭简介
  • 🥭🥭效果图
  • 🥭🥭代码
    • 🍎🍎三个Adapter修饰器
    • 🍎🍎主界面函数 && FuritBean
    • 🍎🍎布局文件
  • 🥭🥭资源文件




在这里插入图片描述


🥭🥭简介

分享一下recycleView在同一个页面中(一个recycleView中实现三种不同的布局方式)。三种布局一种是横着划,竖着划和GridView三种布局,代码全部粘在下面了,需要自取。

🍓🍓第一种是竖着滑动,和listView差不多。自我感觉,比ListView复杂。
🍓🍓第二种是横着滑。自我感觉,ListView虽然也可以实现,但是比起RecycleView难度和繁琐度都上了一个等级。这可能也是现在大部分人都用RecycleView的原因之一吧,当然recycleView还有很多优势。
🍓🍓第三种就是gridView布局了,也就是Android中常说的九宫格布局了。

RecycleView它可以实现与ListView和GridView一样的效果,提供了一种插拔式的体验,高度的解耦,异常的灵活,adpter适配器自己定制。只需设置其提供的不同的LayoutManager,ItemAnimator和ItemDecoration,就能实现不同的效果。

🍓🍓 RecyclerView的优点
🍗🍗1、支持局部刷新。
🍗🍗2、可以自定义item增删时的动画。
🍗🍗3、能够实现item拖拽和侧滑删除等功能。
🍗🍗4、默认已实现View的复用,而且回收机制更加完善。



🥭🥭效果图

待写。。。。。。



🥭🥭代码

🍎🍎三个Adapter修饰器

FruitAdapter

package Adapter;


import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.layout_test.R;

import org.jetbrains.annotations.NotNull;
import java.util.List;

import domain.FuritBean;

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {

    private List<FuritBean> mFruitList;
    static class ViewHolder extends RecyclerView.ViewHolder{


        private final ImageView mfruitImage;
        private final TextView mfruitName;

        public ViewHolder(@NonNull @NotNull View view) {
            super(view);
            mfruitImage=view.findViewById(R.id.mImg1);
            mfruitName=view.findViewById(R.id.mTv1);

        }
    }
    public FruitAdapter(List<FuritBean> fruitList){
        mFruitList=fruitList;
    }

    @NonNull
    @NotNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.recycle_item1,parent,false);
        ViewHolder holder=new ViewHolder(view);

        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull FruitAdapter.ViewHolder holder, int position) {
        FuritBean furit=mFruitList.get(position);
        holder.mfruitImage.setImageResource(furit.getImageId());
        holder.mfruitName.setText(furit.getName());

    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }



}


FruitAdapter2

package Adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.layout_test.R;

import org.jetbrains.annotations.NotNull;

import java.util.List;

import domain.FuritBean;

public class FuritAdapter2 extends RecyclerView.Adapter<FuritAdapter2.ViewHolder> {
    private List<FuritBean> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder{
        private final ImageView mfruitImage;
        private final TextView mfruitName;

        public ViewHolder(@NonNull @NotNull View itemView) {
            super(itemView);
            mfruitImage= itemView.findViewById(R.id.mImg2);
            mfruitName = itemView.findViewById(R.id.mTv2);


        }
    }

    public FuritAdapter2(List<FuritBean> mFruitList) {
        this.mFruitList = mFruitList;
    }

    @NonNull
    @Override
    public FuritAdapter2.ViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.recycle_item2,parent,false);
        ViewHolder viewHolder=new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull FuritAdapter2.ViewHolder holder, int position) {
        FuritBean furit=mFruitList.get(position);
        holder.mfruitImage.setImageResource(furit.getImageId());
        holder.mfruitName.setText(furit.getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }



}

FruitAdapter3

package Adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.layout_test.R;

import org.jetbrains.annotations.NotNull;

import java.util.List;

import domain.FuritBean;

public class FuritAdapter3 extends RecyclerView.Adapter<FuritAdapter3.ViewHolder> {
    private List<FuritBean> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder{
        private final ImageView mfruitImage;
        private final TextView mfruitName;

        public ViewHolder(@NonNull @NotNull View itemView) {
            super(itemView);
            mfruitImage= itemView.findViewById(R.id.mImg3);
            mfruitName = itemView.findViewById(R.id.mTv3);


        }
    }

    public FuritAdapter3(List<FuritBean> mFruitList) {
        this.mFruitList = mFruitList;
    }

    @NonNull
    @Override
    public FuritAdapter3.ViewHolder onCreateViewHolder(@NonNull @NotNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.recycle_item3,parent,false);
        ViewHolder viewHolder=new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull @NotNull FuritAdapter3.ViewHolder holder, int position) {
        FuritBean furit=mFruitList.get(position);
        holder.mfruitImage.setImageResource(furit.getImageId());
        holder.mfruitName.setText(furit.getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }



}

三个Adapter修饰器修饰了不同的布局,每一个布局都是单独修饰的,当然也可以放到一个布局里面。下面一篇文章会将所有的布局放在一个Adapter修饰器里面进行。



MainActivity

🍎🍎主界面函数 && FuritBean

package com.example.layout_test;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.Manifest;
import android.icu.text.UnicodeSetSpanner;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.material.tabs.TabLayout;

import org.w3c.dom.Text;

import java.util.ArrayList;
import java.util.List;

//import Adapter.AllAdapter;
//import Adapter.AllAdapter;
import Adapter.FruitAdapter;
import Adapter.FuritAdapter2;
import Adapter.FuritAdapter3;
import domain.FuritBean;
public class MainActivity extends AppCompatActivity{
    private List<FuritBean> furitBeans= new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        /**
         * todo  ListView   滑动
         */
        // recycleView  横着滑
        RecyclerView recyclerView1=findViewById(R.id.recycle_view1);
        LinearLayoutManager layoutManager2=new LinearLayoutManager(this);
        layoutManager2.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView1.setLayoutManager(layoutManager2);
        FuritAdapter2 furitAdapter2=new FuritAdapter2(furitBeans);
        recyclerView1.setAdapter(furitAdapter2);


        // recycleView  竖着划
        RecyclerView recyclerView=findViewById(R.id.recycle_view2);
        LinearLayoutManager layoutManager=new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        FruitAdapter fruitAdapter=new FruitAdapter(furitBeans);
        recyclerView.setAdapter(fruitAdapter);


        /**
         * todo  GridView   RecycleView  九宫格
         */
        RecyclerView recyclerView3=findViewById(R.id.recycle_view3);
        GridLayoutManager gridLayoutManager=new GridLayoutManager(this,4);
        recyclerView3.setLayoutManager(gridLayoutManager);
        FuritAdapter3 adapter=new FuritAdapter3(furitBeans);
        recyclerView3.setAdapter(adapter);
    }



    //   数据
    private void initData() {
        for (int i = 0; i <= 4; i++) {
            FuritBean furitBean=new FuritBean("cm",R.drawable.cm);
            furitBeans.add(furitBean);

            FuritBean furitBean1=new FuritBean("cz",R.drawable.cz);
            furitBeans.add(furitBean1);

            FuritBean furitBean2=new FuritBean("mht",R.drawable.mht);
            furitBeans.add(furitBean2);

            FuritBean furitBean3=new FuritBean("nyg",R.drawable.nyg);
            furitBeans.add(furitBean3);

            FuritBean furitBean4=new FuritBean("pg",R.drawable.pg);
            furitBeans.add(furitBean4);

            FuritBean furitBean5=new FuritBean("pt",R.drawable.pt);
            furitBeans.add(furitBean5);

            FuritBean furitBean6=new FuritBean("sl",R.drawable.sl);
            furitBeans.add(furitBean6);

            FuritBean furitBean7=new FuritBean("yt",R.drawable.yt);
            furitBeans.add(furitBean7);
        }


    }

}

FuritBean

package domain;

public class FuritBean {
    private String name;
    private int ImageId;

    public String getName() {
        return name;
    }


    public int getImageId() {
        return ImageId;
    }




    public FuritBean(String name, int imageId) {
        this.name = name;
        ImageId = imageId;
    }
}



🍎🍎布局文件

activity_main

<?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="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

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

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycle_view1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="400dp">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycle_view2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycle_view3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="40dp"/>

    </LinearLayout>

</LinearLayout>

recycle_item1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/mImg1"
            android:layout_width="50dp"
            android:layout_height="50dp" />

        <TextView
            android:id="@+id/mTv1"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:layout_gravity="center"/>
    </LinearLayout>
</LinearLayout>

recycle_item2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="50dp"
        android:layout_height="80dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/mImg2"
            android:layout_width="50dp"
            android:layout_height="50dp" />

        <TextView
            android:id="@+id/mTv2"
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:gravity="center"/>
    </LinearLayout>

</LinearLayout>

recycle_item3

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

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

        <ImageView
            android:id="@+id/mImg3"
            android:layout_width="50dp"
            android:layout_height="50dp" />

        <TextView
            android:id="@+id/mTv3"
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:gravity="center"
            android:textColor="#FFFF0000"/>
    </LinearLayout>

</LinearLayout>


🥭🥭资源文件

在这里插入图片描述

嗯~~,就几张照片,放上来还有水印,你们这个照片就自己找找吧。


把上面的代码全部拷贝下来就可以运行出上动态图的结果了。


学Android,来牛客

在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有,除此之外牛客里面还有招聘(社招和校招)、一些上岸大厂的大佬的面试经验。 牛客是可以伴随一生的编程软件(完全免费),从学校到社会工作,时时刻刻你都可以用到感兴趣的可以去注册试试可以伴随一生的刷题app







觉得有用的可以给个三连,关注一波!!!带你玩转Android

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407763.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

js获取dom元素宽高

一&#xff0c;前言 1.对于css盒子模型&#xff0c;我们使用width和height等来定义dom元素的宽高&#xff0c;而有时我们需要在js中获取元素的宽高进行一些操作。 2.dom操作提供了相应的属性来实现这一点 二&#xff0c;clientWidth和clientHeight 1.clientWidth和clientHe…

js监听页面或元素scroll事件,滚动到底部或顶部

基本原理&#xff1a; 1、滚动到底部 元素的滚动距离 元素的可视距离 元素的滚动条总距离2、滚动到顶部 元素的滚动距离 0监听页面滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv&…

Flask:使用SocketIO实现WebSocket与前端Vue进行实时推送(gevent-websocket、flask-socketio、flask不出现running on 127..问题)

前言 本文旨在记录使用Flask框架过程中与前端Vue对接过程中&#xff0c;存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后&#xff0c;导致运行Flask项目之后&#xff0c;控制台没有显示running on 127.0.0.1:5000…

Vue复刻华为官网(三)

文章目录1 底部列表1.1 思路1.2 代码1.3 效果图1.3.1 搜索框1.3.2 商标2 公司信息2.1 思路2.2 代码2.3 效果图3 上升按钮3.1 思路3.2 代码3.3 效果图4 图标完善4.1 思路4.2 安利图标库1 底部列表 1.1 思路 如上图&#xff0c;这整个的大盒子&#xff0c;又可以被分为上中下三个…

[JavaScript你真的以为这么简单吗]JavaScript高级

✅作者简介&#xff1a;大家好,我是Philosophy7&#xff1f;让我们一起共同进步吧&#xff01;&#x1f3c6; &#x1f4c3;个人主页&#xff1a;Philosophy7的csdn博客 &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大…

three.js中坐标系转换以及camera的position、lookAt与up属性理解

为了更好的理解camera的position、lookAt与up属性&#xff0c;文章最开始我们先来阐述three.js的坐标系转换的概念。 1.监听event的事件获得屏幕坐标 文章的最开始首先讨论在哪里进行点击事件的监听的问题&#xff0c;当鼠标触发点击事件时&#xff0c;event会输出点击位置相对…

使用JS监听键盘按下事件

事件说明 我们将键盘按下后事件的所有属性和方法打印出来&#xff08;这里以按下1为例&#xff09; document.onkeydown function(event){console.log(event);} 这里面有几个需要注意的属性 key:按下按键的名称 keyCode:按下按键的键码 altKey、ctrlKey、shiftKey&#xf…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(项目演示、涉及知识点、源码分享)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;一&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;一&#xff09;Vue3.x 实现多功能记账本1、前言2、项目演示3、涉及知识点4、写到最后&#xff08;附源码&#xff09;Vue3.x 实现多功能记账本 1、前…

文件在线浏览之微软office在线预览及隐藏的坑和其他更优解决办法

一 微软也已经免费提供在线版本office预览啦 https://view.officeapps.live.com/op/view.aspx?srcURLsrc后面的URL是网上能访问到的文件地址&#xff0c;比如http://abc.com/file/demo.xlsx 直接访问&#xff1a;https://view.officeapps.live.com/op/view.aspx?srchttp:/…

js模板字符串

js模板字符串模板字符串&#xff08;模板字面量&#xff09;在模板字符串中插入变量在模板字符串中插入表达式模板字符串中可以换行模板字符串中可以调用函数模板字符串支持嵌套使用模板字符串&#xff08;模板字面量&#xff09; ES6 中引入了模板字符串&#xff0c;让我们省…

Vue3 + vite 创建项目

项目创建 vite的介绍 首先要想使用vite来创建一个vue项目&#xff0c;要把vue脚手架升级成为5.0.1版本&#xff0c;但是有一个很大的缺陷&#xff0c;就是升级过后不会再向下兼容vue2的语法创建项目的方式 脚手架升级为5.0.1版本&#xff1a;cnpm install vuenext 或 yarn gl…

Redux最新实践指南之Redux-Toolkit

前言 redux-toolkit是目前redux官方推荐的编写redux逻辑的方法&#xff0c;针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化&#xff0c;官方总结了四个特点是简易的/有想法的/强劲的/高效的&#xff0c;总结来看&#xff0c;就是更加的方便简单了。 从官…

vue-treeselect 的基本使用

官网地址&#xff1a;Vue-Treeselecthttps://vue-treeselect.js.org/公司用 若依 搞了一个速成项目&#xff0c;若依是一个免费开源的前后端项目&#xff0c;感兴趣的朋友百度。 在里边接触到了一个神奇的东西 &#xff1a;vue-treeselect&#xff0c;用起来真的是一言难尽&am…

uniapp全局弹窗(APP端)

uniapp自带的提示框不符合我们的要求&#xff0c;需要自己写一个提示框&#xff0c;且全局通用。 解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听。 官方文档 1. 首先创建一个整个屏幕的控件&#xff0c;作为一个父容器。 此时还看不到任何东西 let screenHeight…

牛客网前端刷题(二)

还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦! 赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏…

微信小程序之开发遇到 does not have a method “xxxx“ to handle event “tap“ 问题的解决方案【已解决】

今天在开发一个小功能&#xff0c;copy了之前写的代码&#xff0c;但是在实现功能时&#xff0c;出现了如下问题&#xff1a; 先在这简单总结一下解决方案&#xff1a; 在调用方法时&#xff0c;在" "中前后多加了空格&#xff1b;在 js 中没有定义该方法&#xff1…

纯前端导出表格

前端 excel 表格导出 我们习惯了后端去处理表格&#xff0c;直接接口返回 &#xff0c;那前端如何轻松的导出表格呢&#xff1f; 文章目录前端 excel 表格导出Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐安装① vue2 中使用② vue3 中使用③ react 中使用Ⅲ. 通过 vue-json-excel ⭐⭐安装使…

SpringBoot--Filter过滤器(一)

一.了解过滤器Filter 过滤器: Filter, 是 Servlet 技术中最实用的技术。过滤器是处于客户端和服务器之间的一个过滤网,可以过滤掉一些不符合要求的请求常见场景: Session 校验判断用户权限不符合设定条件&#xff0c;则会被重定向特殊的地址或者设定的响应过滤敏感词汇设置编…

一天撸一个财务APP系统【安卓端+前端+后端】

昨天有个粉丝朋友也想学开发Web和小程序、安卓&#xff0c;问可以在大学学会吗&#xff1f; 在学校学到的东西真的有限&#xff1a; 在很多的高校&#xff0c;有一些教授是学院派的&#xff0c;他们没有做过多少开发工作&#xff0c;上课就是照本宣科&#xff0c;讲的知识点都…

Vue打包优化篇-CDN加速

优化原因 在没有使用cdn加速之前打包后数据如下&#xff0c;可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大&#xff0c;假设再来很多依赖项是不是更大&#xff0c;同时也会影响单页面应用首屏加载速度&#xff0c;所以这里采用一种打…