動手做個顏色與照片選擇器

看看效果

[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)
    }
  }
}

如果需要項目完整源碼，可以加我QQ。

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

• 請關注我的專欄icloudend, SwiftUI教程與源碼
  https://www.jianshu.com/c/7b3e3b671970