毛玻璃,学名「类玻璃柔光材质」,在规划中也叫「玻璃拟态」(Glassmorphism)。在生活中叫磨砂玻璃,俗称“毛玻璃”。

懂点规划

毛玻璃作用最早出使用在 2007 年微软的 Windows Vista 和 win7 的体系 UI 中。

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

win7 毛玻璃作用

之后,苹果分别在 2013 年发布的 ios7 体系和 2014 年发布的 OS X 10.10 Yosemite 体系中广泛运用了这个作用,比方底部菜单栏,告诉中心等。通明的作用再结合当下盛行的扁平化规划,这些改变让大家觉得耳目一新。

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

ios7 毛玻璃作用

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

MacOS 10.10 毛玻璃作用

在之后的很长时间里,这种风格成为了规划师们常用的方法。直到在近期发布的 Win11 以及 MacOSBigSur 中更加强化了毛玻璃质感,又将玻璃拟态风格的趋势掀起了一个小高潮。

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现
SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

各家对于毛玻璃的完成有些许差异,但关于毛玻璃作用,主要有 4 个特征:

  • 通明感:运用布景含糊和高斯含糊的磨砂作用,呈现出通透感。
  • 层次感: 经过前后联系的叠加,摆开界面元素层次,突出重点。
  • 色彩感: 着重含糊通明度的鲜明,艳丽的布景底色,运用艳丽色彩作为着重色而且从半通明层中透出,更突出了含糊的通明作用。
  • 玻璃质感: 经过边缘的微妙处理,于半通明物体上的细微且光亮的边框,表现出玻璃质感。

毛玻璃的使用场景

毛玻璃在规划中经常出现,常用的一些规划场景包括以下内容。

  • 图标规划

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现
SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

  • 五颜六色布景
SwiftUI 开发之旅:毛玻璃效果的设计理念和实现
  • 卡片式
SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

SwiftUI 毛玻璃

SwiftUI 在 iOS15 上供给了名为 Material 的布景含糊作用,合适使用于布景图片上的文字说明,叠加布景含糊的色块以凸显文字。

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

上图的作用运用 ultraThinMaterial 以最轻微含糊的选项,此时能看到布景的含糊作用。

Material 供给了5个含糊参数,由弱到强分别为:

  • ultraThinMaterial
  • thinMaterial
  • regularMaterial
  • thickMaterial
  • ultraThickMaterial

SwiftUI 毛玻璃作用的完成

经过 Material 的 API 可以完成毛玻璃的 UI 作用,以下示例是简单的经过 SwiftUI 代码完成的毛玻璃过程:

  1. 运用 ZStack 设置一个布景色。
  2. 再给块的布景设置 Material。
struct Test4: View {
  var body: some View {
    ZStack {
      Color.init(hex: "31D3D3").edgesIgnoringSafeArea(.all)
      VStack {
       Text(".ultraThin")
          .padding()
          .frame(width: 200, height: 100)
          .background(.ultraThinMaterial)
        Text(".thin")
          .padding()
          .frame(width: 200, height: 100)
          .background(.thinMaterial)
        Text(".regular")
          .padding()
          .frame(width: 200, height: 100)
          .background(.regularMaterial)
        Text(".thick")
          .padding()
          .frame(width: 200, height: 100)
          .background(.thickMaterial)
        Text(".ultraThick")
          .padding()
          .frame(width: 200, height: 100)
          .background(.ultraThickMaterial)
      }
      .padding()
      .shadow(color: .black.opacity(0.25), radius: 5, x: 0, y: 8)
    }
  }
}

下面作用展示了 5 种强度在深色形式和浅色形式下的显示作用,可以明显看出到在 thickMaterial 以上程度的布景含糊作用过强以至于难以看到布景色块。

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现
SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

在 swiftui 中,毛玻璃作用很合适用来展示卡片,或者是弹窗,sheet等内容的布景展示,下面来看一个在 sheet 中运用的例子。

咱们在上个示例的基础上填写一些内容和 sheet 相关代码:

import SwiftUI
struct Test4: View {
  @State var show: Bool = **false**
  @State var value1 = ""
 
  var body: some View {
    ZStack {
            // ...
    }
    .sheet(isPresented: $show) {
      ZStack {
        Rectangle()
          .fill(.thickMaterial) // 毛玻璃作用
        VStack {
          HStack {
            Button(action: {
              self.show = false
            }) {
              Image(systemName: "xmark")
            }
            Spacer(minLength: 0)
            Text("文章").bold()
            Spacer(minLength: 0)
          }.padding()
          VStack {
            Text("SwiftUI 开发之旅").padding()
            Text("毛玻璃作用的规划理念和完成").padding()
          }
          Spacer()
          HStack {
            Button(action: {
                            self.show = false
            }, label: {
              Text("点赞")
                .padding(.horizontal, 2)
                .padding(.vertical, 15)
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .foregroundColor(.white).cornerRadius(12)
            })
            .padding(.bottom)
          }.padding()
        }.padding()
      }
    }
  }
}

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

然鹅,并没有出现咱们想要的毛玻璃作用。这是由于 sheet 模态框默认情况下布景是不通明的,咱们还需要将模态框的布景色设置为通明,才能正常显示毛玻璃的作用。

新增一个 BackgroundClearView 结构体,来完成布景清除功能

struct BackgroundClearView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    func updateUIView(_ uiView: UIView, context: Context) {}
}

然后给 ZStack 增加 background 修饰符:

.sheet(isPresented: $show) {
      ZStack {
       // ...
      }
      .background(BackgroundClearView())
}

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

此时模态框底部有一些留白,再给 ZStack 增加一个 ignoresSafeArea 修饰符处理一下安全区域就可以了。

来看看终究作用。

SwiftUI 开发之旅:毛玻璃效果的设计理念和实现

总结

咱们回顾了毛玻璃作用的诞生和它的实际使用。学习了如安在 swiftui 中使用毛玻璃作用,可以看得出,在有大面积色块的布景上运用毛玻璃作用能带来不一样的用户体会,比方 sheet,音讯卡片等。无妨的在你的使用中运用这一规划,给你的用户体会增加一些不一样的东西吧。

这是 SwiftUI 开发之旅专栏的文章,是 swiftui 开发学习的经验总结及实用技巧分享,欢迎重视该专栏,会坚持输出。同时欢迎重视我的个人大众号 @JSHub:供给最新的开发信息速报,优质的技能干货推荐。或是检查我的个人博客:Devcursor。

点赞:如果有收获和帮助,请点个赞支持一下!

保藏:欢迎保藏文章,随时检查!

评论:欢迎评论交流学习,共同进步!