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">Zoom down the picture</string> 
    <string name="fangd">Zoom in 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; // reduction ratio
 
    private int[] imgIds;// array of image resource identifiers
    private int imgIndex;//image index, in the position of image resource identifier array 
    private final int IMG_COUNT = 4;//total number of images 



    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        //Use layout resources File setting user interface 
        setContentView(R.layout.activity_main); 

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

        // Initialize the image resource identifier array 
        //getResources().getIdentifier to get 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 package name 
            ); 
        int newHeight = (int) (imageHeight * scale); 
        }

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

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

    /** 
     * [Shrink 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); 
        // set the image at the new size (it cannot be reduced to zero, otherwise it cannot be enlarged) 
        if (newWidth > 50) { 
            // set the image at 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 image】Button click event processing method 
     * 
     * @param view 
     */ 
    public void doEnlargeImage(View view) { 
        // Get the new image size 
        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 according 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 go 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 previous page 
        } 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 photo 
        } else { 
            imgIndex = 0; // return to the first photo 
        } 
        // switch photos according to the new index 
        ivMickey.setBackgroundResource(imgIds[imgIndex]); 
    } 
}

Run the application to see the effect: