【问题标题】:Circular UI Slider with Image and Color带有图像和颜色的圆形 UI 滑块
【发布时间】:2016-11-14 09:17:47
【问题描述】:

我正在使用 UISlider 开发一个应用程序,需要使其循环。 是否可以通过一些本机代码实现,还是必须集成第 3 方库?

我想填充颜色,因为用户会在滑块上滑动。

【问题讨论】:

  • 为此有很多第三方库。如果你想定制一个,你必须为此子类化UIControl。您可以查看我的答案中给出的链接。
  • 如果您有混合应用程序,那么您可以使用以下插件。否则,您可以尝试为此插件制作本机包装器。 roundsliderui.com

标签: ios uislider


【解决方案1】:
【解决方案2】:

我在一个带有多个链接的单独线程中遇到了这个问题,并且不喜欢提供的任何答案,所以我想我会在似乎最相关的线程中添加我自己的问题,以防其他人发现他们在这里的方式并喜欢我提供的选项。

它并不优雅或简单,但它很容易,我认为这将是其他人开发自己的一个很好的起点。

在此示例中,圆形 uiScroller 放置在 SKView 顶部的视图(或 HUD)上。然后我使用 hitTest 将任何触摸从 gameScene 转移到 UIView 并使用 _touchesBegan 和 _touchesMoved 更新一系列隐藏的按钮,如下所示:

the arrows are all hidden but we use the frames of each box to register where the touch is

我制作了箭头 UIButtons,因此使用故事板更容易,但我认为 imageView 工作正常,因为我们只检查 _touchesBegan 内的箭头框架,然后将其发送到函数,而不是从箭头本身。

if upBtn.frame.contains(touch) {
            upBtnPress() //if you made this a touch func like me a call to (self) as the sender may be required
        }

黑色圆圈本身仍然可见,因此看起来这是您的水龙头所在的位置。

然后你最终创建多个像这样的图像:

any circular pattern for each location possible is appropriate

(我一共得了16分)

然后在任何按下功能下,您只需根据触摸位置更改黑色圆圈的图像以显示正确的图像,然后您就完成了!

circleDpad.image = UIImage(named: "up")

计算角度:

非常简单,我的表盘上有 16 个点,所以我需要将其转换为 1...360 的可能方向

func angleChanged(angle: CGFloat) {
    let valueReached = (angle / 16) * 360 // this gives you the angle in degrees, converting any point that's x/16 into x/360
    let turret = checkBaseSelect() //this is my personal code
    turret?.tAngle = CGFloat(valueReached) * (CGFloat.pi / 180) //this converts degrees to radians and applies it where I want it.
}

尽管只有 16 个点,但我发现即使不应用动画,它看起来也很流畅。感谢阅读。

this is a gif of my circular slider in action

这是我的第一个指南,如果需要更多信息(或应该在其他地方),请告诉我。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-10-04
    • 1970-01-01
    • 1970-01-01
    • 2021-11-05
    • 1970-01-01
    • 1970-01-01
    • 2014-04-16
    • 1970-01-01
    相关资源
    最近更新 更多