【Android-UI实战】1、选餐商城 App 布局实战

已于 2025-03-13 15:39:12 修改
阅读量70 收藏
点赞数
文章标签： android studio android ide
于 2022-10-04 20:46:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaoyangwm/article/details/127165780
版权

文章目录

终于该实战一个像模像样的 App 了，本节只实现 UI 布局，暂时没有业务逻辑

首先写 activity_main.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="match_parent"
    android:layout_height="match_parent"
    android:background="#2E2E2E"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:padding="28dp">

        <ImageView
            android:layout_width="25dp"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:src="@drawable/search" />

        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/profile" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">

        <ImageView
            android:id="@+id/i1"
            android:layout_width="10dp"
            android:layout_height="15dp"
            android:layout_marginTop="3dp"
            android:layout_marginRight="5dp"
            android:src="@drawable/location" />

        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/i1"
            android:text="Delivery"
            android:textColor="#fff"
            android:textSize="16dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/t1"
            android:text="Mumbai, Maharashtra"
            android:textColor="#C3C3C3"
            android:textSize="14dp" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/filter" />

    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:text="Today's Breakfast"
            android:textColor="#fff"
            android:textSize="24dp" />

        <RelativeLayout
            android:layout_width="400dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:background="@drawable/big_card">

            <TextView
                android:id="@+id/tt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="120dp"
                android:text="Caramel Pancakes"
                android:textColor="#fff"
                android:textSize="24dp" />

            <ImageView
                android:layout_width="110dp"
                android:layout_height="20dp"
                android:layout_below="@id/tt1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/rating_white_small" />

        </RelativeLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginBottom="15dp"
            android:text="Healthy"
            android:textColor="#fff"
            android:textSize="24dp" />

        <ImageView
            android:layout_width="400dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:background="@drawable/home_item_top" />

        <RelativeLayout
            android:layout_width="400dp"
            android:layout_height="110dp"
            android:layout_gravity="center"
            android:background="@drawable/home_menu_bottom"
            android:padding="10dp">

            <TextView
                android:id="@+id/st"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="NonVegetarian - Egg"
                android:textColor="#c3c3c3"
                android:textSize="14dp" />

            <TextView
                android:id="@+id/ht"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/st"
                android:layout_marginTop="5dp"
                android:text="Delight grape omelette"
                android:textColor="#fff"
                android:textSize="18dp" />

            <ImageView
                android:layout_width="110dp"
                android:layout_height="16dp"
                android:layout_below="@id/ht"
                android:layout_marginTop="8dp"
                android:src="@drawable/rating_orange_big" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ht"
                android:layout_alignParentEnd="true"
                android:layout_marginTop="5dp"
                android:layout_marginRight="30dp"
                android:text="$10"
                android:textColor="#c3c3c3"
                android:textSize="22dp" />
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

activity_main.xml 的布局效果如下：

在这里插入图片描述

然后，在 layout 目录下新建 menu_item 的布局文件，代码如下：

<?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="match_parent"
    android:background="#2E2E2E"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:padding="28dp">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="35dp"
            android:src="@drawable/search"
            android:layout_centerVertical="true"/>

        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/profile"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">

        <ImageView
            android:id="@+id/i1"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:src="@drawable/location"
            android:layout_marginRight="5dp"
            android:layout_marginTop="3dp"/>

        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Delivery"
            android:textSize="18dp"
            android:textColor="#fff"
            android:textStyle="bold"
            android:layout_toRightOf="@id/i1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mumbai, Maharashtra"
            android:textSize="16dp"
            android:textColor="#C3C3C3"
            android:layout_below="@id/t1"/>

        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/filter"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

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

        <ImageView
            android:layout_width="120dp"
            android:layout_height="130dp"
            android:src="@drawable/food_img1"
            android:layout_marginLeft="20dp"/>

        <ImageView
            android:layout_width="120dp"
            android:layout_height="130dp"
            android:src="@drawable/food_img2"
            android:layout_marginLeft="15dp"/>

        <ImageView
            android:layout_width="120dp"
            android:layout_height="130dp"
            android:src="@drawable/food_img3"
            android:layout_marginLeft="15dp"/>

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Recommended Dishes"
        android:textSize="26dp"
        android:textColor="#fff"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"/>

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

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

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/menu_img1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"/>

            <RelativeLayout
                android:layout_width="316dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:padding="10dp">

                <TextView
                    android:id="@+id/ht"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Potato Fingers"
                    android:textColor="#fff"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/iv1"
                    android:layout_width="120dp"
                    android:layout_height="18dp"
                    android:layout_below="@id/ht"
                    android:layout_marginTop="8dp"
                    android:src="@drawable/rating_orange_small" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv1"
                    android:layout_marginTop="5dp"
                    android:text="Non Vegetarian - Egg"
                    android:textColor="#C3C3C3"
                    android:textSize="14dp" />

                <Button
                    android:layout_width="110dp"
                    android:layout_height="35dp"
                    android:text="Order now"
                    android:textSize="11dp"
                    android:textColor="#fff"
                    android:textStyle="bold"
                    android:background="@drawable/button"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp"/>

            </RelativeLayout>

        </LinearLayout>

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

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/menu_img2"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"/>

            <RelativeLayout
                android:layout_width="316dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:padding="10dp">

                <TextView
                    android:id="@+id/ht1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Roasted Salad"
                    android:textColor="#fff"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/iv2"
                    android:layout_width="120dp"
                    android:layout_height="18dp"
                    android:layout_below="@id/ht1"
                    android:layout_marginTop="8dp"
                    android:src="@drawable/rating_orange_small" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv2"
                    android:layout_marginTop="5dp"
                    android:text="Non Vegetarian - Egg"
                    android:textColor="#C3C3C3"
                    android:textSize="14dp" />

                <Button
                    android:layout_width="110dp"
                    android:layout_height="35dp"
                    android:text="Order now"
                    android:textSize="11dp"
                    android:textColor="#fff"
                    android:textStyle="bold"
                    android:background="@drawable/button"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp"/>

            </RelativeLayout>

        </LinearLayout>

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

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/menu_img3"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"/>

            <RelativeLayout
                android:layout_width="316dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:padding="10dp">

                <TextView
                    android:id="@+id/ht2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Sandwich"
                    android:textColor="#fff"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/iv3"
                    android:layout_width="120dp"
                    android:layout_height="18dp"
                    android:layout_below="@id/ht2"
                    android:layout_marginTop="8dp"
                    android:src="@drawable/rating_orange_small" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv3"
                    android:layout_marginTop="5dp"
                    android:text="Non Vegetarian - Egg"
                    android:textColor="#C3C3C3"
                    android:textSize="14dp" />

                <Button
                    android:layout_width="110dp"
                    android:layout_height="35dp"
                    android:text="Order now"
                    android:textSize="11dp"
                    android:textColor="#fff"
                    android:textStyle="bold"
                    android:background="@drawable/button"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp"/>

            </RelativeLayout>

        </LinearLayout>

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

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/menu_img4"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"/>

            <RelativeLayout
                android:layout_width="316dp"
                android:layout_height="110dp"
                android:layout_gravity="center"
                android:padding="10dp">

                <TextView
                    android:id="@+id/ht3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="Aloo Tikki"
                    android:textColor="#fff"
                    android:textSize="20dp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/iv4"
                    android:layout_width="120dp"
                    android:layout_height="18dp"
                    android:layout_below="@id/ht3"
                    android:layout_marginTop="8dp"
                    android:src="@drawable/rating_orange_small" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv4"
                    android:layout_marginTop="5dp"
                    android:text="Non Vegetarian - Egg"
                    android:textColor="#C3C3C3"
                    android:textSize="14dp" />

                <Button
                    android:layout_width="110dp"
                    android:layout_height="35dp"
                    android:text="Order now"
                    android:textSize="11dp"
                    android:textColor="#fff"
                    android:textStyle="bold"
                    android:background="@drawable/button"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp"/>

            </RelativeLayout>

        </LinearLayout>


    </LinearLayout>

</LinearLayout>

menu_item.xml 布局效果如下：

在这里插入图片描述

运行后，效果如下：

在这里插入图片描述

终于完成了选餐商城的布局，下一节我们做一些复杂的业务逻辑。

Androidstudio开发，购物商城app项目演示（一）
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-10 3088
相关视频教程在某站上面(🔍浩宇软件开发)
Android studio案例Android商城
m0_69349026的博客
04-20 4143
Android移动应用基础书上案例购物商城教程
Android Studio实现功能强大的购物商城App
热门推荐
振华OPPO的博客世界
11-14 5万+
本次项目是现在软件商店很流行的购物商城APP，现在万物互联的时代，网上shopping早已经是大家的习惯了。足不出户地选择自己想要的商品进行购买多么地方便，这就促使了这款购物商城APP的出现。它具有底部导航栏，有首页、分类、发现、购物车和个人中心五个选项卡，每个选项卡功能都很丰富，资源文件都是放在Tomcat服务器里面的，直接调用就行。总体来说是非常好的实战项目。
基于android的手机商城app
u014388322的专栏
01-01 2604
（5）个人信息操作功能：用户通过登录成功后，点击个人信息页面可在此页面查看用户的个人信息，也可通过修改页面进行个人信息的修改，并保存修改后的信息。（6）订单管理员功能：用户登录成功后，点击个人订单页面，可以查看自己购物物品的订单信息，包括订单的时间，金额，状态以及所购买母婴用品的内容。（2）母婴用品详细信息功能：用户登录成功后显示母婴用品页面，点击母婴用品跳转至母婴用品详细信息页面，通过该页面可以浏览母婴用品的具体信息。5：进行客户端对api接口的调用，也就是获取数据库的数据以及在客户端进行显示。
基于Android Studio如何实现 购物商城 案例（简单易上手）
编程乐学的博客
12-15 2万+
Android studio期末设计大作业~购物商城App①启动页②.用户登录/注册功能③主页面功能- 顶部轮播图功能- 搜索功能- 商品目录- 商品列表-点击商品列表进入详情页④ 购物车功能- 商品数量的增加减少- 商品支付购买⑤ 我的页面- 修改用户密码⑥详情页面- 显示商品详情信息启动页：应用启动时显示的欢迎页面。用户登录/注册功能：用户可以通过输入用户名和密码进行登录或注册新账户。顶部轮播图功能：展示热门商品或促销活动的轮播图。
Android Studio开发实战：从零基础到App上线
08-28
《Android Studio开发实战：从零基础到App上线》是一本旨在帮助初学者全面掌握Android应用开发的实战指南。书中的内容涵盖了从环境搭建、基本概念理解到实际项目开发的全过程，旨在让读者能够从无到有，独立完成一个...
Android实战内容：TestApp1
07-08
在Android开发领域，TestApp1是一个典型的实战项目名称，它可能涵盖了从应用设计到功能实现的全过程。在本文中，我们将深入探讨与Android Studio、Android操作系统以及APP开发相关的知识点。 首先，Android Studio...
Android实战内容：TestApp
07-07
在Android开发领域，TestApp是一个典型的实战项目名称，它涵盖了Android应用从设计到实现的各个环节。这个项目可能是为了教授开发者如何构建一个完整的Android应用程序，强调实践操作和测试的重要性。在这个项目中，...
Android App界面的ListView布局实战演练
09-02
本篇实战演练将深入探讨如何在Android App中实现ListView布局，并通过三种不同情况的实例进行详细讲解。 **一、继承ListActivity并使用ArrayAdapter** 1. **继承ListActivity**: 这种方式是最简单的ListView集成...
Android实战内容：TestApp2
07-08
【Android实战内容：TestApp2】项目解析与学习指南 在Android开发中，实战项目是提升技能的关键途径。"TestApp2"是一个典型的Android应用程序，它涵盖了从基础到进阶的多个技术点，旨在帮助开发者深入理解Android ...
Android Studio实现功能强大的购物商城APP，优秀课设，高分必看
08-29
本次项目是现在软件商店很流行的购物商城APP，现在万物互联的时代，网上shopping早已经是大家的习惯了。足不出户地选择自己想要的商品进行购买多么地方便，这就促使了这款购物商城APP的出现。它具有底部导航栏，有首页、分类、发现、购物车和个人中心五个选项卡，每个选项卡功能都很丰富，资源文件都是放在Tomcat服务器里面的，直接调用就行。总体来说是非常好的实战项目。资源包含源码和资源文件，直接按照我对应博客https://blog.csdn.net/qq_42257666/article/details/119799558进行部署运行即可。
Android Studio项目源码---食品商店FoodDeliveryApp-master---食品商店购物系统
05-13
该项目实现了一个电子的食品商店购物系统，可供学习Android Studio。安卓应用开发大作业。
Android Studio实现功能强大的购物商城APP源码，毕业设计，大作业，高分必看.zip
05-27
Android Studio实现功能强大的购物商城APP源码，毕业设计，大作业，高分必看。现在万物互联的时代，网上shopping早已经是大家的习惯了。足不出户地选择自己想要的商品进行购买多么地方便，这就促使了这款购物商城APP的出现。它具有 注册 登录 修改密码 重置密码（邮箱验证，考核结束将移除授权码） 商品详情加载 购物车 个人信息修改等等功能。总体来说是非常好的项目。资源包含源码和资源文件Android Studio实现功能强大的购物商城APP源码，毕业设计，大作业，高分必看。现在万物互联的时代，网上shopping早已经是大家的习惯了。足不出户地选择自己想要的商品进行购买多么地方便，这就促使了这款购物商城APP的出现。它具有 注册 登录 修改密码 重置密码（邮箱验证，考核结束将移除授权码） 商品详情加载 购物车 个人信息修改等等功能。总体来说是非常好的项目。资源包含源码和资源文件
android商城app项目实战，2024Android高级面试题汇总解答
A1867350的博客
03-23 672
以下是资料目录和内容部分截图里面包括详细的知识点讲解分析，带你一个星期入门Flutter。还有130个进阶学习项目实战视频教程，让你秒变大前端。《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可免费领取！。还有130个进阶学习项目实战视频教程，让你秒变大前端。[外链图片转存中…(img-1XSoS9W6-1711185978664)]《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可免费领取！
android商城app项目实战，安卓View绘制流程讲解
m0_61331407的博客
02-29 287
”开发还有什么可以研究的？因为一个清晰的目标，可以让你的职业成长围绕着一个点去积累经验，而这种日积月累的经验积累，也是你日后升职加薪的筹码。在没有明确的目标之前，把眼前的事情做到极致，把所有你能够在这个职位上得到的东西，统统用自己最大的努力去争取。根据我的经验，只有你在一个方向上坚持至少5年以上，你才有可能得到回报，而且这种回报会对你以后的职业发展产生一个相对长期的影响。我的一个朋友，已经近40岁的人了，做会计做了14年，仍然只是一个基层主管的职位，在公司中也看不到晋升的机会，好多年没有加薪了。
Android优秀参考APP源码
sinat_28371057的博客
02-10 6529
1 仿网易云音乐客户端 仿网易云音乐安卓版客户端，一个月内仍然有更新，接近2000star，相信是一款非常棒的音乐客户端。 涉及技术： Timber Fresco MediaPlayerProxy Android-ObservableScrollView retrofit ImitateNetEasyCloud okhttp CustomLrcView MagicaSakura h...
Android Studio AI插件与Bolt工具实战指南：从零到一打造智能应用
最新发布
全栈
05-16 885
本文深度解析Android Studio Gemini AI插件与Bolt.new低代码工具的实战应用，涵盖代码自动生成、多模态界面设计、天气API集成及全栈部署。通过自然语言指令快速构建智能应用，结合Gemini的代码优化与Bolt.new的端到端开发能力，实现从零到一的高效开发流程，助力开发者掌握AI驱动的现代开发范式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

呆呆的猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值