Swift UI에서 16진수 색상 사용

Swift UI에서 16진수 색상 사용

UIKit에서는 확장 기능을 사용하여 이 튜토리얼에서와 같이 거의 모든 항목에 16진수 색상을 설정할 수 있습니다.하지만 스위프트에서 하려고 할 때는UI, 불가능합니다. 스위프트처럼 보입니다.UI는 다음을 얻지 못합니다.UIColor매개 변수로

Text(text)
    .color(UIColor.init(hex: "FFF"))

오류 메시지:

Cannot convert value of type 'UIColor' to expected argument type 'Color?'

나는 심지어 연장을 시도했습니다.Color대신에UIColor하지만 전 운이 없어요.

의 내선 번호Color:

import SwiftUI

extension Color {
    init(hex: String) {
        let scanner = Scanner(string: hex)
        scanner.scanLocation = 0
        var rgbValue: UInt64 = 0
        scanner.scanHexInt64(&rgbValue)
        
        let r = (rgbValue & 0xff0000) >> 16
        let g = (rgbValue & 0xff00) >> 8
        let b = rgbValue & 0xff
        
        self.init(
            red: CGFloat(r) / 0xff,
            green: CGFloat(g) / 0xff,
            blue: CGFloat(b) / 0xff, alpha: 1
        )
    }
}

오류 메시지:

Incorrect argument labels in call (have 'red:green:blue:alpha:', expected '_:red:green:blue:opacity:')

거의 다 왔습니다. 잘못된 이니셜라이저 파라미터를 사용하고 있었습니다.

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }

        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}

16진수에 Int를 사용하는 아래의 다른 대안이지만, 물론 원한다면 String으로 변경할 수 있습니다.

extension Color {
    init(hex: UInt, alpha: Double = 1) {
        self.init(
            .sRGB,
            red: Double((hex >> 16) & 0xff) / 255,
            green: Double((hex >> 08) & 0xff) / 255,
            blue: Double((hex >> 00) & 0xff) / 255,
            opacity: alpha
        )
    }
}

사용 예:

Color(hex: 0x000000)
Color(hex: 0x000000, alpha: 0.2)

사용해 보십시오.

extension Color {
    init(hex: Int, opacity: Double = 1.0) {
        let red = Double((hex & 0xff0000) >> 16) / 255.0
        let green = Double((hex & 0xff00) >> 8) / 255.0
        let blue = Double((hex & 0xff) >> 0) / 255.0
        self.init(.sRGB, red: red, green: green, blue: blue, opacity: opacity)
    }
}

용도:

Text("Hello World!")
    .background(Color(hex: 0xf5bc53))

Text("Hello World!")
    .background(Color(hex: 0xf5bc53, opacity: 0.8))

여기 제 솔루션이 있는 놀이터가 있습니다.폴백 후 폴백을 추가하고 색상 및 알파에 대해서는 hexString에만 의존합니다.

import SwiftUI

extension Color {
    init(hex string: String) {
        var string: String = string.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
        if string.hasPrefix("#") {
            _ = string.removeFirst()
        }

        // Double the last value if incomplete hex
        if !string.count.isMultiple(of: 2), let last = string.last {
            string.append(last)
        }

        // Fix invalid values
        if string.count > 8 {
            string = String(string.prefix(8))
        }

        // Scanner creation
        let scanner = Scanner(string: string)

        var color: UInt64 = 0
        scanner.scanHexInt64(&color)

        if string.count == 2 {
            let mask = 0xFF

            let g = Int(color) & mask

            let gray = Double(g) / 255.0

            self.init(.sRGB, red: gray, green: gray, blue: gray, opacity: 1)

        } else if string.count == 4 {
            let mask = 0x00FF

            let g = Int(color >> 8) & mask
            let a = Int(color) & mask

            let gray = Double(g) / 255.0
            let alpha = Double(a) / 255.0

            self.init(.sRGB, red: gray, green: gray, blue: gray, opacity: alpha)

        } else if string.count == 6 {
            let mask = 0x0000FF
            let r = Int(color >> 16) & mask
            let g = Int(color >> 8) & mask
            let b = Int(color) & mask

            let red = Double(r) / 255.0
            let green = Double(g) / 255.0
            let blue = Double(b) / 255.0

            self.init(.sRGB, red: red, green: green, blue: blue, opacity: 1)

        } else if string.count == 8 {
            let mask = 0x000000FF
            let r = Int(color >> 24) & mask
            let g = Int(color >> 16) & mask
            let b = Int(color >> 8) & mask
            let a = Int(color) & mask

            let red = Double(r) / 255.0
            let green = Double(g) / 255.0
            let blue = Double(b) / 255.0
            let alpha = Double(a) / 255.0

            self.init(.sRGB, red: red, green: green, blue: blue, opacity: alpha)

        } else {
            self.init(.sRGB, red: 1, green: 1, blue: 1, opacity: 1)
        }
    }
}

let gray0 = Color(hex: "3f")
let gray1 = Color(hex: "#69")
let gray2 = Color(hex: "#6911")
let gray3 = Color(hex: "fff")
let red = Color(hex: "#FF000044s")
let green = Color(hex: "#00FF00")
let blue0 = Color(hex: "0000FF")
let blue1 = Color(hex: "0000F")

Color에서 hexString을 가져오는 경우.이것은 공개 API가 아닙니다.이를 위해서는 여전히 UIColor 구현에 의존해야 합니다.

PS: 아래의 구성 요소 솔루션을 보았습니다.하지만 앞으로 API가 바뀌면 제 버전이 조금 더 안정적입니다.

모범 사례

이 방법은 앱에서 사용자 지정 색상을 설정하는 방법입니다.설정된 색상은 모든 보기에서 액세스할 수 있으며 쉽게 업데이트됩니다.그것은 또한 코드의 한 줄입니다.

1. 프로젝트 파일이 있는 왼쪽 패널에서 '자산' 폴더 열기

2. 이제 Assets 폴더의 왼쪽에 있는 '+' 버튼을 클릭하고 'Color Set'을 선택합니다.열리면 'Color1'로 이름 변경

3. 이제 페이지 중앙의 색 사각형을 클릭한 다음 오른쪽의 검사자 패널에서 원하는 색을 선택하는 '색상 패널 표시'를 클릭합니다.

4. 이제 텍스트 색상을 변경할 코드로 돌아갑니다.

   Text
   .foregroundColor(Color("Color1"))
   

extension Color {
  init(_ hex: UInt, alpha: Double = 1) {
    self.init(
      .sRGB,
      red: Double((hex >> 16) & 0xFF) / 255,
      green: Double((hex >> 8) & 0xFF) / 255,
      blue: Double(hex & 0xFF) / 255,
      opacity: alpha
    )
  }
}

그런 다음 다음과 같이 사용할 수 있습니다.

let red = Color(0xFF0000)
let green = Color(0x00FF00)
let translucentMagenta = Color(0xFF00FF, alpha: 0.4)

두 번째 확장은 대부분의 알려진 형식을 포함하는 16진수 문자열로 색상을 만들 수 있습니다.다음을 가능하게 합니다.

회색 음영에 대한 선행 번호 2자리 형식 지정, 단축 6자리 형식에 대한 3자리 형식, 회색의 경우 4자리 형식, RGB에 대한 알파 6자리 형식, RGBA에 대한 8자리 형식 지정.잘못된 모든 형식에 대해 자동으로 0을 반환합니다.

extension Color {
  init?(_ hex: String) {
    var str = hex
    if str.hasPrefix("#") {
      str.removeFirst()
    }
    if str.count == 3 {
      str = String(repeating: str[str.startIndex], count: 2) 
        + String(repeating: str[str.index(str.startIndex, offsetBy: 1)], count: 2) 
        + String(repeating: str[str.index(str.startIndex, offsetBy: 2)], count: 2)
    } else if !str.count.isMultiple(of: 2) || str.count > 8 {
      return nil
    }
    let scanner = Scanner(string: str)
    var color: UInt64 = 0
    scanner.scanHexInt64(&color)
    if str.count == 2 {
      let gray = Double(Int(color) & 0xFF) / 255
      self.init(.sRGB, red: gray, green: gray, blue: gray, opacity: 1)
    } else if str.count == 4 {
      let gray = Double(Int(color >> 8) & 0x00FF) / 255
      let alpha = Double(Int(color) & 0x00FF) / 255
      self.init(.sRGB, red: gray, green: gray, blue: gray, opacity: alpha)
    } else if str.count == 6 {
      let red = Double(Int(color >> 16) & 0x0000FF) / 255
      let green = Double(Int(color >> 8) & 0x0000FF) / 255
      let blue = Double(Int(color) & 0x0000FF) / 255
      self.init(.sRGB, red: red, green: green, blue: blue, opacity: 1)
    } else if str.count == 8 {
      let red = Double(Int(color >> 24) & 0x000000FF) / 255
      let green = Double(Int(color >> 16) & 0x000000FF) / 255
      let blue = Double(Int(color >> 8) & 0x000000FF) / 255
      let alpha = Double(Int(color) & 0x000000FF) / 255
      self.init(.sRGB, red: red, green: green, blue: blue, opacity: alpha)
    } else {
      return nil
    }
  }
}

다음은 지원되는 모든 형식을 보여주는 몇 가지 샘플 색상입니다.

let gray1 = Color("4f")
let gray2 = Color("#68")
let gray3 = Color("7813")
let red = Color("f00")
let translucentGreen = Color("#00FF0066")
let blue = Color("0000FF")
let invalid = Color("0000F")

행운을 빕니다 ;)

다음 용도로도 사용했습니다.UIColor신속하게 해킹함으로써.이 버전은 다음에 맞게 수정되었습니다.Color:

init?(hex: String) {
    var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
    hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")

    var rgb: UInt64 = 0

    var red: Double = 0.0
    var green: Double = 0.0
    var blue: Double = 0.0
    var opacity: Double = 1.0

    let length = hexSanitized.count

    guard Scanner(string: hexSanitized).scanHexInt64(&rgb) else { return nil }

    if length == 6 {
        red = Double((rgb & 0xFF0000) >> 16) / 255.0
        green = Double((rgb & 0x00FF00) >> 8) / 255.0
        blue = Double(rgb & 0x0000FF) / 255.0

    } else if length == 8 {
        red = Double((rgb & 0xFF000000) >> 24) / 255.0
        green = Double((rgb & 0x00FF0000) >> 16) / 255.0
        blue = Double((rgb & 0x0000FF00) >> 8) / 255.0
        opacity = Double(rgb & 0x000000FF) / 255.0

    } else {
        return nil
    }

    self.init(.sRGB, red: red, green: green, blue: blue, opacity: opacity)
}

Shift 이업해합트 쪽비오른시프사니다야용해를트별작을 사용해야 합니다.>> 및 AND 산자및 트비연 AND&의 값 합니다.16진수 패턴의 각 색상 채널은 8비트 또는 0 ~ 255 사이의 10진수 값 또는 0x00 ~ 0xFF 사이의 16진수 값을 사용합니다.

여기서는 비트 연산자를 사용하여 색상의 빨간색 구성 요소를 2바이트(16비트) 뒤로, 녹색 구성 요소를 1바이트 뒤로 각각 마스킹 및 이동하여 16진수 값을 효율적으로 분해합니다.Xcode의 Live View에서 작동하는 방식을 살펴보겠습니다.

0xFF     == 0x0000FF    // blue
0xFF00   == 0x00FF00    // green
0xFF0077 == 0xFF0077    // pink

코드는 다음과 같습니다.

import SwiftUI

extension Color {
    init(_ hexColor: UInt32) {
        self.init(uiColor: .init(
                      red: CGFloat(0xFF & (hexColor >> 0x10)) / 0xFF,
                    green: CGFloat(0xFF & (hexColor >> 0x08)) / 0xFF,
                     blue: CGFloat(0xFF & (hexColor >> 0x00)) / 0xFF,
                    alpha: 1.0))
    }
}

struct ContentView: View {
    
    @State private var hexColor: UInt32 = 0xFF0077    // Deep Pink HEX color
    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            Rectangle()
                .frame(width: 300, height: 300)
                .foregroundColor(.init(hexColor))
        }
    }
}

용.
UIColor.init(hex: "f2000000")
UIColor.init(hex: "#f2000000")
UIColor.init(hex: "000000")
UIColor.init(hex: "#000000")

extension UIColor {
public convenience init(hex:String) {
var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
    
    if (cString.hasPrefix("#")) {
        cString.remove(at: cString.startIndex)
    }
    var r: CGFloat = 0.0
    var g: CGFloat = 0.0
    var b: CGFloat = 0.0
    var a: CGFloat = 1.0
    
    var rgbValue:UInt64 = 0
    Scanner(string: cString).scanHexInt64(&rgbValue)
    
    if ((cString.count) == 8) {
        r = CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0
        g =  CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0
        b = CGFloat((rgbValue & 0x0000FF)) / 255.0
        a = CGFloat((rgbValue & 0xFF000000)  >> 24) / 255.0
        
    }else if ((cString.count) == 6){
        r = CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0
        g =  CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0
        b = CGFloat((rgbValue & 0x0000FF)) / 255.0
        a =  CGFloat(1.0)
    }
    
    
    self.init(  red: r,
                green: g,
                blue: b,
                alpha: a
    )
} }

다음과 같이 확장을 생성할 수 있습니다.

Swift UI 가져오기

extension Color {
    init(hex: UInt, alpha: Double = 1) {
        self.init(
            .sRGB,
            red: Double((hex >> 16) & 0xff) / 255,
            green: Double((hex >> 08) & 0xff) / 255,
            blue: Double((hex >> 00) & 0xff) / 255,
            opacity: alpha
        )
    }
}

사용방법

 Text("In order to write about life first you must live it")
    .foregroundColor(Color(hex: 0x969696))

6자리 16진수 값 앞에 0x 사용

용도:

Color(hex: "#FFFFFF") // hashtag + uppercase value
Color(hex: "#ffffff") // hashtag + lowercase value
Color(hex: "FFFFFF") // without hashtag
Color(hex: "FFFFFF", alpha: 0.2) // color value + alpha value
Color(hex: "#0080FF80") // long color & alpha value

저의 솔루션은 생산 환경에서 우수한 성능을 발휘한 UIColor용 코드를 기반으로 합니다.깃허브의 원래 코드.

extension Color {

    init(hex: String?, alpha: CGFloat? = nil) {
        let normalizedHexString: String = Color.normalize(hex)
        var ccc: CUnsignedLongLong = 0
        Scanner(string: normalizedHexString).scanHexInt64(&ccc)
        var resultAlpha: CGFloat {
            switch alpha {
            case nil: return ColorMasks.alphaValue(ccc)
            default: return alpha!
            }
        }
        self.init(CGColor(red: ColorMasks.redValue(ccc),
                          green: ColorMasks.greenValue(ccc),
                          blue: ColorMasks.blueValue(ccc),
                          alpha: resultAlpha))
    }

    func hexDescription(_ includeAlpha: Bool = false) -> String {
        guard let cgColor = self.cgColor else {
            return "Problem with cgColor"
        }
        guard cgColor.numberOfComponents == 4 else {
            return "Color not RGB."
        }
        guard let components = cgColor.components else {
            return "Problem with cgColor.components"
        }
        let aaa = components.map({ Int($0 * CGFloat(255)) })
        let color = String.init(format: "%02x%02x%02x", aaa[0], aaa[1], aaa[2])
        if includeAlpha {
            let alpha = String.init(format: "%02x", aaa[3])
            return "\(color)\(alpha)"
        }
        return color
    }

    fileprivate enum ColorMasks: CUnsignedLongLong {
        case redMask    = 0xff000000
        case greenMask  = 0x00ff0000
        case blueMask   = 0x0000ff00
        case alphaMask  = 0x000000ff

        static func redValue(_ value: CUnsignedLongLong) -> CGFloat {
            return CGFloat((value & redMask.rawValue) >> 24) / 255.0
        }

        static func greenValue(_ value: CUnsignedLongLong) -> CGFloat {
            return CGFloat((value & greenMask.rawValue) >> 16) / 255.0
        }

        static func blueValue(_ value: CUnsignedLongLong) -> CGFloat {
            return CGFloat((value & blueMask.rawValue) >> 8) / 255.0
        }

        static func alphaValue(_ value: CUnsignedLongLong) -> CGFloat {
            return CGFloat(value & alphaMask.rawValue) / 255.0
        }
    }

    fileprivate static func normalize(_ hex: String?) -> String {
        guard var hexString = hex else {
            return "00000000"
        }
        if hexString.hasPrefix("#") {
            hexString = String(hexString.dropFirst())
        }
        if hexString.count == 3 || hexString.count == 4 {
            hexString = hexString.map { "\($0)\($0)" } .joined()
        }
        let hasAlpha = hexString.count > 7
        if !hasAlpha {
            hexString += "ff"
        }
        return hexString
    }
}

이 확장을 다음에 사용할 수 있습니다.

extension UIColor {
    convenience init(hexaString: String, alpha: CGFloat = 1) {
        let chars = Array(hexaString.dropFirst())
        self.init(red:   .init(strtoul(String(chars[0...1]),nil,16))/255,
                  green: .init(strtoul(String(chars[2...3]),nil,16))/255,
                  blue:  .init(strtoul(String(chars[4...5]),nil,16))/255,
                  alpha: alpha)}
}

Usage Example:

let lightGoldColor  = UIColor(hexaString: "#D6CDB2")

Test Code:

자원

은 16자를 지원하는 16진수(3, 4, 6, 8자)에서 됩니다.#,alpha,web constants,그리고.UIColor constants아래의 사용 예.

Swift Package iOS 14+에는 다음에 대한 지원이 포함되어 있습니다.Color16진수, 임의, CSS 색상 및 사용자 기본값.

언급URL : https://stackoverflow.com/questions/56874133/use-hex-color-in-swiftui