ouc_移动软件开发_实验五

一、实验目标

模仿微信“发现”页创建列表布局，学习使用Textview imageview、LinearLayout

二、实验步骤

1.准备工作：

（1）安装JDK以及Android Studio，搭建安卓应用开发环境

（2）准备UI设计所需要的微信相关功能的图标

（3）下载夜神模拟器，创建安卓虚拟机，并且在cmd中找到夜神模拟器的bin文件夹地址，执行命令：nox_adb.exe connect 127.0.0.1:62001，将Android Studio与模拟器连接

2.编写代码，设计UI（此次实验未涉及后端相关功能的编写），代码内容以及相关功能注释如下：

<?xml version="1.0" encoding="utf-8"?>
<!--创建父布局-->
<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:background="#fff" //设置背景色
        android:orientation="horizontal" //设置垂直方向为水平
        android:layout_height="60dp" //设置该列表组高度
        android:layout_width="match_parent" //设置该列表组宽度为自适应满屏
        android:layout_marginVertical="30dp"//设置该下一个列表组与该列表组底部的距离>


            <ImageView
                android:layout_marginLeft="15dp" //设置图像与左边相距距离
                android:layout_gravity="center_vertical" //设置对齐方式为垂直居中
                android:background="@mipmap/icon_pengyou" //图片地址
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_margin="20dp"/>

<!--设置表中的文字-->
            <TextView
                android:text="朋友圈"
                android:textSize="18dp"
                android:gravity="center_vertical"
                android:textStyle="bold"
                android:layout_width="0dp"
                android:textColor="#333"
                android:layout_weight="1"
                android:layout_height="match_parent"/>

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

    </LinearLayout>
<!--创建第二个列表组-->
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_height="60dp"
        android:layout_width="match_parent">


        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/scan"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="20dp"/>

        <!--设置表中的文字-->
        <TextView
            android:text="扫一扫"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:layout_width="0dp"
            android:textColor="#333"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

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

<!--创建第三个列表组-->
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_height="60dp"
        android:layout_width="match_parent"
        android:layout_marginBottom="30dp">


        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/swing"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="20dp"/>

        <!--设置表中的文字-->
        <TextView
            android:text="摇一摇"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:layout_width="0dp"
            android:textColor="#333"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

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

    </LinearLayout>

    <!--创建第四个列表组-->
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_height="60dp"
        android:layout_width="match_parent">


        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/see"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="20dp"/>

        <!--设置表中的文字-->
        <TextView
            android:text="看一看"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:layout_width="0dp"
            android:textColor="#333"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

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

<!-- 第五个列表组-->
    <LinearLayout
    android:background="#fff"
    android:orientation="horizontal"
    android:layout_height="60dp"
    android:layout_width="match_parent"
    android:layout_marginBottom="30dp">


    <ImageView
        android:layout_marginLeft="15dp"
        android:layout_gravity="center_vertical"
        android:background="@mipmap/search"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_margin="20dp"/>

    <!--设置表中的文字-->
    <TextView
        android:text="搜一搜"
        android:textSize="18dp"
        android:gravity="center_vertical"
        android:textStyle="bold"
        android:layout_width="0dp"
        android:textColor="#333"
        android:layout_weight="1"
        android:layout_height="match_parent"/>

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

</LinearLayout>
    <!--创建第六个列表组-->
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_height="60dp"
        android:layout_width="match_parent">


        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/buy"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="20dp"/>

        <!--设置表中的文字-->
        <TextView
            android:text="购物"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:layout_width="0dp"
            android:textColor="#333"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

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

<!--创建第七个列表组-->
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_height="60dp"
        android:layout_width="match_parent"
        android:layout_marginBottom="30dp">


        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/game"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="20dp"/>

        <!--设置表中的文字-->
        <TextView
            android:text="游戏"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:layout_width="0dp"
            android:textColor="#333"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

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

    </LinearLayout>

    <!--创建第八个列表组-->
    <LinearLayout
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_height="60dp"
        android:layout_width="match_parent">


        <ImageView
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/chengxu"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_margin="20dp"/>

        <!--设置表中的文字-->
        <TextView
            android:text="小程序"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:textStyle="bold"
            android:layout_width="0dp"
            android:textColor="#333"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

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

</LinearLayout>

通过观察实验代码，我们可以看到，这次设计的微信界面UI每一个功能的LinearLayout模块其实是大致相似的，所以我们只需要完成一个模块的UI设计，接下来的模块就可以通过复制粘贴后改变图片的src地址以及文本标题来更改至相应的功能UI。值得注意的是，因为在我们本次设计界面的UI中，有的LinearLayout之间是有一定间距的，我们可以通过设置android:layout_marginBottom="30dp"来更改下一个列表组距离该列表组底部的距离。

三、程序运行结果

程序运行结果：

程序成功运行

程序运行截图：