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

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

看看效果

Jietu20200220-153832@2x.jpg
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)
    }
  }
}

如果需要项目完整源码,可以加我QQ。

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

推荐阅读更多精彩内容

  • 前言 相信每一个见到 SwiftUI 的开发者,都会立刻将这门船新的 UI 框架和 Flutter 联系到一起。是...
    努力的搬砖工阅读 2,886评论 4 14
  • 像天上的云 是梦幻,是狂想 当秋风随时光荡漾 秋水随气候变凉 我写的诗都老了 像夜空的月 是明,是亮 当繁星隐逸着...
    凤炎菥阅读 82评论 0 5
  • 现在差两分钟2点 忽然醒来 我发现 第一件事情 就是想起了你 六哥 张震 男票~ 我也很谢谢你 能那么信任我喜欢我...
    blacksalt6阅读 11评论 0 0
  • 我去年参加了国家司法考试,幸运地一次通过。对我来说,那段时光是非常孤独和煎熬的,挺过去了便会拥有舒服的日子。现在,...
    Pe1za1阅读 23评论 0 0
  • '''8-1 消息 :编写一个名为 display_message() 的函数,它打印一个句子,指出你在本章学的是...
    若门_00阅读 761评论 0 0