2022年夏季《移动软件开发》实验报告
一、实验目标
1.完成微信朋友圈的界面设计,效果如下:
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1.准备工作
下载安装Android Studio,配置好相关的环境。
2.视图设计
首先是学习认识简单的界面布局,学习textview,imageview组件
1.构建父布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">
</LinearLayout>
2.放入第一个列表组
设置其宽高,背景色,设置垂直方向
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#fff"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
3.创建列表组的第一个图标
设置好离父元素的间距(layout_margintop),将素材导入即可
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="20dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/icon_pengyou"
/>
</LinearLayout>
4.创建文字
<TextView
android:layout_width="1000dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="朋友圈"
android:textSize="60dp"
android:gravity="center_vertical"/>
5.放置最右边的小标签
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_marginRight="20dp"
android:background="@mipmap/right"
/>
效果图如下:
剩下的就是摆放相同的组件了。
需要注意的事部分组件之间应该存在距离(marginTop)
所有完成代码如下:(imageview 写死了,本来用wrapcontent太小了,可能是图标的问题)
<?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="#e5e5e5"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#ffffff"
android:orientation="horizontal"
android:layout_marginTop="20dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/icon_pengyou"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="朋友圈"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="80dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/sao"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="扫一扫"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="0dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/yao"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="摇一摇"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="80dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/look"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="看一看"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="0dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/search"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="搜一搜"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="80dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/shop"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="购物"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="0dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/game"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="游戏"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout> <LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_marginTop="80dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_vertical"
android:layout_gravtity="center_vertical"
android:layout_margin="20dp"
android:background="@mipmap/program"
/>
<TextView
android:layout_width="0900dp"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:textStyle="bold"
android:textColor="#333"
android:text="小程序"
android:textSize="60dp"
android:gravity="center_vertical"/>
<ImageView
android:layout_width="28dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:background="@mipmap/right"
/>
</LinearLayout>
</LinearLayout>
三、程序运行结果
四、问题总结与体会
遇到的问题
拖入图片时报错。
解决方案:图片的名称改成中文的,放入mipmap-xxhdpi文件夹下。
心得体会
本次实验让我对于安卓开发有了一个初步的了解,让我对于安卓的界面布局设计有了一定的理解,通过学习了布局方式(linear layer)和 基本组件(textView 和 imageView),使我对于组件的属性,如何摆放有了一定的熟练度,为我接下来安卓开发的学习打下的基础。