SwiftUI 官方教程(四)

4. 自定义 Image View

搞定名称和位置 view 后,我们来给地标添加图片。

这不需要添加很多代码,只需要创建一个自定义 view,然后给图片加上遮罩、边框和阴影即可。

首先将图片添加到项目的 asset catalog 中。

SwiftUI 官方教程

4.1 在项目的 Resources 文件夹中找到 turtlerock.png ,将它拖到 asset catalog 的编辑器中。 Xcode 会给图片创建一个 image set 。

接下来,创建一个新的 SwiftUI view 来自定义 image view。

4.2 选择 File > New > File 打开模板选择器。在 User Interface 中,选中 SwiftUI View ,然后单击 Next 。将文件命名为 CircleImage.swift ,然后单击 Create 。

现在准备工作已完成。

SwiftUI教程

4.3 使用 Image(_:) 初始化方法将 text view 替换为 Turtle Rock 的图片。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var body: some View {
Image("turtlerock")
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}

4.4 调用 .clipShape(Circle()) ,将图像裁剪成圆形。

SwiftUI教程

Circle 可以当做一个蒙版的形状,也可以通过 stroke 或 fill 形成 view。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}

4.5 创建另一个 gray stroke 的 circle ,然后将其作为 overlay 添加到图片上,形成图片的边框。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.gray, lineWidth: 4))
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}

4.6 接来下,添加一个半径为 10 point 的阴影。

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.gray, lineWidth: 4))
.shadow(radius: 10)
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}

4.7 将边框的颜色改为 white ,完成 image viewSwiftUI教程

CircleImage.swift

import SwiftUI

struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
} struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}

SwiftUI教程(三)

SwiftUI教程(五)

 

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

  1. SwiftUI 官方教程(五)

    SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 Sw ...

  2. SwiftUI 官方教程(三)

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

  3. SwiftUI 官方教程(八)

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

  4. SwiftUI 官方教程(七)

    7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 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官方教程四 Routing(GOLANG语言实现)

    在上一教程中,我们构建了一个简单的日志记录系统. 我们能够向许多消费者广播日志消息. 在本教程中,我们将向其中添加功能-我们将使仅订阅消息的子集成为可能. 例如,我们将只能将严重错误消息定向到日志文件 ...

随机推荐

  1. MYSQL 代码删除和添加表格列方法

    一个表格建立后用代码删除或添加列: -- 删除列alter table teacher drop column create_time;-- 添加列alter table teacher add co ...

  2. 安装Windows服务,一直提示系统正在关机的错误。

    错误截图如下: 问题概况: 在本机安装没问题,程序没问题. 安装到公司的测试环境就报错了!以管理员身份运行也不行. 解决方案: 1.最后发现是360安全防护中心拦截了.具体解决过程如下: 2.进入36 ...

  3. VMWare 安装Centos 6.9

    1.新建虚拟机 (1)点击文件-->新建虚拟机 (2)选择 自定义(高级)--> 下一步 (3)选择Workstation 12.0 --> 下一步 (4)选择 稍后安装操作系统 - ...

  4. [转载]MySql事物处理

    事务处理在各种管理系统中都有着广泛的应用,比如人员管理系统,很多同步数据库操作大都需要用到事务处理.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如 ...

  5. ★Java语法(四)——————————运算符

    使用除法“/”  ,要特别注意数据类型的问题.若被除数和除数都是整形,且被除数不能被除数整除时,这时输出的结果为整数,(即整形数/整形数=整形数),这是因为整形变量无法保存小数点后面的数据所致,要特别 ...

  6. 【Linux】连接CRT

    linux中出现crt连接不上多数是ip地址设置不正确. window中命令行界面(cmd进入),输入ipconfig,查看虚拟机的ip. 打开linux终端,命令行下输入:ifconfig eth0 ...

  7. SQL Server对数据进行添加

    下面介绍一下SQL Server如何往数据库中加入数据. <!-- 添加主人信息 --> <form action="add_Admin.jsp" method= ...

  8. Sobel算子取代:基于特定点方向的canny边缘检测

    前言: Canny边缘检测使用了Sobel算子,计算dx和dy两个方向,对于特定方向的边缘检测,可以作少量修改. 代码: 计算特定方向上的边缘 void CannyOrient( cv::Mat &a ...

  9. OpenCV实现灰度直方图和直方图拉伸

    原文链接:http://blog.csdn.net/xiaowei_cqu/article/details/7600666 如有疑问或者版权问题,请移步原作者或者告知本人. 灰度直方图是数字图像中最简 ...

  10. 浅析Python3中的bytes和str类型 (转)

    原文出处:https://www.cnblogs.com/chownjy/p/6625299.html#undefined Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文 ...