SwiftUI官方教程(五)

5. 同时使用 UIKit 和 SwiftUI

至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图。

在 SwiftUI 中使用 UIView 子类,需要将其他 view 包装在遵循 UIViewRepresentable 协议的 SwiftUI view 中。 SwiftUI 包含了和 WatchKit 、 AppKit view 类似的协议。

首先,我们创建一个可以呈现 MKMapView 的自定义 view。

SwiftUI教程

5.1 选择 File > New > File ,选择 iOS 平台,选择 SwiftUI View 模板,然后单击 Next 。将新文件命名为 MapView.swift ,然后单击 Create 。

5.2 给 MapKit 添加 import 语句,声明 MapView 类型遵循 UIViewRepresentable 。

可以忽略 Xcode 的错误,接下来的几步会解决这些问题。

SwiftUI教程

MapView.swift

import SwiftUI
import MapKit struct MapView: UIViewRepresentable {
var body: some View {
Text("Hello World")
}
} struct MapView_Preview: PreviewProvider {
static var previews: some View {
MapView()
}
}

UIViewRepresentable 协议需要实现两个方法: makeUIView(context:) 用来创建一个 MKMapView, updateUIView(_:context:) 用来配置 view 并响应修改。

5.3 用 makeUIView(context:) 方法替换 body 属性,该方法创建并返回一个空的 MKMapView

MapView.swift

import SwiftUI
import MapKit struct MapView: UIViewRepresentable { typealias UIViewType = MKMapView func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
return MKMapView(frame: .zero)
}
} struct MapView_Preview: PreviewProvider {
static var previews: some View {
MapView()
}
}

5.4 实现 updateUIView(_:context:) 方法,给 map view 设置坐标,使其在 Turtle Rock 上居中。

MapView.swift

import SwiftUI
import MapKit struct MapView : UIViewRepresentable { typealias UIViewType = MKMapView func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
return MKMapView(frame: .zero)
} func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
let coordinate = CLLocationCoordinate2D(
latitude: 34.011286, longitude: -116.166868)
let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
let region = MKCoordinateRegion(center: coordinate, span: span)
uiView.setRegion(region, animated: true)
}
} struct MapView_Preview: PreviewProvider {
static var previews: some View {
MapView()
}
}

当预览处于 static mode 时仅显示 SwiftUI view 。因为 MKMapView 是一个 UIView 的子类,所以需要切换到实时模式才能看到地图。

SwiftUI教程

5.5 单击 Live Preview 可将预览切换为实时模式,有时也会用到 Try Again 或 Resume 按钮。

片刻之后,你会看到 Joshua Tree National Park 的地图,这是 Turtle Rock 的故乡。

SwiftUI 教程(四)

SwiftUI 官方教程(五)的更多相关文章

  1. SwiftUI 官方教程(四)

    SwiftUI 官方教程(四) 4. 自定义 Image View 搞定名称和位置 view 后,我们来给地标添加图片. 这不需要添加很多代码,只需要创建一个自定义 view,然后给图片加上遮罩.边框 ...

  2. SwiftUI 官方教程(八)

    8. 动态生成预览 接下来,我们会在 LandmarkList_Previews 中添加代码以在不同的设备尺寸上渲染列表.默认情况下,预览会以当前的 scheme 中设备的大小进行渲染.我们可以通过调 ...

  3. SwiftUI 官方教程(七)

    7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一 ...

  4. SwiftUI 官方教程(三)

    3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们 ...

  5. SwiftUI 官方教程(二)

    SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...

  6. SwiftUI 官方教程(一)

    完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials   创建和组合 View 此部分将指引你构建一个发现和分享您喜爱地方的 ...

  7. SwiftUI 官方教程

    SwiftUI 官方教程 完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials   SwiftUI 官方教程 SwiftUI ...

  8. SwiftUI 官方教程(六)

    6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row  ...

  9. RabbitMQ官方教程五 Topic(GOLANG语言实现)

    在上一教程中,我们改进了日志记录系统. 我们没有使用只能进行虚拟广播的fanout交换器,而是使用直接交换器,并有可能选择性地接收日志. 尽管使用直接交换改进了我们的系统,但它仍然存在局限性-它不能基 ...

随机推荐

  1. Matlab atan2

    对Matlab不是很熟悉,在这个Matlab atan2 函数上出现了问题. 百度知道上的解释是这样的: atan2() 区别于 atan() 函数,返回 -pi~+pi 范围的角度: 使用过程中发现 ...

  2. servlet向浏览器输出信息

    package com.aaa.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebS ...

  3. Java基础学习笔记三 正则表达式和校验、Date、DateFormat、Calendar

    正则表达式 正则表达式(英语:Regular Expression,在代码中常简写为regex).正则表达式是一个字符串,使用单个字符串来描述.用来定义匹配规则,匹配一系列符合某个句法规则的字符串.在 ...

  4. Java8新特性 Stream流式思想(二)

    如何获取Stream流刚开始写博客,有一些不到位的地方,还请各位论坛大佬见谅,谢谢! package cn.com.zq.demo01.Stream.test01.Stream; import org ...

  5. PAT_A1138#Postorder Traversal

    Source: PAT A1138 Postorder Traversal (25 分) Description: Suppose that all the keys in a binary tree ...

  6. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  7. 爬取某网站景区列表并保存为csv文件

    网址:http://www.halehuo.com/jingqu.html 经过查看可以发现,该景区页面没有分页,不停的往下拉,页面会进行刷新显示后面的景区信息 通过使用浏览器调试器,发现该网站使用的 ...

  8. 【codeforces 798A】Mike and palindrome

    [题目链接]:http://codeforces.com/contest/798/problem/A [题意] 让你严格改变一个字符,使得改变后的字符串为一个回文串; 让你输出可不可能; [题解] 直 ...

  9. 百度之星2014资格赛 1004 - Labyrinth

    先上题目: Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. Cloudera 5.8.3 SolrCloud+HDFS的索引数据备份和恢复。(需重启solr进程。)

    一.备份基于HDFS的solrCloud集合数据 1.确认要备份的solr文件夹. /solr/history_customer_collection_test 2.开启HDFS快照功能. hdfs ...