安卓移动-作业2

实验报告

实验目的 (Experiment Purpose)

Get familiar with designing Android screens using layouts.

实验环境 (Experiment Environment)

software： java version "18.0.2"，Android Studio 2021.2.1 Patch 2
Operating system：Window 10

实验内容 (Experiment content)

3.1 Experimental data

Set the string in Android/app/res/layout/value/strings.xml.

在 Android/app/res/layout/value/strings.xml中制定字符串。

<resources>
    <string name="app_name">Flag</string>
    <string name="s1">Ten Question Flag Quiz</string>
    <string name="s2">Question 1 of 10</string>
    <string name="s3">选择题目</string>
    <string name="s4">选择地区</string>
    <string name="s5">选择国家</string>

    <string name="country1">中国</string>
    <string name="country2">香港</string>
    <string name="country3">美国</string>
    <string name="country4">澳门</string>
    <string name="country5">越南</string>
    <string name="country6">英国</string>
</resources>

Set the images in Android/app/res/drawable.
在 Android/app/res/drawable中放置图片。

3.2 Experimental process

Set the layout in Android/app/res/layout/activity_main.xml.
在 Android/app/res/layout/activity_main.xml文件中设定布局。

As shown in the figure above, Flag is generally a vertical layout, including two TextViews, a ImageView, a TableLayout, two Textviews:
The two TextViews are "10 Questions Flag Quiz" and "Question 1 of 10" respectively.
ImageView is the flag pattern table format.
The layout contains six country options. All options are presented in Button form.
The two TextViews are "Select Topic" and "Select Region".
如上图Flag总体是垂直布局，其中包含两个TextView，一个ImageView，一个表格式布局，两个TextView：
两个TextView分别是“10个问题”和“第1题”
ImageView是国旗图案
表格式布局包含了6个国家选项，所有选项以Button形式呈现
两个TextView分别是“选择题目”和“选择地区”。

3.3 Experimental results

The results display and code implementation are shown as follows:
结果展示和代码实现如下图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

……

    <Button
        android:id = "@+id/button_choose2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/s4"/>
</LinearLayout>

3.4 Analysis

• Set layout via , vertical layout to use statement “android:orientation="vertical" ”, and horizontal layout to use statement “android: orientation=" horizontal ".
• The layout can be set to when multiple options are arranged into a table type. The controls of each row are included in the TableRow.
• Layouts and layouts allow nesting.

设定布局使用，垂直布局则使用语句“android:orientation="vertical"”，水平布局则是用语句“android:orientation="horizonal"”。
多个选项排列成表格型可以设定布局为，每一行的控件包含在TableRow中。
布局之间允许嵌套。

实验小结 (Summary)

My thoughts and experiences

• The length and width settings of controls can make the page more
  beautiful, rather than directly selecting "match_parent" options

• The text displayed by TextView should not be directly defined in
  "Android: text" with double quotation marks, but should be
  specified in the "string.xml" file in the form of "id" and
  referenced with @.

• Nesting between layouts can make the structure of the page clearer
  and cleaner.

控件的长度和宽度设置dp可以使页面更加美观，而不是直接选择<match_parent>的选项。
TextView展示的文字不应该直接在android:text中用双引号定义，而是应该在string.xml文件中通过id形式制定字符串，在使用@进行引用。
布局之间嵌套可以使页面的构架更加清晰整洁。

附录 (Appendix)

activity_main.xml

    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        android:text="@string/s2"
        android:textSize="30sp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="220dp"
        android:src="@drawable/chinese" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:gravity="center"
        android:text="@string/s5"
        android:textSize="20sp" />

    <TableLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="150dp">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">

            <Button
                android:id="@+id/button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/country1" />

            <Button
                android:id="@+id/button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/country2" />

            <Button
                android:id="@+id/button03"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/country3" />
        </TableRow>

        <TableRow
            android:layout_height="82dp"
            android:gravity="center">

            <Button
                android:id="@+id/button04"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/country4" />

            <Button
                android:id="@+id/button05"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/country5" />

            <Button
                android:id="@+id/button06"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/country6" />
        </TableRow>
    </TableLayout>

    <Button
        android:id = "@+id/button_choose1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/s3"/>

    <Button
        android:id = "@+id/button_choose2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/s4"/>

</LinearLayout>