zoukankan      html  css  js  c++  java
  • SwiftUI 官方教程(四)

    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教程(五)

     
  • 相关阅读:
    UITextField的简单操作和实际应用
    iOS
    单例传值
    改良UIScrollView滚动视图
    省市便利 UIPicherView
    滚动视图UIScrollView
    label自适应
    将图像设置成圆形
    笔记
    笔记
  • 原文地址:https://www.cnblogs.com/suibian1/p/11026042.html
Copyright © 2011-2022 走看看