OUC-移动软件开发-实验5

移动软件开发-实验5

一、实验目标

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

二、实验步骤

1. 搭建 Java 环境

下载 QQ 群中的 jdb 文件，解压到英文路径下，配置环境变量后，在 cmd 窗口中检验是否安装成功。

💡 因为以前配环境的经验太少，这里碰到了一个以前没有碰到过的问题，可以说是踩了个坑。 我并不知道配置环境变量之后需要重启电脑，知道同学提醒才知道。所以中间卡了很久，只是因为没有重启电脑。

2. 搭建页面

主要用到了 LinerLayout 的线性布局。

1. 案例中多个盒子的纵向排列，其实是用 android:orientation="vertical" 实现的。
2. 案例中多个水平的盒子，其实就是 LinerLayout 的复制粘贴。

💡 代码部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5e5e5"
    android:orientation="vertical">
    <!--朋友圈-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="20dp"
        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:layout_weight="1"
            android:gravity="center_vertical"
            android:text="朋友圈"
            android:textColor="#333"
            android:textSize="18dp"
            android:textStyle="bold" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>
    <!--扫一扫-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        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/img1" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>

    <!--    分割线-->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#efefef"></View>

    <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_gravity="center_vertical"
            android:layout_marginLeft="15dp"
            android:background="@mipmap/img2" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>
    <!--看一看-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        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/img3" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>
    <!--    分割线-->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#efefef"></View>

    <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_gravity="center_vertical"
            android:layout_marginLeft="15dp"
            android:background="@mipmap/img4" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>
    <!--购物-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        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/img5" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>
    <!--    分割线-->
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#efefef"></View>

    <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_gravity="center_vertical"
            android:layout_marginLeft="15dp"
            android:background="@mipmap/img6" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>
    <!--小程序-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="30dp"
        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/img7" />

        <TextView
            android:layout_width="0dp"
            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_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"
            android:background="@mipmap/right" />
    </LinearLayout>

</LinearLayout>

💡 实际效果 

三、程序运行结果

四、问题总结与体会

配环境方面

一直以来，配环境都是一件让我头疼的事情。不论是学习前端框架时，安装 Node.js 环境，又或是安装 Python 时，配置 Python 的环境，似乎从来都没有那么顺利，最终结果总是出不来。

但是配环境，其实是一件一劳永逸的事儿，你配完环境之后，之后的代码就可以跑了，就好像进入一个领域的敲门砖，对待这块敲门砖应该要有耐心。

安卓开发方面

大前端开发我认为包括网页开发、App开发、小程序开发。其中网页和小程序我都有涉猎，这次的课程帮助我补上了App开发的短板。接触了App后，我个人还是更加喜欢Web开发。