一、实验目标
- 模仿微信“发现”页创建列表布局;
- 学习使用Textview imageview、LinearLayout。
二、实验步骤
一、逻辑梳理
-
页面上主要包含5组列表,每组列表包含1-2个列表项。
具体内容解释如下:
• 列表组1:“朋友圈”单行列表项;
• 列表组2:“扫一扫”和“摇一摇”两行列表项;
• 列表组3:“看一看”和“搜一搜”两行列表项;
• 列表组4:“购物”和“游戏”两行列表项;
• 列表组5:“小程序”单行列表项。 -
梳理步骤
- 首先设计一个外部总垂直布局,包含所有的列表组
- 写五个LinearLayout来构建这五个列表组
- 每个列表组的单独构建
- 列表组之间的间隔样式搭建
二、代码实现
-
创建父布局,给父布局设置背景色和垂直方向
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="#CCC8C8" android:layout_height="match_parent" android:orientation="vertical"> </LinearLayout>
-
构建第一个列表组,设置宽高、背景色、垂直方向
<LinearLayout android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="60dp" android:background="#fff" android:orientation="horizontal">
-
创建列表组里的第一个图标,设置宽高、背景色、与左边的距离、居中
<LinearLayout android:layout_marginTop="10dp" android:layout_width="match_parent" android:layout_height="60dp" android:background="#fff" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center_vertical" android:layout_marginLeft="15dp" android:background="@mipmap/icon_pengyou" />
-
创建列表组中的汉字,设置汉字、宽高、字体颜色等
<TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:textStyle="bold" android:textColor="#333" android:textSize="18dp" android:gravity="center_vertical" android:layout_weight="1" android:text="朋友圈" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginRight="15dp" android:background="@mipmap/right" />
-
创建列表组右边的箭头,设置宽高、背景、与右边的距离。
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginRight="15dp" android:background="@mipmap/right" />
-
按照上述步骤进行编写接下来的列表组,增设图标、填写文本。
三、程序运行结果
最终在手机上运行结果如下:
四、问题总结与体会
- 这次是我第一次写app相关的内容,感觉十分新奇,虽然从安装环境开始就出现了一些小插曲,但最后还是顺利解决了。
- 在写同一个列表组时,中间隔开两个表的线我苦恼了很久应该如何解决,后来经过老师开导只要将两个表之间加一些间距就可以了。
- 这次实验让我觉得 写APP也充满了乐趣,自己设计页面的心情非常新奇,也非常愉悦。