第一个Android应用小程序

• 实验目标

仿微信“发现”页创建列表布局

页面上主要包含5组列表，每组列表包含1-2个列表项。

 具体内容解释如下：

 • 列表组1：“朋友圈”单行列表项；

 • 列表组2：“扫一扫”和“摇一摇”两行列表项；

 • 列表组3：“看一看”和“搜一搜”两行列表项；

 • 列表组4：“购物”和“游戏”两行列表项；

 • 列表组5：“小程序”单行列表项。

二、实验步骤

(1)首先设计一个外部总垂直布局,包含所有的列表组

创建父布局，对父布局进行设置背景色为#e5e5e5，设置父布局的垂直方向。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#e5e5e5"
    android:layout_height="match_parent"
    android:orientation="vertical">

构建第一个列表组

设置宽高、背景色和垂直方向。

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

创建列表组里的第一个图标

设置宽高、背景色、与左边的距离并且居中。

        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/icon_pengyou"
            android:layout_width="40dp"
            android:layout_height="40dp"/>

创建列表组中的汉字

设置汉字、宽高、字体颜色、字体样式、字体大小、与左侧的距离并且字体居中。

        <TextView
            android:layout_width="329dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="朋友圈"
            android:textColor="#333"
            android:textSize="18dp"
            android:textStyle="bold" />

创建列表组右边的箭头

设置宽和高、背景、水平居中和与右边的距离。

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

1. 同理，设置列表2、3、4、5。两个LinearLayout之间的间距可以通过如android:layout_marginTop="20dp"来控制间距大小。

三、程序运行结果

列出程序的最终运行结果及截图。