安卓移动-作业3-CSDN博客

本文链接：https://blog.csdn.net/ebatudou/article/details/132454710

实验报告

1. 实验目的 (Experiment Purpose)

Get familiar with designing Android screens using layouts, widgets and/or the webview.

2. 实验环境 (Experiment Environment)

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

3. 实验内容 (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">ImageButton</string>
    <string name="text1">You have pressed picture 1 【0】 times</string>
    <string name="text2">You have pressed picture 2 【0】 times</string>
    <string name="text3">You have pressed picture 3 【0】 times</string>
</resources>

Style the TextView in Android/app/res/drawable.
在 Android/app/res/drawable中设置文本框的样式。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@color/gray" />
    <corners
        android:radius="30dp"/>
    <stroke
        android:
        android:color="@color/white" />
</shape>

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, ImageButton is generally a vertical layout, including a horizontal layout and a vertical layout:
The horizontal layout contains three ImageButtons.
The horizontal layout contains three TextViews, record the number of clicks of three pictures respectively.
如上图，ImageButton项目总体是垂直布局，其中包含一个横向布局，一个垂直布局：
横向布局中是三张图片，即三个ImageButton。
垂直布局中是三个文本框，及三个TextView，分别记录三张图片的点击次数。

Set the function in Android\app\src\main\java\com\example\imagebutton\MainActivity.java.
在 function in Android\app\src\main\java\com\example\imagebutton\MainActivity.java文件中设置功能。

定义三个文本框
定义三个图片按钮
定义变量cnt
记录点击次数
为三个图片按钮设置监听器，当被点击即增加次数，并显示。

定义三个文本框

TextView textview1 = findViewById(R.id.text1);
TextView textview2 = findViewById(R.id.text2);
TextView textview3 = findViewById(R.id.text3);

定义三个图片按钮

ImageButton imageButton1 = findViewById(R.id.image1);
ImageButton imageButton2 = findViewById(R.id.image2);
ImageButton imageButton3 = findViewById(R.id.image3);

定义变量cnt
记录点击次数

final int[] cnt = {0,0,0};

为三个图片按钮设置监听器，当被点击即增加次数，并显示。

imageButton1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        cnt[0]++;
        textview1.setText("You have pressed picture 1 【"+ cnt[0] +"】 times");
    }
});

imageButton2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        cnt[1]++;
        textview2.setText("You have pressed picture 2 【"+ cnt[1] +"】 times");
    }
});

imageButton3.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        cnt[2]++;
        textview3.setText("You have pressed picture 3 【"+ cnt[2] +"】 times");
    }
});

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">
    ……
        <TextView
            android:id="@+id/text3"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="@string/text3"
            android:layout_width="380dp"
            android:layout_height="50dp"
            android:background="@drawable/textview_style"
            android:layout_margin="40dp" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</LinearLayout>

代码过长仅展示部分，完整代码见附录

3.4 Analysis

For the button, can set the listener.
The content of the text box can be set in MainActivity.java as well as in activity_main.xml.

对于按钮，可以设置监听器。
文本框的内容除了可以在activity_main.xml的android:text中设置，还可以在MainActivity.java的textview1.setText中设置。

4. 实验小结 (Summary)

4.1 My thoughts and experiences

The style attribute of the control can be created in drawable, and then set in activity_main.xml by statement android:background=“@drawable/style”.
You can change the color of the title bar by changing the “colorPrimary” in value/themes to make the page more beautiful.

控件的style属性可以在drawable中新建style.xml，然后在activity_main.xml中通过语句android:background="@drawable/style"设置。
可以通过改变value/themes中的colorPrimary改变标题栏的颜色，使页面更加美观。

5. 附录 (Appendix)

5.1 activity_main.xml

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="281dp"
        android:gravity="center">

        <ImageButton
            android:id="@+id/image1"
            android:layout_width="340px"
            android:layout_height="500px"
            android:scaleType="centerInside"
            android:src="@drawable/pic1" />

        <ImageButton
            android:id="@+id/image2"
            android:layout_width="340px"
            android:layout_height="500px"
            android:scaleType="centerInside"
            android:src="@drawable/pic2" />

        <ImageButton
            android:id="@+id/image3"
            android:layout_width="340px"
            android:layout_height="500px"
            android:scaleType="centerInside"
            android:src="@drawable/pic3" />
    </LinearLayout>

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/bismark"
        >
        <TextView
            android:id="@+id/text1"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="@string/text1"
            android:layout_width="380dp"
            android:layout_height="50dp"
            android:background="@drawable/textview_style"
            android:layout_margin="40dp" />

        <TextView
            android:id="@+id/text2"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="@string/text2"
            android:layout_width="380dp"
            android:layout_height="50dp"
            android:background="@drawable/textview_style" />

        <TextView
            android:id="@+id/text3"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="@string/text3"
            android:layout_width="380dp"
            android:layout_height="50dp"
            android:background="@drawable/textview_style"
            android:layout_margin="40dp" />

    </androidx.appcompat.widget.LinearLayoutCompat>

</LinearLayout>

5.2 MainActivity.java

package com.example.a004_imagebutton;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.text.TextWatcher;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @SuppressLint("SetTextI18n")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final int[] cnt = {0,0,0};


        TextView textview1 = findViewById(R.id.text1);
        TextView textview2 = findViewById(R.id.text2);
        TextView textview3 = findViewById(R.id.text3);

        ImageButton imageButton1 = findViewById(R.id.image1);
        ImageButton imageButton2 = findViewById(R.id.image2);
        ImageButton imageButton3 = findViewById(R.id.image3);

        imageButton1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                cnt[0]++;
                textview1.setText("You have pressed picture 1 【"+ cnt[0] +"】 times");
            }
        });

        imageButton2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                cnt[1]++;
                textview2.setText("You have pressed picture 2 【"+ cnt[1] +"】 times");
            }
        });

        imageButton3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                cnt[2]++;
                textview3.setText("You have pressed picture 3 【"+ cnt[2] +"】 times");
            }
        });


    }
}