iOS SwiftUI 创建和组合视图 1.2

第四节 创建自定义图像视图(Image)

有了地标名称、地标位置及状态视图,下一步再添加一个地标图片视图。这个图片视图将自定义遮罩(mask)、边框(border)和阴影(shadow)

从控件加中拖一个Image到画布,或直接写代码到代码编辑器中

步骤1 在项目资源文件中找到turtlerock.png图片,把它拖入资源编辑器(asset catalog editor)中,Xcode会创建一个新的图片集来存放这个图片,然后创建一个SwiftUI视图

swiftui assets catalog editor

步骤2 选择文件->新建->文件,打开模板选择器。在用户界面(User Interface)板块下,选择SwiftUI View并点击下一步,命名为CircleImage.swift,并点击创建(Create)。现在你已经准备好插入图片并修改布局来满足设计目标

swiftui create swiftui file

swiftui create circle image

步骤3 用Image替换Text,并使用turtlerock图片初始化Image视图

步骤4 添加clipShape(Circle())修改器到Image,给图片添加圆形剪切效果。Circle是一个形状,它可以被用作遮罩、也可以是圆圈,还可以是圆形填充视图。

步骤5 创建另一个灰色的圆圈并把它作为一个浮层添加到图片上,相当于给图片加了一个灰色边框

步骤6 给视图添加半径为10的阴影

swiftui turtlerock overlay

步骤7 把圆形边框的颜色改成白色,就完成了自定义图片视图的创建。

swiftui circle image completed

第五节 UIKit视图与SwiftUI视图混合使用

现在要创建一个地图视图,可以使用MapKit中的MKMapView视图类来渲染地图。要在SwiftUI中使用UIView及其子类,需要把这些UIView包裹在一个遵循UIViewRepresentable协议的SwiftUI视图中,SwiftUI中也包含适配WatchKitAppKit的类似的协议。

swiftui uikit swiftui combine

首先需要创建一个自定义视图用来容纳和显示MKMapView

步骤1 选择文件->新建->文件,选择iOS平台,选择SwiftUI View模板,并点击下一步(Next),命名文件为MapView.swift,并点击创建(Create)

步骤2 代码中导入MapKit引用,声明MapView遵循UIViewRepresentable协议。UIViewRepresentable协议要求实现两个方法UIView(context:)updateUIView(_:context:),第一个方法用来创建MKMapView,第二个方法用来配置视图响应状态变化

步骤3 替换body,用makeUIView(context:)方法来代替,创建并返回一个空的MKMapView

步骤4 创建方法updateUIView(_:context:),在方法内部设置地图视图的坐标为Turle Rock的中心。在静态模式下预览时,只会渲染swiftUI视图的部分,因为MKMapViewUIView的子类,所以需要切换到实时预览模式下才能看到地图被完全渲染出来

swiftui mapview mkmapview wrapper

步骤5 点击Live Preview(实时预览)按钮,可能需要点击Try AgainResume按钮来激活预览模式的切换。切换到实时预览模式下不久就可以看到指定地标所在的地图位置了

swiftui mkmapview live preview


0 个评论

要回复文章请先登录注册