colorpicker_是否需要iOS 14中的ColorPicker提供更多功能？ 自行创建1,500多个SwiftUI选择器...

colorpicker

iOS 14 ColorPicker (The iOS 14 ColorPicker)

iOS 14 brings updates to the SwiftUI API, and that means we get some new Views to use in our apps. It might be a surprise to learn that we now have a ColorPicker, which we can use simply by passing a Binding for a colour that we want to pick. This makes it much easier than ever before to choose a custom colour in our iOS, iPadOS and MacOS apps, but what about when we want custom controls? The ColorPicker as it is seems to have a fairly rigid set of controls that can’t be changed by the developer.

iOS 14带来了SwiftUI API的更新，这意味着我们获得了一些可以在我们的应用中使用的新视图。 得知我们现在有了ColorPicker ，这可能使我们感到意外，只需将Binding传递给想要选择的颜色即可使用。 这使得在我们的iOS，iPadOS和MacOS应用程序中选择自定义颜色比以往任何时候都容易得多，但是当我们想要自定义控件时会怎样呢？ 尽管ColorPicker似乎具有相当严格的控件集，但开发人员无法更改它们。

What if we want different controls?

如果我们想要不同的控件怎么办？

What if we want the controls to look how we want them to look?

如果我们希望控件看起来像我们想要的样子怎么办？

If we make our own, we can do whatever we want!

如果我们自己做，我们可以做任何我们想做的事！

1,500多个颜色选择器 (1,500+ Colour Pickers)

I should probably explain how I got to that 1,500+ number in the headline.

我可能应该在标题中说明如何达到1,500多个数字。

This will show I’m not exaggerating while showing everything you’ll learn, so it serves multiple purposes.

这将显示我在展示您将学到的所有知识时并不夸张，因此它具有多种用途。

We are using four colour spaces for these colour pickers:

我们为这些颜色选择器使用了四个颜色空间：

• Cyan, magenta, yellow, black, alpha (CMYKA)
  青色，洋红色，黄色，黑色，阿尔法(CMYKA)
• Hue, saturation, brightness, alpha (HSBA)
  色相，饱和度，亮度，alpha(HSBA)
• Red, green, blue, alpha (RGBA)
  红色，绿色，蓝色，alpha(RGBA)
• White, alpha (greyscale)
  白色，alpha(灰度)

Every picker you’ll make in this tutorial occupies a single colour space and allows you to set every parameter without having several controls for the same parameter.

您将在本教程中创建的每个选择器都占用一个颜色空间，并允许您设置每个参数而无需为同一参数设置多个控件。

Below are the controls you’ll make:

以下是您将要进行的控制：

帆布 (Canvases)

Canvases use the x and y coordinates to pick two parameters at once (hue/saturation in this case)

画布使用x和y坐标一次选择两个参数(在这种情况下为色相/饱和度)

You’ll learn to create canvases, which allow you to pick a point on a square. If the x-axis is brightness and the y-axis is saturation, the coordinates of the point you pick will set both of these parameters.

您将学习如何创建画布，从而可以在正方形上选择一个点。 如果x轴是亮度， y轴是饱和度，则您选择的点的坐标将同时设置这两个参数。

轮圈 (Wheels)

Wheels use the degrees of rotation around a circle instead of 2-D coordinates

车轮使用绕圆旋转的角度，而不是二维坐标

You’ll learn to create wheels, which make more sense when representing hue (which is what we commonly refer to as the colour wheel) and saturation. But these wheels can be used to display any parameter combination you want, no matter how odd it may seem.

您将学习创建轮，当表示色相(通常称为色轮 )和饱和度时，轮更有意义。 但是这些轮可以用来显示您想要的任何参数组合，无论看起来多么奇怪。

滑杆 (Sliders)

Sliders can only pick one parameter at a time but can be combined with other controls

滑块一次只能选择一个参数，但可以与其他控件组合使用

You’ll learn to create sliders, which can be dragged to select a single parameter. The sliders will have the option of being vertical instead of horizontal — because why not? These are custom controls.

您将学习如何创建滑块，可以将其拖动以选择单个参数。 滑块可以选择垂直而不是水平，因为为什么不呢？ 这些是自定义控件。

调色板 (Palettes)

Palettes can contain any number of swatches and change according to a different parameter in the horizontal and vertical directions

调色板可以包含任意数量的色板，并且可以根据水平和垂直方向上的不同参数进行更改

You will learn to create palettes, which create a custom number of swatches in the horizontal and vertical directions. You can choose how many swatches there are in each direction, so there are actually hundreds of palette sizes.

您将学习如何创建调色板，该调色板将在水平和垂直方向上创建自定义数量的色板。 您可以选择每个方向上有多少个色板，因此实际上有数百个调色板尺寸。

将控件组合到选取器中 (Combining Controls Into Pickers)

Pickers in the RGBA and HSBA colour spaces can only be made any of the following ways:

只能通过以下任何一种方式来选择RGBA和HSBA颜色空间中的选择器：

• four sliders
  四个滑块
• two canvases
  两张画布
• two wheels
  两个轮子
• two palettes
  两个调色板
• one canvas and two sliders
  一张画布和两个滑块
• one wheel and two sliders
  一个轮子和两个滑块
• one palette and two sliders
  一个调色板和两个滑块
• one canvas and one wheel
  一块帆布和一个轮子
• one canvas and one palette
  一张画布和一个调色板
• one wheel and one palette
  一轮一盘

There are 24 permutations of the RGBA or HSBA parameters, and each permutation can be made in ten ways.

RGBA或HSBA参数有24个排列，每个排列可以用十种方式进行。

This means there are 240 RGBA pickers and 240 HSBA pickers, for a total of 480 in all.

这意味着有240个RGBA选择器和240个HSBA选择器，总共有480个。

Pickers in the CMYK colour space can only be one of the following ways:

CMYK颜色空间中的选择器只能是以下方式之一：

• five sliders
  五个滑块
• two canvases and one slider
  两张画布和一个滑块
• two wheels and one slider
  两个轮子和一个滑块
• two palettes and one slider
  两个调色板和一个滑块
• one canvas, one wheel, and one slider
  一张画布，一个轮子和一个滑块
• one canvas, one palette, and one slider
  一张画布，一个调色板和一个滑块
• one wheel, one palette, and one slider
  一个轮子，一个调色板和一个滑块
• one canvas and three sliders
  一张画布和三个滑块
• one wheel and three sliders
  一个轮子和三个滑块
• one palette and three sliders
  一个调色板和三个滑块

There are 120 permutations of the CMYKA parameters, and each permutation can be made in ten ways.

CMYKA参数有120个排列，每个排列可以用十种方式进行。

This means there are 1,200 possible CMYK pickers, for a total of 1,680 overall.

这意味着有1,200个可能的CMYK选择器，总共有1,680个。

As it only has the parameters of whiteness and opacity, grayscale can only be made with two sliders, one canvas, one palette, or one colour wheel.

由于它仅具有白度和不透明度参数，因此只能使用两个滑块，一个画布，一个调色板或一个色轮来制作灰度。

That brings the total pickers to 1,684, and I’m not even including the fact that sliders can be horizontal or vertical, pickers can exclude alpha, and palettes can be any size.

这使选择器总数达到1,684，而且我什至不包括滑块可以是水平或垂直，选择器可以排除alpha，调色板可以是任意大小的事实。

让我们开始吧 (Let’s Get Started)

Although I’ll show you how to put these colour pickers in a Swift package, I thought I’d leave that to the end. After all, you may not want to use Swift Package Manager, and you may just want to put the code in your project as it is. With this in mind, create a new Single View Xcode project with SwiftUI as the user interface. This will create ContentView as the first View in your interface, which you can change in order to preview the various Views we will be working on. Since ContentView is created in SceneDelegate, it’s useful to put a View you want to preview on a Simulator or physical device in ContentView.

尽管我将向您展示如何将这些颜色选择器放入Swift程序包中，但我认为我将保留到最后。 毕竟，您可能不想使用Swift Package Manager，而您只想按原样将代码放入项目中。 考虑到这一点，以SwiftUI作为用户界面创建一个新的Single View Xcode项目。 这将创建ContentView作为界面中的第一个View ，您可以更改该View以便预览我们将要使用的各种View 。 由于ContentView是在SceneDelegate中创建的，因此将要预览的View放置在ContentView的模拟器或物理设备上很有用。

If you want to build another View to a Simulator or device, you’ll need to change SceneDelegate to use that View instead of ContentView.

如果要为模拟器或设备构建另一个View ，则需要更改SceneDelegate以使用该View而不是ContentView 。

When I give an example of code, it could be in the same file or by creating separate files for each View.

当我举一个代码示例时，它可以在同一文件中，也可以为每个视图创建单独的文件。

It’s up to you how you prefer to organise your Views.

由您决定如何组织视图。

扩展数值类型 (Extending numerical types)

I added some extensions to Apple’s numerical types, as I thought it would be useful to be able to restrict the range of the Doubles we are using. I have a tendency to add halfPi and doublePi as constants whenever I am calculating angles, just because it probably gives a small performance boost if you don’t do float division and multiplication to obtain these values every time that they’re needed. They’ll both be needed when we get to wheels, but for now, I just left them here so I don’t forget to tell you to add them later.

我对Apple的数字类型添加了一些扩展，因为我认为能够限制我们使用的Doubles的范围会很有用。 每当我计算角度时，我倾向于将halfPi和doublePi添加为常量，这是因为如果您不进行浮点除法和乘法运算以在每次需要它们时都获得这些值，则可能会带来较小的性能提升。 我们上车时都需要它们，但是现在，我只是将它们留在这里，所以我不会忘记告诉您以后添加它们。

I originally wrote the clampFrom variation of this method, which can be used to restrict the value of a CGFloat or D