SwiftUI简直就是小菜一碟 (It’s A Piece Of Cake With SwiftUI)

Building something as seemingly simple as a knob that you can rotate isn’t a simple endeavor using UIKit. Thankfully, SwiftUI makes previously complex UI operations a breeze.

使用UIKit来构建看起来像旋钮一样简单的东西并不是一件容易的事。 幸运的是，SwiftUI使以前复杂的UI操作变得轻而易举。

Drawing a circle in Swift using built-in APIs is a fun exercise — but only because I’m a glutton for punishment.

使用内置的API在Swift中画一个圆是一个有趣的练习-但这只是因为我是惩罚的嘴。

Disclaimer: I don’t understand much about Geometry, so it makes it that much more difficult.

免责声明：我对Geometry的了解不多，因此难度更大。

幸运的是，SwiftUI知道什么是“ Circle()” (Thankfully, SwiftUI knows what a “Circle()” is)

Want to make a circle in SwiftUI? Cool, just type Circle() anywhere you can render a view.

想在SwiftUI上绕圈吗？ 很酷，只要在可以渲染视图的任何地方键入Circle()即可。

If you do this inside of your view’s body, you’ll get a perfect (but unstyled, full-width) circle when you press resume on your canvas view.

如果在视图的主体内部执行此操作，则在画布视图上按“恢复”时，将得到一个完美的(但未设置样式的全角)圆圈。

现在让我们对其进行样式设置 (Now let’s style it)

Again, SwiftUI makes this super simple. Let’s make a 60x60 circle and make it a silver color.

同样，SwiftUI使这个超级简单。 让我们制作一个60x60的圆圈并将其设为银色。

We change the circle’s color using .fill and give it a frame with .frame.

我们使用.fill更改圆的颜色，并使用.fill为其指定.frame 。

All we need now is an indicator. I’m going to use a circle, but you can experiment with a line or other shapes if you’d like. I’m going to size it proportionally to the knob, and give it an offset proportional to the knob’s width to place it on the outside of the knob.

我们现在需要的只是一个指标。 我将使用圆，但是如果您愿意，您可以尝试使用直线或其他形状。 我将按比例调整它的大小，并给它一个与旋钮的宽度成比例的偏移量，以将其放置在旋钮的外部。

Here’s how we make it:

这是我们的方法：

好的，让我们将这个圆圈放在另一个圆圈的上方。 应该很容易吧？ (Ok, let’s put this circle on top of the other circle. Should be easy, right?)

Well, it is. But you have to know how…

好吧，是的。 但是你必须知道如何……

If you tried to render this circle inside of the other by placing it on the line after .frame in the knob’s outer circle, you’re probably seeing an error. I haven’t delved very deeply into SwiftUI, but from what I can gather, the body can only essentially render one view. You can stack views, but attempting to render more than one outside of stack views has never worked for me. Additionally, we haven’t given any positional information, aside from an X offset.

如果您试图通过将其放置在旋钮外圆.frame之后的行上来将此圆渲染为另一个圆，则可能会看到错误。 我还没有对SwiftUI进行过深入的研究，但是据我所知，主体实际上只能渲染一个视图。 您可以堆叠视图，但是尝试在堆叠视图之外渲染多个视图对我来说从来没有用。 此外，除了X偏移量之外，我们没有提供任何位置信息。

堆栈视图，堆栈视图，无处不在的堆栈视图 (Stack Views, Stack Views, Everywhere A Stack View)

With SwiftUI, we get a horizontal stack with HStack, a vertical stack with VStack, and a 3D stack with ZStack. So what we need here in order to render one view on top of the other is a ZStack. If we place these views as-is in a ZStack, it’ll render just fine. But this code is already starting to get mucked up with a bunch of magic numbers, so I’m going to replace those with properties.

随着SwiftUI，我们得到一个水平叠层HStack ，垂直堆栈VStack ，并配有3D堆栈ZStack 。 因此，为了在一个视图之上呈现一个视图，我们需要一个ZStack 。 如果我们将这些视图原样放置在ZStack中，它将很好地呈现。 但是这段代码已经开始被大量的魔术数字所困扰，因此我将用属性替换那些数字。

If you want a label at the bottom of your volume control, now all you have to do is put the ZStack in a VStack and add Text("Volume") after the ZStack’s closing brace. This renders the label underneath the 2 views we just created.

如果你想在你的音量控制底部的标签，现在你需要做的就是把ZStack在VStack并添加Text("Volume")后ZStack的右括号。 这将在我们刚刚创建的2个视图下绘制标签。

Adding a gesture recognizer to the knob that animates the position of the indicator is all that we need now. This will give the appearance that the entire volume knob is spinning.

现在，我们只需要在旋钮上添加一个手势识别器以动画化指示器的位置即可。 这将使整个音量旋钮旋转。

We can add a gesture recognizer using .gesture and a rotation animation using .rotationEffect. We’ll also need a way of managing the state of one view using another view’s value (rotation). Combining all of this is easy… but takes a little SwiftUI know-how.

我们可以通过添加一个手势识别.gesture并使用旋转动画.rotationEffect 。 我们还需要一种使用另一个视图的值(旋转)来管理一个视图的状态的方法。 将所有这些结合起来很容易……但是需要一些SwiftUI知识。

First, let’s handle managing state…

首先，让我们处理状态管理...

@州 (@State)

@State is a property modifier that allows us to manage the state of our UI when the value changes. Let’s add another property to the top of our struct that we’ll use to track when the view is being rotated.

@State是一个属性修饰符，允许我们在值更改时管理UI的状态。 让我们在结构的顶部添加另一个属性，该属性将用于跟踪视图何时旋转。

@State var rotation: Double = 0

@State var rotation: Double = 0

手势识别器 (Gesture Recognizer)

Now, let’s add a gesture recognizer for a rotation gesture. Place this at the end of your volume knob. This will change our state variable every time the knob is rotated.

现在，让我们为旋转手势添加一个手势识别器。 将其放在音量旋钮的末端。 每次旋转旋钮，这都会更改我们的状态变量。

.gesture(    RotationGesture()        .onChanged { value in            self.rotation = value.degrees        })

Lastly, let’s add our animation to the end of the indicator.

最后，让我们将动画添加到指示器的末尾。

.rotationEffect(    .degrees(self.rotation),    anchor: .center)

Now our Volume Control should be fully designed and functional. If you press play for a live preview, then hold down option and swipe, you should see the knob rotate.

现在，我们的音量控制应该经过充分设计和功能。 如果按播放进行实时预览，然后按住选项并滑动，则应该看到旋钮旋转。

That said, I don’t like how the body is looking, so I’m going to clean things up by making the knob and grabber (indicator) views properties of the struct. Inside of the body, I’ll place the views, and do the implementation for the recognizer and the animation.

就是说，我不喜欢身体的外观，所以我将通过使旋钮和抓取器(指示器)查看结构的属性来清理事物。 在主体内部，将放置视图，并执行识别器和动画的实现。

Note:I’m not sure why, but when making the views a property, they seem to become static or class members rather than instance members of the class. Thus, the properties involved in creating them need to be static or class members as well.

注意： 我不确定为什么，但是在将视图设为属性时，它们似乎变为静态或类成员，而不是类的实例成员。 因此，创建它们所涉及的属性也必须是静态的或类成员。

If you want to see how I implemented the rest of the views, combined them, and also implemented a list view containing songs, check out this repository.

如果您想了解我如何实现其余视图，将它们组合在一起并实现包含歌曲的列表视图，请查看此存储库 。

结语 (Wrap-Up)

We implemented a Volume Control knob that responds to a rotation gesture and gives the appearance that we’re rotating the knob by animating the indicator view.

我们实现了“音量控制”旋钮，该旋钮响应旋转手势，并通过为指示器视图设置动画来显示旋转旋钮的外观。

We did this by making each view, placing them in a stack view, implementing a rotation gesture, adding a state property to track the rotation of the knob, and finally animating the indicator view based on the knob’s rotation value.

为此，我们制作了每个视图，将它们放置在堆栈视图中，实现了旋转手势，添加了state属性以跟踪旋钮的旋转，最后根据旋钮的旋转值对指示器视图进行了动画处理。

The included repository shows you how to create several views in different files so you aren’t cluttering any one file, and storing complex views as properties so your implementation site remains as clean as possible.

包含的存储库向您展示了如何在不同的文件中创建多个视图，以使您不会混乱任何一个文件，并将复杂的视图存储为属性，从而使实现站点保持尽可能的整洁。

See if you can add on to the functionality of this app. It’s got a half-decent UI, but doesn’t really do anything right now. Maybe you can figure out how to play an actual song and link up the duration to the ProgressView?

查看您是否可以添加此应用程序的功能。 它有一个不错的用户界面，但现在并没有真正做任何事情。 也许您可以弄清楚如何播放实际的歌曲并将持续时间链接到ProgressView？