文章目录
- 2. 代码实现过程
- 2. 分析整个页面布局
- 3. 总结
- 4. 关于作者其它项目视频教程介绍
- 一个超简单的轮播图实现: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.Toolbarandroid: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.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.app.school.club.view.BannerViewandroid: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.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:orientation="vertical"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="80dp"android:background="@color/white"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_h" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_ssfw" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_kdds" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_nc" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="80dp"android:background="@color/white"><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_czda" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_kcb" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_zy" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:scaleType="centerCrop"android:src="@mipmap/img_qtfw" /><TextViewandroid: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.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"android:background="@color/white"android:orientation="vertical"android:padding="10dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="功能工具"android:textColor="#333333" /><androidx.appcompat.widget.LinearLayoutCompatandroid:layout_width="match_parent"android:layout_height="60dp"android:layout_marginTop="10dp"><androidx.appcompat.widget.LinearLayoutCompatandroid:id="@+id/btn_push"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="28dp"android:layout_height="28dp"android:src="@drawable/ic_baseline_push_pin_24" /><TextViewandroid: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><Viewandroid:layout_width="1dp"android:layout_height="40dp"android:layout_gravity="center_vertical"android:background="#f5f5f5" /><androidx.appcompat.widget.LinearLayoutCompatandroid:id="@+id/btn_found"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="28dp"android:layout_height="28dp"android:src="@mipmap/img_swzl" /><TextViewandroid: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><Viewandroid:layout_width="1dp"android:layout_height="40dp"android:layout_gravity="center_vertical"android:background="#f5f5f5" /><androidx.appcompat.widget.LinearLayoutCompatandroid:id="@+id/btn_chat"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageViewandroid:layout_width="28dp"android:layout_height="28dp"android:src="@mipmap/img_xx" /><TextViewandroid: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><Viewandroid: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等组件。以下是对其结构的详细分析:
- 根布局:
LinearLayoutCompat
根布局是一个垂直方向的线性布局,背景颜色为浅灰色(#f5f5f5),占据整个屏幕 - 工具栏:
Toolbar
工具栏位于顶部,标题为“首页”,标题文字颜色为白色 - 可滚动内容区域:
NestedScrollView
包裹整个内容区域,支持垂直滚动 - 内容布局:
LinearLayoutCompat
内容区域也是一个垂直方向的线性布局,包含多个子组件 - 轮播图:
BannerView
轮播图组件,高度为160dp,上下左右各有10dp的边距
3. 总结
- 这个布局文件定义了一个典型的Android应用首页,包含以下几个主要部分:
- 工具栏:位于顶部,显示标题“首页”。
- 轮播图:展示图片轮播。
- 服务入口:两行共八个服务入口,每个入口包含图标和文字。
- 功能工具:三个功能入口,分别用于问题发布、失物招领和问题咨询。
4. 关于作者其它项目视频教程介绍
- Android新闻资讯app实战:https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
- Androidstudio开发购物商城实战:https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
- Android开发备忘录记事本实战:https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
- Androidstudio底部导航栏实现:https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
- Android使用TabLayout+ViewPager2实现左右滑动切换:https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8