iOS SwiftUI 自己动手做个颜色与照片选择器Picker

动手做个颜色与照片选择器

看看效果

[email protected]

Jietu20200220-154457.gif

用到工具

• enum 枚举类型
• @Binding
• 视图的.onTapGesture修饰器
• 图片剪裁
• 图片边框

实现步骤

1、 用enum类型管理颜色

enum PickedColor: CaseIterable {
  case black, blue, green, orange, red, yellow
  
  var color: Color {
    return Color(uiColor)
  }
  
  var uiColor: UIColor {
    switch self {
    case .black:
      return UIColor(named: "Black")!
    case .blue:
      return UIColor(named: "Blue")!
    case .green:
      return UIColor(named: "Green")!
    case .orange:
      return UIColor(named: "Orange")!
    case .red:
      return UIColor(named: "Red")!
    case .yellow:
      return UIColor(named: "Yellow")!
    }
  }
}

---

2、颜色选择效果

struct ColorPicker: View {
  @Binding var pickedColor: PickedColor
  
  let diameter: CGFloat = 40
  
  var body: some View {
    HStack {
      ForEach(PickedColor.allCases, id: \.self) { pickedColor in
        ZStack {
          Circle()
            .foregroundColor(pickedColor.color)
            .frame(width: self.diameter,
                   height: self.diameter)
            .onTapGesture {
              self.pickedColor = pickedColor
              print  ("\(PickedColor.allCases.firstIndex(of: pickedColor)!)")
          }
          Circle()
            .foregroundColor(.white)
            .frame(width: self.pickedColor == pickedColor ? self.diameter * 0.25 : 0)
        }
      }
    }
    .frame(height: diameter * 3)
  }
}

3、照片选择效果

struct ColorPickerView: View {
  @State var pickedColor: PickedColor = .red
  var body: some View {
    VStack {
        Image("\(PickedColor.allCases.firstIndex(of: pickedColor)!+1)")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width:250,height: 250)
        .clipShape( Circle())
        .overlay(Circle()
            .stroke(lineWidth:8)
            .foregroundColor(pickedColor.color)
        )
        
      ColorPicker(pickedColor: $pickedColor)
    }
  }
}

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970