仿写微信页面

一、实验目标

1. 模仿微信“发现”页创建列表布局；
2. 学习使用Textview imageview、LinearLayout。

二、实验步骤

一、逻辑梳理

1. 页面上主要包含5组列表，每组列表包含1-2个列表项。
   具体内容解释如下：
   • 列表组1：“朋友圈”单行列表项；
   • 列表组2：“扫一扫”和“摇一摇”两行列表项；
   • 列表组3：“看一看”和“搜一搜”两行列表项；
   • 列表组4：“购物”和“游戏”两行列表项；
   • 列表组5：“小程序”单行列表项。

2. 梳理步骤

   • 首先设计一个外部总垂直布局,包含所有的列表组
   • 写五个LinearLayout来构建这五个列表组
   • 每个列表组的单独构建
   • 列表组之间的间隔样式搭建

二、代码实现

1. 创建父布局，给父布局设置背景色和垂直方向

   <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>
   

2. 构建第一个列表组，设置宽高、背景色、垂直方向

   <LinearLayout
           android:layout_marginTop="10dp"
           android:layout_width="match_parent"
           android:layout_height="60dp"
           android:background="#fff"
           android:orientation="horizontal">
   

3. 创建列表组里的第一个图标，设置宽高、背景色、与左边的距离、居中

   <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" />
   

   

4. 创建列表组中的汉字，设置汉字、宽高、字体颜色等

   <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" />
   

   

5. 创建列表组右边的箭头，设置宽高、背景、与右边的距离。

           <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center_vertical"
               android:layout_marginRight="15dp"
               android:background="@mipmap/right" />
   
   

   

6. 按照上述步骤进行编写接下来的列表组，增设图标、填写文本。

   

三、程序运行结果

最终在手机上运行结果如下：

四、问题总结与体会

1. 这次是我第一次写app相关的内容，感觉十分新奇，虽然从安装环境开始就出现了一些小插曲，但最后还是顺利解决了。
2. 在写同一个列表组时，中间隔开两个表的线我苦恼了很久应该如何解决，后来经过老师开导只要将两个表之间加一些间距就可以了。
3. 这次实验让我觉得 写APP也充满了乐趣，自己设计页面的心情非常新奇，也非常愉悦。