移动软件开发 实验5

一、 实验目标

1. 掌握Textview imageview 使用；

2、掌握LinearLayout 使用

• 实验步骤

1. 安装Android studio

（1）Java环境配置

·安装jdk

·环境变量配置

（2）下载安装Android studio

2.逻辑梳理

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

 具体内容解释如下：

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

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

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

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

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

3.页面设计

（1）添加图片素材

（2）首先我们创建他们的父布局，对父布局进行设置背景色，设置父布局的垂直方向

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

</LinearLayout>

（3）构建第一个列表组,设置宽高,设置背景色,设置垂直方向

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

</LinearLayout>

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

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

（5）创建列表组中的汉字，设置汉字，设置宽高，设置字体颜色，设置字体样式，设置字体大小，设置与左侧的距离，设置字体居中

<TextView
    android:textColor="#333"
    android:textStyle="bold"
    android:textSize="18dp"
    android:layout_marginLeft="15dp"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:text="朋友圈"
    android:layout_width="0dp"
    android:layout_height="wrap_content"/>

（6）创建列表组第二个图标

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

（7）设置列表间距

<TextView
    android:background="#f0f0f0"
    android:layout_width="wrap_content"
    android:layout_height="15dp"/>

1. 重复上述操作，依次创建其他列表组

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:background="#e5e5e5">
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/icon_pengyou"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="朋友圈"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="15dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/sao"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="扫一扫"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="1dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/yao"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="摇一摇"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="15dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/kan"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="看一看"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="1dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/sou"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="搜一搜"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="15dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/gou"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="购物"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="1dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/you"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="游戏"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginRight="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/right"
            android:layout_width="7dp"
            android:layout_height="13dp"/>
    </LinearLayout>
    <TextView
        android:background="#f0f0f0"
        android:layout_width="wrap_content"
        android:layout_height="15dp"/>
    <LinearLayout
        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_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/xiao"/>
        <TextView
            android:textColor="#333"
            android:textStyle="bold"
            android:textSize="18dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:text="小程序"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>

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

• 程序运行结果

 

  

四、问题总结与体会

通过本次实验，我掌握Textview imageview和LinearLayout 的使用，成功

创建了一个Android应用小程序界面，初步学习了一些界面布局方式。