Fügen Sie eine Farbauswahl, um eine iOS-app

Hatte ich die gleiche Frage wie du. Es ist bedauerlich, dass es keine eingebaute Farb-picker für iOS. Die anderen Antworten hier und für ähnliche Fragen, vor allem die Verwendung von third-party-Bibliotheken oder Projekten. Ich bevorzuge es, zu vermeiden alle Drittanbieter-Sachen, Wann immer möglich, so dass lässt uns mit...

Machen Sie Ihre eigene Farbauswahl

Gibt es viele Möglichkeiten, wie Sie es tun könnte, aber hier ist ein einfaches Beispiel, um zu zeigen, das Konzept. Ich mein story-board wie diesem:

Es hat eine UIView (Grau hier) zeigen die gewählte Farbe, ein UIImageView zu zeigen, die Farbauswahl, und eine UISlider um die Farbe zu wählen. Verwendet habe ich das folgende Bild in die UIImageView:

Habe ich es von den Farben eine 12-Speichen-Rad Farbe mit einem Screenshot und Gimp - color-picker-tool. Gimp ist auch hilfreich, wenn man sich die Farb-hex-codes, die wir später benutzen werden.

Einstellen der min-und max-Werte für den Regler auf 0,5 und 13,5. Konvertieren Sie den Schieberegler Werte zu ganzen zahlen wird es später geben Sie eine Zahl für jede der Farben in unserem Bild. Beginnend bei 0,5 statt 0 macht die Farbe des Schiebereglers ändert sich die Position mit dem Bild übereinstimmen, besser.

Haken für die UI-Elemente der View-Controller und den folgenden code verwenden, konvertieren Sie die position des Reglers um die Farben.

class ViewController: UIViewController {

    //RRGGBB hex colors in the same order as the image
    let colorArray = [ 0x000000, 0xfe0000, 0xff7900, 0xffb900, 0xffde00, 0xfcff00, 0xd2ff00, 0x05c000, 0x00c0a7, 0x0600ff, 0x6700bf, 0x9500c0, 0xbf0199, 0xffffff ]

    @IBOutlet weak var selectedColorView: UIView!
    @IBOutlet weak var slider: UISlider!
    @IBAction func sliderChanged(sender: AnyObject) {
        selectedColorView.backgroundColor = uiColorFromHex(colorArray[Int(slider.value)])
    }

    func uiColorFromHex(rgbValue: Int) -> UIColor {

        let red =   CGFloat((rgbValue & 0xFF0000) >> 16) / 0xFF
        let green = CGFloat((rgbValue & 0x00FF00) >> 8) / 0xFF
        let blue =  CGFloat(rgbValue & 0x0000FF) / 0xFF
        let alpha = CGFloat(1.0)

        return UIColor(red: red, green: green, blue: blue, alpha: alpha)
    }
}

Nun, wenn Sie es ausführen, Sie können wählen Sie die Farbe, indem Sie den Schieberegler hin und her.

Variationen

• Positionieren Sie den Schieberegler auf der Oberseite des Bildes und die Spur gesetzt Farbtöne, transparent. Dies gibt ihm das Gefühl ein custom UI, ohne Unterklasse nichts.

• Hier ist ein weiteres Bild mit helleren und dunkleren Variationen des Beispiel-Projekts Bild.

let colorArray = [ 0x000000, 0x262626, 0x4d4d4d, 0x666666, 0x808080, 0x990000, 0xcc0000, 0xfe0000, 0xff5757, 0xffabab, 0xffabab, 0xffa757, 0xff7900, 0xcc6100, 0x994900, 0x996f00, 0xcc9400, 0xffb900, 0xffd157, 0xffe8ab, 0xfff4ab, 0xffe957, 0xffde00, 0xccb200, 0x998500, 0x979900, 0xcacc00, 0xfcff00, 0xfdff57, 0xfeffab, 0xf0ffab, 0xe1ff57, 0xd2ff00, 0xa8cc00, 0x7e9900, 0x038001, 0x04a101, 0x05c001, 0x44bf41, 0x81bf80, 0x81c0b8, 0x41c0af, 0x00c0a7, 0x00a18c, 0x00806f, 0x040099, 0x0500cc, 0x0600ff, 0x5b57ff, 0xadabff, 0xd8abff, 0xb157ff, 0x6700bf, 0x5700a1, 0x450080, 0x630080, 0x7d00a1, 0x9500c0, 0xa341bf, 0xb180bf, 0xbf80b2, 0xbf41a6, 0xbf0199, 0xa10181, 0x800166, 0x999999, 0xb3b3b3, 0xcccccc, 0xe6e6e6, 0xffffff]

• Verwenden Sie ein array von UIColors zu vermeiden, dass zu tun, die hex-Konvertierung.

• Könnte mehrere UIViews eher als ein Bild, und legen Sie die Farben direkt aus dem array.

Weitere Studie

• Farbenlehre Für Designer, Teil 2: Verständnis Der Konzepte Und Terminologie
• Farbenlehre Für Designer: Erstellen Sie Ihre Eigenen Farb-Paletten
• Einfache swift color picker-popover (iOS)

InformationsquelleAutor der Antwort Suragch

Es ist ein weiteres cool color picker gemacht durch kartech. Es hat awesome UI für die Auswahl der Farben. Außerdem können Sie markieren Farben als Favorit. Link ist hier.

Screenshots:

InformationsquelleAutor der Antwort NightFury