当前位置： 首页 > article >正文

Android开发，多宫格列表实现

article 2025/3/4 23:31:20

文章目录

    • 2. 代码实现过程
    • 2. 分析整个页面布局
    • 3. 总结
    • 4. 关于作者其它项目视频教程介绍

  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

http://www.kler.cn/a/570769.html

相关文章：

  • Java——通配符以及上下限
  • 人工智能AI在汽车设计领域的应用探索
  • CPU负载高告警问题的定位与优化建议
  • 【MySQL】使用LOAD DATA INFILE导入数据时报错：Errcode: 2 - No such file or directory
  • UnrealEngine UE5 可视化 从地球观察火星 金星 土星 运动轨迹
  • PyTorch 中实现模型训练看板实时监控训练过程中的关键指标
  • 【开发环境配置】基于Openssh的git多key配置
  • Magic 1-For-1: 在一分钟内生成一分钟视频片段（基于Python实现，视频生成模型）
  • 蓝桥杯C语言组：基于蓝桥杯煤球数目问题的数列累加解决方案研究
  • SQL调优
  • AI大模型之一 GodeGPT调用Dify+DeepSeek属于自己私域模型
  • Zabbix zbx_auditlog_global_script SQL注入漏洞缓解和修复方案
  • C++014（elif语句）
  • Highcharts 配置语法详解
  • Redis除了做缓存还能做什么？
  • 如何在Android中实现多线程
  • centos7操作系统下安装docker，及查看docker进程是否启动
  • Rust ~ Dyn Error
  • Maven 私服的搭建与使用（二）
  • 【hot100】146LRU缓存