安卓学习笔记5.3按钮、图像视图与图像按钮

我会带着你远行 2024-04-01 15:55 55阅读 0赞

**目录**

零、学习目标

一、按钮控件

二、图像视图

三、图像按钮

四、实现步骤

1、创建安卓应用【ZoomImageByButton】

2、将两张图片拷贝到drawable目录

3、主布局资源文件activity\_main.xml

4、字符串资源文件strings.xml

5、主界面类MainActivity

6、启动应用，查看效果

--------------------

## 零、学习目标 ##

1.  了解按钮常用属性并能进行事件处理
2.  了解图像视图常用属性并能进行事件处理
3.  了解图像按钮常用属性并能进行事件处理

## 一、按钮控件 ##

*  text：文本内容
 *  textSize：文本尺寸
 *  textColor：文本颜色
 *  onClick：单击事件（用于绑定事件处理方法）

## 二、图像视图 ##

*  src：源（用于设置图片源）
 *  background：背景（用于设置背景图片）
 *  scaleType：缩放类型（）
 *  tint（蒙版）

## 三、图像按钮 ##

*  src：源（用于设置图片源）
 *  background：背景（用于设置背景图片）

### 四、实现步骤 ###

#### 1、创建安卓应用【ZoomImageByButton】 ####

![c519bc56b6584f75940cc28a5246e24a.png][]

#### 2、将两张图片拷贝到drawable目录 ####

![05bb2ff03ba645f7bef6cdd968fcaa17.png][]

#### 3、主布局资源文件activity\_main.[xml][] ####

![18809ba33ed24b48b4dbeec680f87aea.png][]

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:padding="10dp"
        android:orientation="vertical" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center" >
    
            <Button
                android:id="@+id/btnMinus"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="doMinus"
                android:text="@string/minus" />
    
            <Button
                android:id="@+id/btnPlus"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="doPlus"
                android:text="@string/plus" />
    
            <ImageButton
                android:id="@+id/btnExit"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:onClick="doExit"
                android:background="@drawable/exit" />
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" >
    
            <ImageView
                android:id="@+id/ivBear"
                android:layout_width="200dp"
                android:layout_height="300dp"
                android:src="@drawable/bear" />
        </LinearLayout>
    
    </LinearLayout>

#### 4、[字符串][Link 1]资源文件strings.xml ####

![0bb36a3959d74a49b372a731354599b5.png][]

<resources>
        <string name="app_name">通过按钮缩放图片</string>
        <string name="minus">缩小图片</string>
        <string name="plus">放大图片</string>
    </resources>

#### 5、主界面类MainActivity ####

![53631d43ba7a4aec96baa830c78eb9fb.png][]

package net.hw.zoom_image;
    
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.Toast;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity {
        private ImageView ivBear; // 图像控件
        private double imageWidth; // 图像宽度
        private double imageHeight; // 图像高度
        private double screenWidth; // 屏幕宽度
        private double screenHeight; // 屏幕高度
        private double zoomScale = 0.95; // 缩放比例
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            // 利用布局资源文件设置用户界面
            setContentView(R.layout.activity_main);
    
            // 通过资源标识符获得控件实例
            ivBear = findViewById(R.id.ivBear);
    
            // 获得屏幕尺寸
            screenWidth = getWindowManager().getDefaultDisplay().getWidth();
            screenHeight = getWindowManager().getDefaultDisplay().getHeight();
    
            // 获得图像尺寸
            imageWidth = ivBear.getLayoutParams().width;
            imageHeight = ivBear.getLayoutParams().height;
        }
    
        /**
         * 缩小图片单击事件处理方法
         *
         * @param view
         */
        public void doMinus(View view) {
            // 获得图像新尺寸
            int newWidth = (int) (imageWidth * zoomScale);
            int newHeight = (int) (imageHeight * zoomScale);
            // 按新尺寸设置图像（不能缩小为零，否则不能再放大）
            if (newWidth > 50) {
                ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
                // 重新获取图像尺寸
                imageWidth = ivBear.getLayoutParams().width;
                imageHeight = ivBear.getLayoutParams().height;
            } else {
                Toast.makeText(this, "温馨提示：图片不能再缩小，要不然看不见咯！", Toast.LENGTH_LONG).show();
            }
        }
    
        /**
         * 放大图片单击事件处理方法
         *
         * @param view
         */
        public void doPlus(View view) {
            // 获得图像新尺寸
            int newWidth = (int) (imageWidth / zoomScale);
            int newHeight = (int) (imageHeight / zoomScale);
            // 按新尺寸设置图像（不能再放大，否则就出界了）
            if (ivBear.getLayoutParams().width < screenWidth) {
                ivBear.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
                // 重新获取图像尺寸
                imageWidth = ivBear.getLayoutParams().width;
                imageHeight = ivBear.getLayoutParams().height;
            } else {
                Toast.makeText(this, "温馨提示：图片不能再放大，要不然就出界咯！", Toast.LENGTH_LONG).show();
            }
        }
    
        /**
         * 退出应用程序
         *
         * @param view
         */
        public void doExit(View view) {
            finish();
        }
    }

#### 6、启动应用，查看效果 ####

5.3素材

[c519bc56b6584f75940cc28a5246e24a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/69ddc30085f840e7a1c00931e509cae1.png
[05bb2ff03ba645f7bef6cdd968fcaa17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d0c9a235e59e4675bd2f30b86ed8c6ba.png
[xml]: https://so.csdn.net/so/search?q=xml&spm=1001.2101.3001.7020
[18809ba33ed24b48b4dbeec680f87aea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ba446e62b3a6496e9b076e899a78dff5.png
[Link 1]: https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E4%B8%B2&spm=1001.2101.3001.7020
[0bb36a3959d74a49b372a731354599b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3355ce4c93984ef8840c8480f3d41e9c.png
[53631d43ba7a4aec96baa830c78eb9fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1e43cd7aa8154024808e2b0a68fafc8e.png