SwiftUI 01-创建和组合视图 (Creating and

2019-06-08  本文已影响0人  字节码

本章Demo 链接
Blog 链接

简介

此示例是记录学习SwiftUI的过程，原文出自apple.com。

本示例使用SwiftUI完成一个iOS应用程序Landmarks（地标），用于发现和分享喜欢的地方。我们先构建Landmarks详情的视图。
为了方便布局view，Landmarks使用stacks来组合和分层图像和文本视图组件。我们需要基于MapKit构建地图，并将其添加到view中。修改视图的布局时，Xcode会提供实时的预览效果，我们还可以通过Xcode提供的canvas（画布）轻松的找到对应的代码，比如点击canvas上面的某个view，其对应的代码就会高亮，请看下图。

Snip20190608_5.png

创建项目并预览画布

使用xcode创建SwiftUI项目。浏览画布、预览和SwiftUI模板代码。
要在Xcode中预览画布上的视图并与之交互，环境依赖MacOS 10.15和Xcode 11及以上。

创建项目

如果你的Xcode11中找不到画布，请选择Editor > Editor and Canvas以显示它。

Snip20190608_10.png

当我们更改视图的body属性中的代码时，右侧的预览画布会实时显示我们的改变。

自定义文本视图

我们可以修改代码来自定义视图的显示。
在构建Landmarks应用程序时，可以使用任何编辑器组合： 代码编辑器（source editor）、 画布（canvas ）或 检查器（inspectors ）。无论使用哪种工具，代码都会保持更新。

Snip20190608_14.png

弹出窗口显示我们可以根据该控件自定义的不同属性，具体取决于自定义的view类型。

Snip20190608_17.png

我们的代码始终是视图的真实来源。 当使用检查器更改或删除修改器时，Xcode会立即更新我们的代码。

-6.在编辑器中，将弹出窗口中的color选项设置为Inherited，就会再次将文本颜色更改为默认的颜色黑色。
请注意，此时Xcode会自动更新代码删除颜色color(.blue)修饰符，以反映在检查器中的更改。

Snip20190608_23.png
使用Stacks 组合视图

上面我们这个页面添加了一个标题视图，下面我们添加一个详情描述视图，用来显示位置的。
在创建SwiftUI视图时，我们可以在视图的body属性中描述其内容、布局和行为; 但是，body属性中只能添加单个视图。 如果要在body中添加多个视图，可以在Stacks，在Stacks中嵌入多个视图，Stacks允许三种布局方式：水平HStack、垂直VStack、从后到前ZStack 组合在一起。

546a4d34-fef9-4574-a405-d16ec83ca7fe.png

现在我们使用Stacks的垂直布局方式，将标题和详情组合在一起。

我们可以使用Xcode的代码编辑中的Inspect（检查器）在body中添加一个VStack。

Snip20190608_29.png

根据需求自定义这个文本的字体。

接下来，我们将在该位置Text的右侧添加另一个Text视图，用来描述该公园的状态。

struct ContentView : View {
    var body: some View {
        VStack(alignment:.leading) { 
            Text("Turtle Rock")
                .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                }
        }
        
    }
}

然后在拖拽一个Text控件到HStack中，用以显示状态的文本。

spacer展开以使其包含视图使用其父视图的所有空间，而不是仅通过其内容定义其大小。


import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment:.leading) { 
            Text("Turtle Rock")
                .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    // 让 HStack 中的子控件宽度充满整个父视图
                    Spacer()
                    Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
                }
        }
        // 设置间距
        .padding()
        
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif
创建自定义ImageVew

上面我们添加了名称和详情文本视图，接下来要做的是为landmark添加图像。

我们将创建一个自定义视图，将遮罩，边框和阴影应用于图像，而不是在此文件中添加更多代码。

首先将图像添加到项目的Assets.xcassets中。

接下来，我们将为自定义图像视图创建一个新的SwiftUI视图。

Snip20190608_33.png

我们已准备好插入图像并修改其显示以匹配所需的设计。

import SwiftUI

struct CircleImage : View {
    var body: some View {
        Image("turtlerock")
    }
}

#if DEBUG
struct CircleImage_Previews : PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
#endif
Snip20190608_34.png Snip20190608_35.png Snip20190608_37.png

这样就完成了图像视图。

同时使用UIKit和SwiftUI的视图

现在我们已准备好创建地图视图。 可以使用MapKit中的MKMapView类来渲染地图。
要在SwiftUI中使用UIView子类，可以将其他视图包装在符合UIViewRepresentable协议的SwiftUI视图中。 SwiftUI包含WatchKit和AppKit视图的类似协议。

b9753927-fb44-4f74-876f-31d9126cbb16.png

首先，我们将创建一个自定义视图用于显示MKMapView。

import SwiftUI
import MapKit

struct MapView : UIViewRepresentable {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello World!"/*@END_MENU_TOKEN@*/)
    }
}

#if DEBUG
struct MapView_Previews : PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
#endif

不要担心Xcode提示的错误; 我们将在接下来的几个步骤中解决这个问题。

UIViewRepresentable协议有两个必须要实现的方法：

    /// 创建一个要呈现的`UIView`实例。
    func makeUIView(context: Self.Context) -> Self.UIViewType

    /// 将呈现的`UIView`（和协调员）更新为最新版本
    func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)

import SwiftUI
import MapKit

struct MapView : UIViewRepresentable {
    
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
}

#if DEBUG
struct MapView_Previews : PreviewProvider {
    static var previews: some View {
        MapView()
    }
}
#endif

当预览处于静态模式时，它们仅完全呈现SwiftUI视图。 因为MKMapView是一个UIView子类，所以需要切换到实时预览才能看到地图。

Snip20190608_38.png

启动实时预览后，我们便能看到地图上的数据了。

将自定义的MapView添加到详情视图中

我们现在拥有了4个所需的所有组件：1.名称文本，2.地点文本，3.圆形图像，4.位置图。
使用您目前使用的工具，组合您的自定义视图以创建标志性详细视图的最终设计，下面是效果图：


973ba702-85db-4852-851f-86a94cfca002.png 
import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack {
            VStack(alignment:.leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    // 让 HStack 中的子控件宽度充满整个父视图
                    Spacer()
                    Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
                }
            }
            // 设置间距
            .padding()
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif
Snip20190608_39.png

当我们仅指定frame的height时，视图会自动调整其内容的宽度。 在这种情况下，MapView会扩展以填充可用空间。

您可以在显示实时预览时继续编辑视图。

这些调整通过向上移动图像为文本腾出空间。

Snip20190608_40.png
上一篇下一篇

猜你喜欢

热点阅读