通过按钮缩放和切换图片

最新推荐文章于 2026-01-06 20:48:32 发布

原创最新推荐文章于 2026-01-06 20:48:32 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

本文介绍如何在安卓应用中实现图片的缩放及上下张切换功能，包括创建必要的UI元素、处理按钮点击事件以及调整图片大小等关键步骤。

创建安卓应用文件ZoomControls将背景图片拷贝到drawable目录

打开字符串资源文件strings.xml 输入代码

打开主布局资源文件 activity_main.xml输入代码：

打开主界面类 MainActivity输入代码：

运行应用查看效果：

创建安卓应用文件ZoomControls将背景图片拷贝到`drawable`目录

打开字符串资源文件`strings.xml` 输入代码

具体代码

<resources>
    <string name="app_name">缩放切换图片</string>
    <string name="qiehtp">上一张图片</string>
    <string name="hku">下一张图片</string>
    <string name="shuox">缩小图片</string>
    <string name="fangd">放大图片</string>
</resources>

打开主布局资源文件 `activity_main.xml`输入代码：

具体代码:

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

打开主界面类 `MainActivity输入代码：`

具体代码：

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; // 米老鼠图像控件
    private double imageWidth; // 图像宽度
    private double imageHeight; // 图像高度
    private double screenWidth; // 手机屏幕宽度
    private double screenHeight; // 手机屏幕高度
    private double scale = 0.95; // 缩小比例

    private int[] imgIds;//图像资源标识符数组
    private int imgIndex;//图像索引，在图像资源标识符数组的位置
    private final int IMG_COUNT = 4;//图像总数



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        ivMickey = findViewById(R.id.iv_mickey);

        // 初始化图像资源标识符数组
        //getResources().getIdentifier获取资源id
        imgIds = new int[IMG_COUNT];
        for (int i = 0; i < IMG_COUNT; i++) {
            imgIds[i] = getResources().getIdentifier(
                    "img" + (i + 1), // 标识符名称
                    "drawable", // 定义类型
                    "net.zyt.zoom_controls"// 定义包名
            );
        }

        // 获得屏幕尺寸
        screenWidth = getWindowManager().getDefaultDisplay().getWidth();
        screenHeight = getWindowManager().getDefaultDisplay().getHeight();

        // 获取图像尺寸
        imageWidth = ivMickey.getLayoutParams().width;
        imageHeight = ivMickey.getLayoutParams().height;
    }

    /**
     * 【缩小图片】按钮单击事件处理方法
     *
     * @param view
     */
    public void doShrinkImage(View view) {
        // 获取图像新尺寸
        int newWidth = (int) (imageWidth * scale);
        int newHeight = (int) (imageHeight * scale);
        // 按新尺寸设置图像（不能缩小为零，否则不能再放大）
        if (newWidth > 50) {
            // 按新尺寸设置图像
            ivMickey.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
            // 更新图像尺寸变量
            imageWidth = ivMickey.getLayoutParams().width;
            imageHeight = ivMickey.getLayoutParams().height;
        } else {
            Toast.makeText(this, "温馨提示：图片不能再缩小，要不然看不见咯~", Toast.LENGTH_SHORT).show();
        }
    }
    /**
     * 【放大图片】按钮单击事件处理方法
     *
     * @param view
     */
    public void doEnlargeImage(View view) {
        // 获取图像新尺寸
        int newWidth = (int) (imageWidth / scale);
        int newHeight = (int) (imageHeight / scale);
        // 按新尺寸设置图像（不能再放大，否则就出界了）
        if (newWidth < screenWidth) {
            // 按新尺寸设置图像
            ivMickey.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
            // 更新图像尺寸变量
            imageWidth = ivMickey.getLayoutParams().width;
            imageHeight = ivMickey.getLayoutParams().height;
        } else {
            Toast.makeText(this, "温馨提示：图片不能再放大，要不然就出界咯~",Toast.LENGTH_SHORT).show();
        }
    }




    /**
     * 上一张按钮单击事件处理方法
     *
     * @param view
     */
    public void dokjsa(View view) {
        if (imgIndex > 0) {
            imgIndex--; // 切换到上一张
        } else {
            imgIndex = IMG_COUNT - 1; // 切换到最后一张
        }
        // 根据新索引切换照片
        ivMickey.setBackgroundResource(imgIds[imgIndex]);
    }

    /**
     * 下一张按钮单击事件处理方法
     *
     * @param view
     */
    public void dohku(View view) {
        if (imgIndex < IMG_COUNT - 1) {
            imgIndex++; // 切换到下一张
        } else {
            imgIndex = 0; // 回到第1张
        }
        // 根据新索引切换照片
        ivMickey.setBackgroundResource(imgIds[imgIndex]);
    }
}