Swift - ImageView

Swift - ImageView 首页 / iOS入门教程 / Swift - ImageView

 ImageView可以定义为可以在IOS应用程序的界面上显示图像的对象。它是UIImageView类的实例,它继承了UIView。

class UIImageView : UIView

ImageView在UIImage对象指定图像的界面上绘制图像。无涯教程可以使用imageview对象显示各种图像文件的内容,例如JPG或PNG。 UIImageView类包含各种方法和属性,通过这些方法和属性,无涯教程可以以编程方式配置imageview。

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

iOS ImageView

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

iOS ImageView

这将创建新的映像集(资产文件夹)。在这里,无涯教程需要将图像文件从本地设备拖放到Xcode中的新图像。

下图显示了一个图像集,无涯教程可以在其中从本地设备拖放所需的图像。

iOS ImageView

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

无涯教程网

iOS ImageView

属性

sn属性描述
1Image它表示要显示的UIImage对象。
2Highlighted它代表一个UIImage对象,该对象在高亮显示imageview时显示。
3State此属性用于将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项目添加一个新图像。

要将图像视图添加到Storyboard,请在对象库中搜索ImageView,并将结果拖到Storyboard。

iOS ImageView

为图像视图定义自动布局规则,以控制其大小和在不同屏幕尺寸上的位置。但是,无涯教程还将从本地设备向Xcode中的assets添加一个图像,如下图所示。

iOS ImageView

main.storyboard显示在以下图像中。

iOS ImageView

ViewController.swift

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var myImageView: UIImageView!
    var img:UIImage = UIImage(named: "Image") ?? UIImage()
    override func viewDidLoad() {
        super.viewDidLoad()
       //加载视图后进行任何其他设置。
        myImageView.image = img
        //myImageView.contentMode = .scaleToFill

    }
}

输出:

iOS ImageView

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

iOS ImageView

触摸事件

默认情况下,imageview不响应事件。但是,无涯教程可以将imageview的isUserInteractionEnabled属性设置为true,以使启用该imageview的用户交互。无涯教程可以使用UITapGestureRecognizer为imageview配置轻击(tap)手势。

示例2  - 

无涯教程将为图像视图定义轻击手势识别器,并将设置isUserInteractionEnabled属性

iOS ImageView

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myImageView: UIImageView!
    var img:UIImage = UIImage(named: "Image") ?? UIImage()
    override func viewDidLoad() {
        super.viewDidLoad()
       //加载视图后进行任何其他设置。
        myImageView.image = img
        myImageView.isUserInteractionEnabled = true
        let tapGesture = UITapGestureRecognizer(target: self, action: Selector("tappedImageView"))
        myImageView.addGestureRecognizer(tapGesture)
    }
    
    @objc func tappedImageView (){
        performSegue(withIdentifier: "segue", sender: self)
    }
}

输出:

iOS ImageView

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

全栈工程师修炼指南 -〔熊燚(四火)〕

Service Mesh实战 -〔马若飞〕

体验设计案例课 -〔炒炒〕

手把手教你玩音乐 -〔邓柯〕

基于人因的用户体验设计课 -〔刘石〕

爆款文案修炼手册 -〔乐剑峰〕

如何成为学习高手 -〔高冷冷〕

徐昊 · TDD项目实战70讲 -〔徐昊〕

手把手带你写一个 MiniTomcat -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)