2022年夏季《移动软件开发》实验报告

一、实验目标

1.完成App的界面设计，效果如下：

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.准备工作

下载安装Android Studio，配置好相关的环境。

2.视图设计

1.首先要创建一个父布局，即linearLayou.

2.新建一个scrollView，用于上下滑动

3.在scrollView内部创建父布局

代码如下：

<?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"><ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"></LinearLayout></ScrollView></LinearLayout>

接下来我们需要创建顶部首页的显示栏，如下：

<TextViewandroid:layout_width="match_parent"android:layout_height="50dp"android:text="首页"android:textSize="18dp"android:textColor="#333"android:gravity="center"android:textStyle="bold"></TextView>

加入图片

<ImageViewandroid:layout_width="match_parent"android:layout_height="200dp"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"android:src="@mipmap/test_img"/>

接下来是4个小图标和文本的区域。

我们先创建一个线性布局，然后把基本框架做好。

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:weightSum="4"android:layout_marginRight="10dp"android:layout_marginLeft="10dp"><LinearLayoutandroid:layout_width="0dp"android:layout_height="100dp"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginTop="10dp"android:layer_gravity="center_horizontal"android:src="@mipmap/test_icon1"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="骑房"android:gravity="center"android:layout_marginTop="10dp"android:layout_marginRight="42dp"android:textSize="16dp"android:textStyle="bold"/></LinearLayout>

上面代码是做好一个图标，继续编写其他的图标。

完成四个图标后，效果如下：

接下来是做下面的待办的代码：

一样的套路，设置好边距，要注意scrollView组件下只能有一个组件，不然会报错。

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_marginTop="20dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="待办（10）"android:textStyle="bold"android:textColor="#333"android:layout_marginLeft="10dp"android:layout_weight="1"></TextView><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="更多"android:textStyle="bold"android:textColor="#333"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"></TextView></LinearLayout>

最后完成tabbar即可，注意tabbar应该在scorlview组件外，因为菜单栏不应该被一起滑动。

代码如下：

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:weightSum="4"><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginLeft="20dp"android:layout_marginTop="15dp"android:background="@mipmap/test_icon3" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="首页"android:layout_below="@id/img"android:layout_centerHorizontal="true"/></RelativeLayout><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img2"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginLeft="20dp"android:layout_marginTop="15dp"android:background="@mipmap/daiban" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="验房"android:layout_below="@id/img2"android:layout_centerHorizontal="true"/></RelativeLayout><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img3"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginLeft="20dp"android:layout_marginTop="15dp"android:background="@mipmap/baobiao" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="统计"android:layout_below="@id/img3"android:layout_centerHorizontal="true"/></RelativeLayout><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><ImageViewandroid:id="@+id/img4"android:layout_width="30dp"android:layout_height="30dp"android:layout_centerHorizontal="true"android:layout_marginLeft="20dp"android:layout_marginTop="15dp"android:background="@mipmap/manage" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="设置"android:layout_below="@id/img4"android:layout_centerHorizontal="true"/></RelativeLayout></LinearLayout>

三、程序运行结果

四、问题总结与体会

遇到的问题

设计tabbar时，发现无法放在最下面。通过添加一层linear_layout解决。

心得体会

本次实验让我对于安卓开发有了一个进一步的了解，让我对于安卓的界面布局设计有了一定的理解，通过学习了布局方式（relative layer)和基本组件(scroll view),让我对ui的布局设计有了更深的认识。

ouc-exp6-blog相关推荐

和风天气ouc——about页面
about关于页关于页是一个展示页面,没有很多用户交互,使用到的API有复制到剪切板wx.setClipboardData,可实现单击复制.这里为增加小程序的趣味性,添加了一个swiper控件可以左 ...
https://blog.csdn.net/blmoistawinde/article/details/84329103
背景很多场景需要考虑数据分布的相似度/距离:比如确定一个正态分布是否能够很好的描述一个群体的身高(正态分布生成的样本分布应当与实际的抽样分布接近),或者一个分类算法是否能够很好地区分样本的特 ...
欢迎大家批评：CSDN Blog用户体验调查
CSDN Blog自2004年7月上线以来,得到了各位用户的大力支持,已经成为大家发表专业技术文章和进行技术交流的园地.为了给各位作者和读者提供更好的服务,我们组织了这次用户问卷调查,希望大家能够 ...
测一测你的blog魔症有多严重
测一测你的blog魔症有多严重在Donews.net那里看到了这个有趣的测试:Are You a Blogaholic? 用来测试你对Blog的迷恋程度. 下面是我的得分与评价: 14058 peo ...
为什么不提供离线Blog管理工具呢?
网络Blog现在是到处开花, 好像全世界的网民都开始写Blog了. 但因为Web的HTTP无状态协议, 网站本身都自己设置有session过期时间. 如果写的Blog文字多,时间一长用户登录状态就没了 ...
2010年9月blog汇总：敏捷个人和模型驱动开发
9月份指标产品开发开始同时进行两个客户的开发,所以考虑了客户化如何开发的问题:在企业定额产品上,参与清单综合单价库的产品架构并做了用户调研前期准备工作:再就是整理了一下模型驱动开发理论以及思考了Ope ...
2010年5月blog汇总:OpenExpressApp、其他
OpenExpressApp 信息系统开发平台OpenExpressApp - 框架待完善工作事项信息系统开发平台OpenExpressApp - 报表模块支持ReportObjectView 信息 ...
JakartaEE Exception: Invalid bound statement (not found): com.mazaiting.blog.dao.UserDao.selectUs...
异常 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.mazaiting.bl ...
刚申请了Blog，首贴庆祝！
刚申请了Blog,首贴庆祝! 转载于:https://www.cnblogs.com/ele-eye/archive/2011/11/17/2252654.html
『03网络』实验一：多功能浏览器的使用和个人Blog的创建和使用
实验一:多功能浏览器的使用和个人Blog的创建和使用<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office: ...

ouc-exp6-blog