滚动视图

17 Mar 2025 | 5 分钟阅读

在设计和开发任何 iOS 应用程序时,几乎不可能不使用 imageview。 ImageView 可以定义为可以在 iOS 应用程序界面上显示图像的对象。 它是 UIImageView 类的实例,该类继承自 UIView。

ImageView 在界面上绘制图像,其中 UIImage 对象指定图像。 我们可以使用 imageview 对象来显示各种图像文件的内容,例如 JPG 或 PNG。 UIImageView 类包含各种方法和属性,通过使用它们,我们可以以编程方式配置 imageview。 我们还可以配置动画图像以在界面上显示。

将 ImageView 添加到界面

  1. 在对象库中搜索 UIImageView,并将结果拖到故事板。
  2. 为图像视图定义自动布局规则,以控制其在不同屏幕设备上的位置和大小。
  3. 在 ViewController 类中创建 imageview 的连接出口。
  4. 以编程方式或使用故事板将图像分配给 imageview。

将图像添加到 Xcode 项目

将图像添加到 Xcode 项目就像将图像文件从本地设备存储拖到 Xcode 项目的 assets 文件夹一样简单。

访问 Xcode 中的 Assets.xcassets 文件夹,如下图所示。 此文件夹包含项目中正在使用的所有资源,包括应用程序图标。

iOS ImageView

最初,Xcode 中没有资源。 要在资源中添加新的图像集,请右键单击左窗格中的 AppIcon 下方,然后从列表中选择“新建图像集”。

iOS ImageView

这将创建新的图像集(资源中的文件夹)。 在这里,我们需要将图像文件从本地设备拖放到 Xcode 中的新图像集中。

下图显示了一个图像集,我们可以在其中从本地设备中删除所需的图像。

iOS ImageView

在 iOS 应用程序中,有三种图像类别可以根据尺寸添加到项目中,即 1X、2X 和 3X。 上图还显示了图像下方提到的通用。 这意味着该图像可以用于通用设备,包括 IPad 和 iPhone。 但是,我们可以在窗口的右窗格中指定设备的预期类别,如下图所示。

iOS ImageView

界面构建器属性

序号属性描述
1图像它表示要显示的 UIImage 对象。 我们可以使用 UIImageView 类的 image 或 animatedImages 属性,通过故事板或以编程方式设置图像。
2高亮它表示当 imageview 突出显示时显示的 UIImage 对象。 要以编程方式设置此属性,我们可以使用 highlightedImage 或 highlightedAnimationImages 属性。
3国家此属性用于将 imageview 的初始状态更改为突出显示。 使用 isHighlighted 属性检查 imageview 是否处于突出显示状态。

在 ImageView 中缩放图像

图像视图的 contentMode 属性用于确定如何正确显示图像。 如果使用 imageview 显示的图像的大小与 imageview 本身的大小不匹配,则我们需要配置图像在界面上的外观。 但是,最佳做法是使用相同大小的图像,但 imageview 可以缩放图像以适应所有或部分可用空间。 UIView.ContentMode.scaleAspectFit 和 UIView.ContentMode.scaleAspectFill 模式会缩放图像以适应或填充空间,同时保持图像的原始宽高比。 UIView.ContentMode.scaleToFill 值缩放图像而不考虑原始宽高比,这可能会导致图像出现失真。 其他内容模式将图像放置在图像视图边界内的适当位置,而不对其进行缩放。

图像透明度

如果图像的大小小于 imageview,则图像中的任何透明度都会导致背景显示通过,因为图像合成到 imageview 背景上,然后合成到其余可用图像上。

  • 如果图像视图的 isOpaque 属性为 true,则图像的像素将合成到图像视图的背景颜色之上,并且图像视图的 alpha 属性将被忽略。
  • 如果图像视图的 isOpaque 属性为 false,则每个像素的 alpha 值将乘以图像视图的 alpha 值,生成的值将成为该像素的实际透明度值。 如果图像没有 alpha 通道,则假定每个像素的 alpha 值为 1.0。

示例 1

在此示例中,我们将创建一个 imageview,并将使用其 image 属性以编程方式将 UIImage 对象设置为 imageview。 为此,我们将向 Xcode 项目添加新图像。

界面生成器

要将图像视图添加到故事板,请在对象库中搜索 imageview,并将结果拖到故事板。

iOS ImageView

为图像视图定义自动布局规则,以控制其在不同屏幕尺寸上的大小和位置。 但是,我们还将从本地设备将图像添加到 Xcode 中的资源中,如下面的图像所示。

iOS ImageView

main.storyboard 如下图所示。

iOS ImageView

ViewController.swift

输出

iOS ImageView

默认情况下,imageview 的内容模式设置为 scaleToFit。 但是,如果我们将其设置为 scaleToFill,则上述程序的输出如下图所示。

iOS ImageView

将触摸事件添加到 imageview

默认情况下,imageview 不响应事件。 但是,我们可以将 imageview 的 isUserInteractionEnabled 属性设置为 true,以启用 imageview 的用户交互。 我们可以使用 UITapGestureRecognizer 为 imageview 配置点击手势。

考虑下图,其中我们将为示例 1 中显示的 imageview 配置点击手势。

示例

在此示例中,我们将向示例 1 中创建的故事板添加另一个视图控制器。我们将定义一个视图控制器之间的 segue,其标识符字符串为“segue”,如下图所示。

Main.storyboard

我们将为图像视图定义点击手势识别器,并将设置 isUserInteractionEnabled 属性

iOS ImageView

ViewController.swift

输出

iOS ImageView
下一个主题PickerView