美文网首页程序员
SwiftUI之GeometryReader

SwiftUI之GeometryReader

作者: 老马的春天 | 来源:发表于2020-07-08 15:24 被阅读0次

    SwiftUI的一个神奇之处在于,我们在做某些功能的时候,无需过多地关心布局信息,而是把主要精力放在业务逻辑部分,后续的文章中,我会专门写一篇Data Flow的文章。

    那么SwiftUI布局的核心原理是什么呢? 主要分3个步骤:

    • 父view提供一个建议的size
    • 子view根据自身的特性返回一个size
    • 父view使用子view返回的size对子view进行布局

    举个例子🌰:

    企业微信截图_11e6a5b9-d111-457f-832c-04c5846142b6.png
    struct Example3: View {
        var body: some View {
            HStack(spacing: 0) {
                Text("举个例子🌰")
    
                MyRectangle()
            }
            .frame(width: 200, height: 100, alignment: .center)
            .border(Color.green, width: 1)
        }
    
        struct MyRectangle: View {
            var body: some View {
                Rectangle().fill(Color.green)
            }
        }
    }
    

    在上边的图片中,可以看出,HStack作为父view,他的尺寸是200*100,Text的宽度依赖文字的宽度,而剩余的宽度就都给了MyRectangle。

    大家只需要仔细思考SwiftUI布局的3个步骤,再对照代码和运行效果,就能明白其中道理。我们不在这里做更多解释。那么这跟GeometryReader有什么关系呢?

    GeometryReader的主要作用就是能够获取到父view建议的尺寸。

    我们稍微修改一下上边的代码:

    struct ContentView: View {
        var body: some View {
            Example4()
                .frame(width: 200, height: 100, alignment: .center)
        }
    }
    
    struct Example4: View {
        var body: some View {
            GeometryReader { proxy in
                HStack(spacing: 0) {
                    Text("举个例子🌰, \(proxy.size.width)")
    //                    .layoutPriority(1)
                    
                    MyRectangle()
                }
                .border(Color.green, width: 1)
            }
    
        }
    
        struct MyRectangle: View {
            var body: some View {
                Rectangle().fill(Color.green)
            }
        }
    }
    
    
    企业微信截图_3840a754-c25b-4d9b-993d-5646f8c76bd8.png

    可以看到,确实获取到了父view的width,但是为什么文字自动换行了呢?是因为在HStack中,Text和MyRectangle拥有同样的布局优先级,要想让文字尽可能的展示完整,只需提升Text的布局优先级即可。

    .layoutPriority(1)
    

    GeometryProxy

    在上边例子中,我们用到了一个proxy参数,这个参数的类型是GeometryProxy,我们先看看它的定义:

    public struct GeometryProxy {
        public var size: CGSize { get }
        public subscript<T>(anchor: Anchor<T>) -> T { get }
        public var safeAreaInsets: EdgeInsets { get }
        public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
    }
    
    • size比较直观,就是返回父view建议的尺寸
    • subscript可以让我们获取.leading,.top等等类似这样的数据
    • safeAreaInsets可以获取安全区域的Insets
    • frame(in:)要求传入一个CoordinateSpace类型的参数,也就是坐标空间,可以是.local, .global 或者 .named(),其中 .named()可以自定义坐标空间,这个在下边的例子中会用到

    接下来,我们会演示两个例子来进一步学习GeometryReader。

    RoundedCornersView

    Simulator Screen Shot - iPhone 11 Pro Max - 2020-07-08 at 14.27.19.png
    struct RoundedCornersView: View {
        var color: Color = .black
        var topLeading: CGFloat = 0.0
        var topTrailing: CGFloat = 0.0
        var bottomLeading: CGFloat = 0.0
        var bottomTrailing: CGFloat = 0.0
        
        var body: some View {
            GeometryReader { geometry in
                Path { path in
                    
                    let w = geometry.size.width
                    let h = geometry.size.height
                    
                    let tr = min(min(self.topTrailing, h/2), w/2)
                    let tl = min(min(self.topLeading, h/2), w/2)
                    let bl = min(min(self.bottomLeading, h/2), w/2)
                    let br = min(min(self.bottomTrailing, h/2), w/2)
                    
                    path.move(to: CGPoint(x: w / 2.0, y: 0))
                    path.addLine(to: CGPoint(x: w - tr, y: 0))
                    path.addArc(center: CGPoint(x: w - tr, y: tr), radius: tr, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false)
                    path.addLine(to: CGPoint(x: w, y: h - br))
                    path.addArc(center: CGPoint(x: w - br, y: h - br), radius: br, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 90), clockwise: false)
                    path.addLine(to: CGPoint(x: bl, y: h))
                    path.addArc(center: CGPoint(x: bl, y: h - bl), radius: bl, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 180), clockwise: false)
                    path.addLine(to: CGPoint(x: 0, y: tl))
                    path.addArc(center: CGPoint(x: tl, y: tl), radius: tl, startAngle: Angle(degrees: 180), endAngle: Angle(degrees: 270), clockwise: false)
                    }
                    .fill(self.color)
            }
        }
    }
    

    像下边这样使用:

    Text("大圣,")
        .font(.title2)
        .padding(.all, 10)
        .background(RoundedCornersView(color: .green,
                                       topLeading: 0,
                                       topTrailing: 30,
                                       bottomLeading: 30,
                                       bottomTrailing: 0))
    

    从上边的代码和效果图来看,通过GeometryProxy,我们可以获取到父view建议的尺寸,在本例中,RoundedCornersView的父view其实是background。可以在这里下载封装好的代码SwiftUI-RoundedCornersView

    滚动试图

    Kapture 2020-07-08 at 14.54.02.gif

    正如上图所示,随着滚动的距离,动态计算图片翻转的角度。为实现这一功能,需要用到一点点数学知识:

    • 定义屏幕中间位置的图片旋转角度为0
    • 根据view当前的center相当于屏幕的位置求出percent
    • 应用3D旋转,沿y轴

    代码比较简单,在这里就不做更多解释了,代码如下:

    struct Example2: View {
        let img = ["1", "2", "3", "4", "5"]
    
        var body: some View {
            ScrollView(.horizontal) {
                LazyHStack(spacing: 0) {
                    ForEach(0..<img.count) { index in
                        GeometryReader { proxy in
                            Image(img[index])
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .rotation3DEffect(self.rotateAngle(proxy), axis: (x: 0, y: 11, z: 0))
                        }
                        .frame(width: 600.0 / 3, height: 600.0 / 3 * (425 / 640))
                    }
                }
            }
            .frame(width: 600)
            .coordinateSpace(name: "ScrollViewSpace")
        }
    
        func rotateAngle(_ proxy: GeometryProxy) -> Angle {
            let dif = 600 * 0.5 - proxy.frame(in: .named("ScrollViewSpace")).midX
            let pct = min(dif / proxy.size.width * 0.5, 1)
            return .degrees(Double(30 * pct))
        }
    }
    

    我们可以通过.coordinateSpace(name: "ScrollViewSpace")这种方式给某个View自定义一个坐标空间,然后通过proxy.frame(in: .named("ScrollViewSpace")).midX来获取到某个view当前的位置在指定坐标空间中的坐标。

    也就是说,我们需要获取Image在其父viewScrollView中的相对坐标。

    总结

    GeometryReader让我们能够获取到父view提供的建议的size,该数据保存在GeometryProxy,GeometryProxy提供了一个frame(in:)函数,可以让我们分别获取到该view相对于.global.local或者.name的size。

    查看本文示例代码:GeometryDemo.swift

    SwiftUI集合:FuckingSwiftUI

    相关文章

      网友评论

        本文标题:SwiftUI之GeometryReader

        本文链接:https://www.haomeiwen.com/subject/sbjccktx.html