Zoom and switch pictures with buttons

Table of contents

Create an Android application file ZoomControls and copy the background image to the drawable directory

 Open the string resource file strings.xml and enter the code

Open the main layout resource file activity_main.xml and enter the code:

Open the main interface class MainActivity and enter the code:

Run the application to see the effect:

---

Create an Android application file ZoomControls and copy the background image to drawablethe directory

 Open the string resource file strings.xml and enter the code

 

 specific code

<resources>
    <string name="app_name">Zoom and switch pictures</string>
    <string name="qiehtp">Previous picture</string>
    <string name="hku">Next picture</string>
    <string name="shuox">Reduce image</string>
    <string name="fangd">enlarge the picture</string>
</resources>

Open the main layout resource file  activity_main.xmland enter the code:

 

 

 Specific code:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
   <Button
       android:id="@+id/but_qhtp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginRight="10dp"
       android:text="@string/qiehtp"
       android:onClick="dokjsa"
       />
        <Button
            android:id="@+id/but_hku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hku"
            android:onClick="dohku"
            />


   </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <Button
            android:id="@+id/btn_shrink_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:onClick="doShrinkImage"
            android:text="@string/shuox"/>

        <Button
            android:id="@+id/btn_enlarge_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="doEnlargeImage"
            android:text="@string/fangd"
            />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <ImageView
            android:id="@+id/iv_mickey"
            android:layout_width="300dp"
            android:layout_height="280dp"
            android:background="@drawable/img1" />
    </LinearLayout>

</LinearLayout>

Open the main interface class MainActivity输入代码：

 Specific code:

package net.zyt.zoom_controls;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.GestureDetector;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private ImageView ivMickey; // Mickey Mouse image control
    private double imageWidth; // image width
    private double imageHeight; // image height
    private double screenWidth; // phone screen width
    private double screenHeight; // phone screen height
    private double scale = 0.95; // scale down

    private int[] imgIds;//array of image resource identifiers
    private int imgIndex;//image index, in the position of the image resource identifier array
    private final int IMG_COUNT = 4;//Total number of images



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set up the user interface using the layout resource file
        setContentView(R.layout.activity_main);

        // Get the control instance through the resource identifier
        ivMickey = findViewById(R.id.iv_mickey);

        // Initialize an array of image resource identifiers
        //getResources().getIdentifier gets the resource id
        imgIds = new int[IMG_COUNT];
        for (int i = 0; i < IMG_COUNT; i++) {
            imgIds[i] = getResources().getIdentifier(
                    "img" + (i + 1), // identifier name
                    "drawable", // define the type
                    "net.zyt.zoom_controls"// Define the package name
            );
        }

        // get screen size
        screenWidth = getWindowManager().getDefaultDisplay().getWidth();
        screenHeight = getWindowManager().getDefaultDisplay().getHeight();

        // get image size
        imageWidth = ivMickey.getLayoutParams().width;
        imageHeight = ivMickey.getLayoutParams().height;
    }

    /**
     * [Reduce image] button click event processing method
     *
     * @param view
     */
    public void doShrinkImage(View view) {
        // Get the new size of the image
        int newWidth = (int) (imageWidth * scale);
        int newHeight = (int) (imageHeight * scale);
        // Set the image at the new size (can't be scaled down to zero, otherwise it can't be scaled up again)
        if (newWidth > 50) {
            // set the image to the new size
            ivMickey.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
            // update the image size variable
            imageWidth = ivMickey.getLayoutParams().width;
            imageHeight = ivMickey.getLayoutParams().height;
        } else {
            Toast.makeText(this, "Reminder: The picture can't be reduced any more, or it won't be visible~", Toast.LENGTH_SHORT).show();
        }
    }
    /**
     * [enlarge picture] button click event processing method
     *
     * @param view
     */
    public void doEnlargeImage(View view) {
        // Get the new size of the image
        int newWidth = (int) (imageWidth / scale);
        int newHeight = (int) (imageHeight / scale);
        // Set the image according to the new size (cannot be enlarged, otherwise it will be out of bounds)
        if (newWidth < screenWidth) {
            // set the image to the new size
            ivMickey.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
            // update the image size variable
            imageWidth = ivMickey.getLayoutParams().width;
            imageHeight = ivMickey.getLayoutParams().height;
        } else {
            Toast.makeText(this, "Reminder: The picture cannot be enlarged, or it will be out of bounds~",Toast.LENGTH_SHORT).show();
        }
    }




    /**
     * Previous button click event processing method
     *
     * @param view
     */
    public void dokjsa(View view) {
        if (imgIndex > 0) {
            imgIndex--; // switch to the previous one
        } else {
            imgIndex = IMG_COUNT - 1; // switch to the last one
        }
        // Switch photos according to the new index
        ivMickey.setBackgroundResource(imgIds[imgIndex]);
    }

    /**
     * Next button click event processing method
     *
     * @param view
     */
    public void dohku(View view) {
        if (imgIndex < IMG_COUNT - 1) {
            imgIndex++; // switch to the next one
        } else {
            imgIndex = 0; // return to the first image
        }
        // Switch photos according to the new index
        ivMickey.setBackgroundResource(imgIds[imgIndex]);
    }
}

Run the application to see the effect: