iOS SwiftUI 创建和组合视图 1.2

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

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

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

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

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

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

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

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

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

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

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

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

首先需要创建一个自定义视图用来容纳和显示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视图的部分，因为MKMapView是UIView的子类，所以需要切换到实时预览模式下才能看到地图被完全渲染出来

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