"Android Studio Development Practical Combat" learning (3) - display pictures

---

background

In the previous article ¹ , I realized the use of Android Studio to develop a simple chat room App, and I am familiar with the use of the simple control TextView ² , and continue to study the use of Android Studio here. The purpose of this article is to introduce the image view ImageView, and develop a picture display App to realize the function of stretching the picture to the entire window by clicking the button.

Problem Description

Now I want to design a single-page picture display tool, the page layout is

• The picture display window, with a width of 70% and a height of 100%, is used to display pictures (upload a picture to Android Studio in advance);
• The button panel has a width of 30% and a height of 100%. It includes 6 buttons in 3 rows and 2 columns. Each button has the same width and height. Each button corresponds to a different stretching type. Click to pull the picture in the above window stretch operation.

Add images to Android Studio resources

The method of adding pictures to Android Studio resources is very simple ³ , just copy the picture to the drawable folder of the current project under the AndroidStudioProjects folder, and you can see it in the resource list of the Android Studio interface, you can do this

cp island.JPG ~/AndroidStudioProjects/ImageView/app/src/main/res/drawable/

Then open the res/drawable directory in the resource list, and you can see the picture you just added. Note that Android Studio does not support pictures with Chinese names at present. The names of pictures can only be lowercase letters az, numbers 0-9 and underscores (dots cannot be included ., otherwise they will not be recognized), as shown in the figure.

The use of image view ImageView

ImageViewIt is an image display control ²activity_main.xml , you can set its properties in the layout file srcto link it with the picture to be displayed ⁴ :

<ImageView
	android:id="@+id/iv_scale"
	android:layout_width="match_parent"
	android:layout_height="400dp"
	android:src="@drawable/island" />

Turn off the display of the title in the APP

^{If you want to close the title 5} of the current project in the generated application APP , you can set the property res/values/themes/themes.xmlin styleto .parentparent="Theme.*.NoActionBar"

Compilation of image display tool layout files

activity_main.xmlThe code looks like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_3"
        app:layout_constraintGuide_percent=".33"
        android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_4"
        app:layout_constraintGuide_percent=".67"
        android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_1"
        app:layout_constraintGuide_percent=".70"
        android:orientation="vertical"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_2"
        app:layout_constraintGuide_percent=".85"
        android:orientation="vertical"/>
    <ImageView
        android:id="@+id/iv_scale"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/island"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/guideline_1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
    <Button
        android:id="@+id/button_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_3" />
    <Button
        android:id="@+id/button_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮2"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_3" />
    <Button
        android:id="@+id/button_3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮3"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="@+id/guideline_3"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_4" />
    <Button
        android:id="@+id/button_4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮4"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline_3"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_4" />
    <Button
        android:id="@+id/button_5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮5"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_1"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="@+id/guideline_4"
        app:layout_constraintBottom_toBottomOf="parent" />
    <Button
        android:id="@+id/button_6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="按钮6"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline_4"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Four auxiliary lines are used for layout, as shown in the figure:

The picture shows the preparation of the tool code file

MainActivity.javaThe code is as follows:

package com.example.helloworld;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.ImageView;
import android.view.View;
import android.view.View.*;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    
    
    private ImageView iv_scale;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_scale = findViewById(R.id.iv_scale);
        OnClickListener clickT = new ClickTAction();
        findViewById(R.id.button_1).setOnClickListener(clickT);
        findViewById(R.id.button_2).setOnClickListener(clickT);
        findViewById(R.id.button_3).setOnClickListener(clickT);
        findViewById(R.id.button_4).setOnClickListener(clickT);
        findViewById(R.id.button_5).setOnClickListener(clickT);
        findViewById(R.id.button_6).setOnClickListener(clickT);
    }
    private class ClickTAction implements OnClickListener {
    
    
        @Override
        public void onClick(View v) {
    
    
            if (v.getId() == R.id.button_1) {
    
    
                // 保持图片原尺寸，并使其位于视图中间
                iv_scale.setScaleType(ImageView.ScaleType.CENTER);
            } else if (v.getId() == R.id.button_2) {
    
    
                // 拉伸图片使其位于视图中间
                iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);
            } else if (v.getId() == R.id.button_3) {
    
    
                // 拉伸图片使其充满视图，并位于视图中间
                iv_scale.setScaleType(ImageView.ScaleType.CENTER_CROP);
            } else if (v.getId() == R.id.button_4) {
    
    
                // 使图片位于视图中间（只压不拉）
                iv_scale.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            } else if (v.getId() == R.id.button_5) {
    
    
                // 拉伸图片使其正好填满视图（图片可能被拉伸变形）
                iv_scale.setScaleType(ImageView.ScaleType.FIT_XY);
            } else if (v.getId() == R.id.button_6) {
    
    
                // 拉伸图片使其位于视图上部
                iv_scale.setScaleType(ImageView.ScaleType.FIT_START);
            }
        }
    }
}

Create an ImageView object, associate it with the id in the layout file in the onCreate method, then bind the click listener to the 6 buttons, and then set the function of each button in the onClick method of the listener.

operation result

Generate the apk file according to the previously explored method ⁶ , and then transfer it to the mobile phone to run. The results are as follows:

---

1. Learning "Android Studio Development Practice" (2) - Chat Room_Xiatangren's Blog-CSDN Blog↩︎

2. Ouyang Shen. Android Studio Development Practice. Tsinghua University Press. 2017. ↩︎ ↩︎

3. sweet_Jayne. How to import pictures in AndroidStudio and the solution to error reporting when placing pictures in drawable. CSDN Blog ↩︎

4. ImageView (image view) | rookie tutorial ↩︎

5. The method of removing the title bar of the application created by Android Studio - Zhihu ↩︎

6. Learning "Android Studio Development Practice" (1) - Hello World_Xiatangren's Blog-CSDN Blog↩︎