文章目录

• 零、本讲学习目标
• 一、导入新课
• • 二、新课讲解
  • （一）按钮控件
  • • 1、继承关系图
    • 2、常用属性
  • （二）图像视图
  • • 1、继承关系图
    • 2、常用属性
  • （三）图像按钮
  • • 1、继承关系图
    • 2、常用属性
  • （四）教学案例：通过按钮缩放图片
  • • 1、创建安卓应用
    • 2、准备图片素材
    • 3、字符串资源文件
    • 4、主布局资源文件
    • 5、主界面类实现功能
    • 6、启动应用，查看效果
• 三、归纳总结
• 四、上机操作

零、本讲学习目标

1. 熟练使用按钮和图像按钮
2. 熟练使用图像视图显示图片

一、导入新课

• 安卓应用中，按钮一般用于用户点击确认某项功能，当然也可以用图像按钮。显示图片，我们经常使用图像视图（ImageView）。一个界面最好能图文并茂，给用户较好的体验。

二、新课讲解

（一）按钮控件

1、继承关系图

• Button是TextView的子类
  

2、常用属性

（二）图像视图

1、继承关系图

• ImageView是View的子类
  

2、常用属性

（三）图像按钮

1、继承关系图

• ImageButton是ImageView的子类
  

2、常用属性

（四）教学案例：通过按钮缩放图片

1、创建安卓应用

• 基于Empty Activity模板创建安卓应用 - ZoomImageByButton
  
• 单击【Finish】按钮
  

2、准备图片素材

• 将三张图片拷贝到drawable目录
  

3、字符串资源文件

• 字符串资源文件 - strings.xml
  

通过按钮缩放图片放大图片缩小图片

4、主布局资源文件

• 主布局资源文件 - activity_main.xml
  
• 将默认的约束布局改成线性布局，设置相关属性
  
• 添加两个线性布局
  
• 在第一个子线性布局里添加两个按钮和一个图像按钮
  
• 在第二个子线性布局里添加一个图像控件，显示米老鼠
  
• 查看完整代码

• 查看预览效果
  

5、主界面类实现功能

• 主界面类 - MainActivity
  
• 声明变量
  
• 通过资源标识符获取控件实例
  
• 获得屏幕尺寸
  
• 获取图像尺寸
  
• 编写【缩小图片】按钮单击事件处理方法
  
• 编写【放大图片】按钮单击事件处理方法
  
• 编写【关闭】图像按钮单击事件处理方法
  
• 查看完整代码

package net.hw.zoom_image;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;
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; // 缩小比例@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 利用布局资源文件设置用户界面setContentView(R.layout.activity_main);// 通过资源标识符获取控件实例ivMickey = findViewById(R.id.iv_mickey);// 获得屏幕尺寸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 doExit(View view) {finish(); // 关闭当前窗口}
}

6、启动应用，查看效果

• 通过三个按钮来操作
  
• 录屏演示操作
  

三、归纳总结

• 回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。

四、上机操作

• 形式：单独完成
• 题目：切换缩放图片（泸职院掠影）
• 要求：切换图片（通过普通按钮或者手势滑动）；缩放图片（通过缩放按钮ZoomControls来实现）