ouc-exp5-blog

2022年夏季《移动软件开发》实验报告

一、实验目标

1.完成微信朋友圈的界面设计，效果如下：

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.准备工作

下载安装Android Studio，配置好相关的环境。

2.视图设计

首先是学习认识简单的界面布局，学习textview,imageview组件

1.构建父布局

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

2.放入第一个列表组

设置其宽高，背景色，设置垂直方向

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

3.创建列表组的第一个图标

设置好离父元素的间距（layout_margintop),将素材导入即可

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


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/icon_pengyou"
            />


    </LinearLayout>

4.创建文字

<TextView
            android:layout_width="1000dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="朋友圈"
            android:textSize="60dp"
            android:gravity="center_vertical"/>

5.放置最右边的小标签

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

效果图如下：

剩下的就是摆放相同的组件了。

需要注意的事部分组件之间应该存在距离（marginTop)

所有完成代码如下：(imageview 写死了，本来用wrapcontent太小了，可能是图标的问题)

<?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="140dp"
        android:background="#ffffff"
        android:orientation="horizontal"
        android:layout_marginTop="20dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/icon_pengyou"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="朋友圈"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginTop="80dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/sao"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="扫一扫"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginTop="0dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/yao"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="摇一摇"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginTop="80dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/look"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="看一看"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginTop="0dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/search"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="搜一搜"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginTop="80dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/shop"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="购物"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginTop="0dp"
        >


        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_vertical"
            android:layout_gravtity="center_vertical"
            android:layout_margin="20dp"
            android:background="@mipmap/game"
            />
        <TextView
            android:layout_width="0900dp"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:textStyle="bold"
            android:textColor="#333"
            android:text="游戏"
            android:textSize="60dp"
            android:gravity="center_vertical"/>
        <ImageView
            android:layout_width="28dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@mipmap/right"
            />

    </LinearLayout> <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:background="#fff"
    android:orientation="horizontal"
    android:layout_marginTop="80dp"
    >


    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_vertical"
        android:layout_gravtity="center_vertical"
        android:layout_margin="20dp"
        android:background="@mipmap/program"
        />
    <TextView
        android:layout_width="0900dp"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:textStyle="bold"
        android:textColor="#333"
        android:text="小程序"
        android:textSize="60dp"
        android:gravity="center_vertical"/>
    <ImageView
        android:layout_width="28dp"
        android:layout_height="20dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="100dp"
        android:background="@mipmap/right"
        />

</LinearLayout>
</LinearLayout>

三、程序运行结果

四、问题总结与体会

遇到的问题

拖入图片时报错。

解决方案：图片的名称改成中文的，放入mipmap-xxhdpi文件夹下。

心得体会

本次实验让我对于安卓开发有了一个初步的了解，让我对于安卓的界面布局设计有了一定的理解，通过学习了布局方式（linear layer)和 基本组件(textView 和 imageView),使我对于组件的属性，如何摆放有了一定的熟练度，为我接下来安卓开发的学习打下的基础。