Android开发，多宫格列表实现

最新推荐文章于 2025-05-03 14:23:24 发布
最新推荐文章于 2025-05-03 14:23:24 发布
阅读量976 收藏 12
点赞数 9
CC 4.0 BY-SA版权
文章标签： android Android开发 android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/145989718

文章目录

  1. 一个超简单的轮播图实现：https://blog.csdn.net/jky_yihuangxing/article/details/144290743

在安卓开发中，在app首页金刚区基本都有多宫格核心功能的入口

先看效果图

在这里插入图片描述

2. 代码实现过程

1.编辑fragment_home.xml布局文件

注意事项：在实际开发过程中，像9宫格，或者6宫格，数据可能由后台接口动态返回，也就是说不能固定写死。在本文章中，直接在xml布局中固定实现多宫格

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:calendarview="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:background="#f5f5f5"
    android:orientation="vertical"
    tools:context=".fragment.HomeFragment">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/purple_200"
        app:title="首页"
        app:titleTextColor="@color/white" />


    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <com.app.school.club.view.BannerView
                android:id="@+id/banner_view"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_below="@id/toolbar"
                android:layout_margin="10dp"
                tools:background="#999999" />


            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:orientation="vertical">


                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:background="@color/white">


                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_h" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="通惠超市"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_ssfw" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="送水服务"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_kdds" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="快递代收"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_nc" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="奶茶饮料"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                </androidx.appcompat.widget.LinearLayoutCompat>


                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:background="@color/white">


                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_czda" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="成长档案"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_kcb" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="课程表"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_zy" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="作业"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:scaleType="centerCrop"
                            android:src="@mipmap/img_qtfw" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="6dp"
                            android:text="其他服务"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>

                </androidx.appcompat.widget.LinearLayoutCompat>


            </androidx.appcompat.widget.LinearLayoutCompat>


            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@color/white"
                android:orientation="vertical"
                android:padding="10dp">


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="功能工具"
                    android:textColor="#333333" />


                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:layout_marginTop="10dp">

                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:id="@+id/btn_push"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:src="@drawable/ic_baseline_push_pin_24" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:text="问题发布"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>


                    <View
                        android:layout_width="1dp"
                        android:layout_height="40dp"
                        android:layout_gravity="center_vertical"
                        android:background="#f5f5f5" />


                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:id="@+id/btn_found"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:src="@mipmap/img_swzl" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:text="失物招领"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>


                    <View
                        android:layout_width="1dp"
                        android:layout_height="40dp"
                        android:layout_gravity="center_vertical"
                        android:background="#f5f5f5" />


                    <androidx.appcompat.widget.LinearLayoutCompat
                        android:id="@+id/btn_chat"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:orientation="vertical">

                        <ImageView
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:src="@mipmap/img_xx" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:text="问题咨询"
                            android:textColor="#666666"
                            android:textSize="13sp" />

                    </androidx.appcompat.widget.LinearLayoutCompat>


                </androidx.appcompat.widget.LinearLayoutCompat>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="10dp"
                    android:background="#f5f5f5" />

            </androidx.appcompat.widget.LinearLayoutCompat>


        </androidx.appcompat.widget.LinearLayoutCompat>

    </androidx.core.widget.NestedScrollView>

</androidx.appcompat.widget.LinearLayoutCompat>

2. 分析整个页面布局

使用了LinearLayoutCompat、NestedScrollView、Toolbar、ImageView、TextView等组件。以下是对其结构的详细分析：

  1. 根布局：LinearLayoutCompat 根布局是一个垂直方向的线性布局，背景颜色为浅灰色（#f5f5f5），占据整个屏幕
  2. 工具栏：Toolbar 工具栏位于顶部，标题为“首页”，标题文字颜色为白色
  3. 可滚动内容区域: NestedScrollView 包裹整个内容区域，支持垂直滚动
  4. 内容布局: LinearLayoutCompat 内容区域也是一个垂直方向的线性布局，包含多个子组件
  5. 轮播图: BannerView 轮播图组件，高度为160dp，上下左右各有10dp的边距

3. 总结

  1. 这个布局文件定义了一个典型的Android应用首页，包含以下几个主要部分：
  2. 工具栏：位于顶部，显示标题“首页”。
  3. 轮播图：展示图片轮播。
  4. 服务入口：两行共八个服务入口，每个入口包含图标和文字。
  5. 功能工具：三个功能入口，分别用于问题发布、失物招领和问题咨询。

4. 关于作者其它项目视频教程介绍

  1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
android 9宫格布局,android 朋友圈9宫格实现
weixin_29523709的博客
05-27 1132
icon9宫格效果.png项目优化2019-10-101、有人提出经常new ImageView耗内存， 我现在直接new 9个ImageView，可重复使用这几个ImageView2、修复图片数量为4/7个的时候，高度没计算正确问题使用方式holder.pengYouQuanFlagLayout.setImgList(findBean);android:id="@+id/find_fragmen...
Android仿微信支付宫格导航
06-15
综上所述，"Android仿微信支付宫格导航"是一个涉及到自定义View、布局管理、事件监听、动画、数据绑定等多个Android开发核心知识点的实践项目。通过实现这样的功能，开发者可以提升自己的UI设计能力和对Android系统...
Android RecyclerView宫格拖拽效果实现
chuyouyinghe的专栏
08-09 194
本篇到这里就结束了，我们利用RecyclerView实现了宫格图片的拖拽效果，主要是借助ItemTouchHelper实现，从ItemTouchHelper中我们能看到很多巧妙的的设计，里面有很多值得我们学习的技巧，特别是对事件的处理、绘制顺序调整的方式，如果做吸顶，未尝不是一种方案。另外，在本篇，我们还需要注意的是数据和UI一致性问题，因为在移动的过程中，数据的索引位置可能和UI产生差异需要主动优化，以及notifyItemMoved和notifyItemRemoved的用法。
android九宫格布局完整版
03-26
NULL 博文链接：https://tangzhifei.iteye.com/blog/1146672
Android 9宫格布局实战指南
最新发布
weixin_35592186的博客
05-03 641
在Android开发中，GridView是一个常用于展示网格布局界面的组件，它能够以多列的形式展示一系列相同类型的数据，非常适合于图片浏览、应用抽屉等场景。通过简单的布局配置和适配器绑定，开发者可以快速实现复杂的网格界面。在Android开发中，Adapter扮演着桥梁的角色，将数据源和UI控件连接起来。特别是在处理列表视图（如GridView）时，正确地实现一个自定义Adapter变得尤为重要。本章节将深入探讨Adapter的原理和作用，以及如何通过代码实现自定义Adapter。
【Android组件开发】自定义的多宫格布局
moke926的博客
12-04 2369
自定义多宫格布局
Android 九宫格设计与实现指南
weixin_30248619的博客
08-26 1647
本文还有配套的精品资源，点击获取 简介：九宫格是 Android 开发中常见的 UI 元素，用于展示多个功能选项。本指南将深入探讨如何使用 GridLayout、GridView 和自定义 Adapter 在 Android 中实现九宫格。我们将介绍事件监听、动态加载、样式、响应式设计和性能优化等关键技术，并提供特殊效果和测试调试技巧。通过本指南，开发者将掌握九宫格设计的最...
android宫格式布局,四种常见的APP分类界面布局设计案例学习
weixin_42516575的博客
05-25 3858
相信各位对于APP设计，已经很熟练啦。如何在熟练的基础上提高我们界面的优美度，或者是进行APP界面的迭代设计。重构APP设计布局是我们必须要经历的一个过程。在之前，学习UI设计的时候，经常要接触到页面的布局，布局的方式会直接影响一个APP的视觉效果，好的布局方式，往往能带来舒服的视觉效果，更能得到用户的接受与好评。今天，25学堂跟大家来看下四种常见的APP分类界面布局。第一种APP分类界面布局：宫...
android 9宫格布局,GitHub - xingty/XNineGridView: Android九宫格布局
weixin_39785970的博客
05-27 369
#XNineGridView这是Android的一个控件,主要用于九宫格布局。玩过微信都知道微信朋友圈那个布局是很酷的,这个控件主要是仿微信的。有问题可以在issue提出,或者到我的博客留言#功能说明支持加载本地和网络图片使用Adapter模式,你可以自由的对ImageView做任何操作支持在xml布局#属性gap | int 子view之间的间距(上下左右)#示例在XML中使用android:...
Android GridView实现宫格布局
在Android开发中，GridView是一个非常有用的控件，它可以用来展示数据集，并以网格的形式排列这些数据。宫式布局，通常指的是类似九宫格或者更多宫格的布局方式，每个宫格内可以包含不同的内容，如图片和文字。这种...
Android多宫格菜单实现：ViewPager+GridView深入解析
**ViewPager** 是Android开发中用于页面切换的组件，它支持左右滑动来浏览多个页面。ViewPager本身主要用于横向滚动，通常与Fragment结合使用，每个Fragment可以视为ViewPager的一个页面。但是，ViewPager也可以与...
Android实现九宫格（GridView中各项平分空间）的方法
09-03
主要介绍了Android实现九宫格（GridView中各项平分空间）的方法,涉及Android针对GridView操作的相关技巧,需要的朋友可以参考下
activity 动画跳转demo （仿大众点评）
01-13
activity 动画跳转demo （仿大众点评）
Android实现9宫格绘图与电话按键颜色变换
在Android开发中，绘制9宫格通常涉及到自定义视图的技术，而9宫格图像又是用于UI设计中的一种图像处理方式，常用于按键、按钮等UI元素。此知识点包含以下几个部分： 1. **Android绘制9宫格基础** 9宫格图片...
Android:GridView+AbsoluteLayout作一个四宫格
吴家大少少的专栏
05-22 6706
布局： 1: xml version="1.0" encoding="utf-8"?> 2: AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 3: android:layout_width="fill_parent" 4:
使用GridView实现九宫格布局
热门推荐
清明梦
08-27 1万+
九宫格布局是目前十分常见的一种布局，我们可以用GridView来实现。主要分为两块，布局的设计以及代码适配。 首先来看布局： （一）主页面布局如下，main.xml 只有一个GridView <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridvi
App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条
未来很长，但我会努力的走下去。
12-23 2289
TransformersLayout 项目地址：zaaach/TransformersLayout 简介： :fire: App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条 更多：作者提 Bug 标签： :fire: APP 金刚区导航布局，下方带横向滚动条，很多 APP 都有使用这种，效果还不错就封装了一下:smil...
App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，阿里出品
jiameih的博客
03-29 810
跳槽季整理面试题已经成了我多年的习惯！在这里我和身边一些朋友特意整理了一份快速进阶为Android高级工程师的系统且全面的学习资料。涵盖了Android初级——Android高级架构师进阶必备的一些学习技能。附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。能。**
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩宇软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值