Watchkit / Xcode中的故事板渐变

I have a design for an apple watch app that consists of a table with five rows. I want to have a gradient that is overlain on top of the screen so that the screen gets darker further down the screen

我有一个苹果手表应用程序的设计,包括一个五行的表。我希望在屏幕顶部覆盖一个渐变,使屏幕在屏幕下方变得更暗

The rows need to be the same colour so that when you scroll up then obviously they scroll 'above' the gradient

行必须是相同的颜色,以便当您向上滚动时,显然它们会在渐变上方滚动

This should hopefully explain what I mean: Watchkit / Xcode中的故事板渐变

这应该有希望解释我的意思:

Is there a way of doing this in xcode or using swift?

有没有办法在xcode中或使用swift?

Thanks!

2 个解决方案

#1

Unfortunately, as rmp mentioned in the comment, there is no way to accomplish this in the current version of WatchKit. The only "layering" that is possible is by setting the background image of a WKInterfaceGroup that contains other image elements that appear "on top." In this case, however, you'd need an image above the WKInterfaceTable, and that functionality isn't available.

不幸的是,正如评论中提到的rmp一样,在当前版本的WatchKit中无法实现这一点。唯一可能的“分层”是通过设置WKInterfaceGroup的背景图像,其中包含出现在“顶部”的其他图像元素。但是,在这种情况下,您需要WKInterfaceTable上方的图像,并且该功能不可用。

While you might think that you could alter the cell background colors as the table scrolls to achieve a similar effect, you can't determine the scroll location of a WKInterfaceTable, so there's no way to do this either.

虽然您可能认为可以在表格滚动以实现类似效果时更改单元格背景颜色,但您无法确定WKInterfaceTable的滚动位置,因此也无法执行此操作。

#2

Swift 4

Setting Gradient Background on WKInterfaceGroup

在WKInterfaceGroup上设置渐变背景

First, create this UImage class:

首先,创建这个UImage类:

class UIGradientImage: UIImage {
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

convenience init?(size: CGSize, colors: [CGColor], locations: [CGFloat]) {
    let colors = colors as CFArray
    guard let grad = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors, locations: locations) else {return nil}
    self.init(size: size, gradient: grad)
}

convenience init?(size: CGSize, gradient: CGGradient) {
    UIGraphicsBeginImageContext(size)
    let ref = UIGraphicsGetCurrentContext()
    ref?.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint.init(x: size.width, y: size.height), options: [.drawsBeforeStartLocation, .drawsAfterEndLocation] )
    if let img = UIGraphicsGetImageFromCurrentImageContext()?.cgImage {
        self.init(cgImage: img)
        UIGraphicsEndImageContext()
    } else {
        UIGraphicsEndImageContext()
        return nil
    }
}

override init(cgImage: CGImage) {
    super.init(cgImage: cgImage)
}

override init(cgImage: CGImage, scale: CGFloat, orientation: UIImageOrientation) {
    super.init(cgImage: cgImage, scale: scale, orientation: orientation)
}

required convenience init(imageLiteralResourceName name: String) {
    fatalError("init(imageLiteralResourceName:) has not been implemented")
}
}

Then, add a WKInterfaceGroup to your interface and set its background image to a new UIGradientImage:

然后,将WKInterfaceGroup添加到您的界面并将其背景图像设置为新的UIGradientImage:

    let size = self.contentFrame.size
    self.myGroup.setBackgroundImage(UIGradientImage(size: size, colors: [UIColor.cyan.cgColor, UIColor.white.cgColor], locations: [0, 1]))

Good luck!

#1