iPad分组表格视图背景颜色？这是什么？

Question

我喜欢iPad上我的tableView的新分组背景颜色。我想在我的分割控制器右侧的UIViewController的背景上使用相同的颜色。

有人知道这个颜色是什么吗？它似乎是一个轻微的渐变。

- Nic Hubbard

---

这是一个渐变，所以我不能只采样颜色并使用该值。 - Nic Hubbard

Answer 1

这不是颜色，而是带有渐变图像的 UIImageView：

UIImageView* imageView = (UIImageView*) self.tableView.backgroundView;
NSString* file = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/Test.png"];
NSData* data = UIImagePNGRepresentation(imageView.image);
[data writeToFile:file atomically:YES];

- Lutz Roeder

---

执行该代码后生成的 .png 图像在 4.3 iPad 模拟器中具有以下属性：大小为 1x64，顶部像素 RGB 值为 0xe2e5ea（226、229、234），底部像素 RGB 值为 0xd0d2d8（208、210、216）。 - herzbube

Answer 2

根据Lutz的回答和这个问题的答案，以下自定义视图控制器代码创建了一个表格视图背景视图的复制品。然而，在自动旋转方面存在问题，这在下面的第二个代码片段中得到解决。

// You also need to link against QuartzCore.framework
#import <QuartzCore/QuartzCore.h>

- (void) loadView
{
  CGRect mainViewFrame = [self mainViewFrame];
  self.view = [[[UIView alloc] initWithFrame:mainViewFrame] autorelease];
  CAGradientLayer* gradient = [CAGradientLayer layer];
  gradient.frame = self.view.bounds;
  UIColor* startColor = [UIColor colorWithRed:226.0/255.0 green:229.0/255.0 blue:234.0/255.0 alpha:1.0];
  UIColor* endColor = [UIColor colorWithRed:208.0/255.0 green:210.0/255.0 blue:216.0/255.0 alpha:1.0];
  // Cast to (id) is necessary to get rid of a compiler warning
  gradient.colors = [NSArray arrayWithObjects:(id)startColor.CGColor, (id)endColor.CGColor, nil];
  // Inserting at index position 0 ensures that the gradient is drawn
  // in the background even if the view already has subviews or other
  // sublayers
  [view.layer insertSublayer:gradient atIndex:0];

  // add more subviews
}

- (CGRect) mainViewFrame
{
  // add your frame calculating code here
}

- (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration
{
  [UIView animateWithDuration:duration
                        delay:0
                      options:UIViewAnimationCurveLinear
                   animations:^{
                     ((CALayer*)[self.view.layer.sublayers objectAtIndex:0]).frame = self.view.bounds;
                   }
                   completion:NULL];
}

以上代码存在问题，旋转动画运行时原始白色背景可见时间非常短。不幸的是，我对图层的理解不足以解决这个问题，因此我开始寻找CAGradientLayer的替代方案。使用渐变图像设置CALayer.contents是我找到的方案。

下面大部分代码用于创建所需的图案图像作为便捷构造函数的输入，但这次用Core Graphics手动绘制渐变，而不是用CAGradientLayer。顺便说一下，渐变绘制代码在很大程度上基于Ray Wenderlich的Core Graphics 101 教程。

#import <QuartzCore/QuartzCore.h>

- (void) loadView
{
  CGRect mainViewFrame = [self mainViewFrame];
  self.view = [[[UIView alloc] initWithFrame:mainViewFrame] autorelease];
  UIColor* startColor = [UIColor colorWithRed:226.0/255.0 green:229.0/255.0 blue:234.0/255.0 alpha:1.0];
  UIColor* endColor = [UIColor colorWithRed:208.0/255.0 green:210.0/255.0 blue:216.0/255.0 alpha:1.0];

  UIImage* backgroundPattern = [self gradientImageWithSize:CGSizeMake(1, mainViewFrame.size.height)
                                                startColor:startColor
                                                  endColor:endColor];
  self.view.layer.contents = (id)backgroundPattern.CGImage;

  // add more subviews
}

- (CGRect) mainViewFrame
{
  // add your frame calculating code here
}

- (UIImage*) gradientImageWithSize:(CGSize)size startColor:(UIColor*)startColor endColor:(UIColor*)endColor
{
  UIGraphicsBeginImageContext(size);
  CGContextRef context = UIGraphicsGetCurrentContext();

  CGRect rect = CGRectMake(0, 0, size.width, size.height);
  [self drawLinearGradientWithContext:context rect:rect startColor:startColor.CGColor endColor:endColor.CGColor];

  UIImage* gradientImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return gradientImage;
}

- (void) drawLinearGradientWithContext:(CGContextRef)context rect:(CGRect)rect startColor:(CGColorRef)startColor endColor:(CGColorRef)endColor
{
  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

  CGFloat locations[] = { 0.0, 1.0 };
  NSArray* colors = [NSArray arrayWithObjects:(id)startColor, (id)endColor, nil];
  // NSArray is toll-free bridged, so we can simply cast to CGArrayRef
  CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
                                                      (CFArrayRef)colors,
                                                      locations);

  // Draw the gradient from top-middle to bottom-middle
  CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
  CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

  // Remember context so that later on we can undo the clipping we are going to
  // add to the Core Graphics state machine
  CGContextSaveGState(context);
  // Add clipping with the specified rect so that we can simply draw into the
  // specified context without changing anything outside of the rect. With this
  // approach, the caller can give us a context that already has other stuff
  // in it
  CGContextAddRect(context, rect);
  CGContextClip(context);
  // Finally draw the gradient
  CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
  // Undo clipping
  CGContextRestoreGState(context);

  // Cleanup memory allocated by CGContextDrawLinearGradient()
  CGGradientRelease(gradient);
  // Cleanup memory allocated by CGColorSpaceCreateDeviceRGB()
  CGColorSpaceRelease(colorSpace);
}

我最喜欢这段代码，因为

• 它能够自动旋转得干净利落
• 没有自定义代码来处理自动旋转
• 与渐变相关的函数可以重构成单独的实用程序类，使它们更具可重用性

- herzbube

Answer 3

[UIColor colorWithRed:0.953 green:0.953 blue:0.953 alpha:1] /#f3f3f3/

的意思是设置颜色为浅灰色，用16进制表示为#f3f3f3。

- woof

Answer 4

这些都是UIColor的开箱即用纹理颜色，静态方法：

+ (UIColor *)lightTextColor;                // for a dark background
+ (UIColor *)darkTextColor;                 // for a light background
+ (UIColor *)groupTableViewBackgroundColor;
+ (UIColor *)viewFlipsideBackgroundColor;
+ (UIColor *)scrollViewTexturedBackgroundColor __OSX_AVAILABLE_STARTING(__MAC_NA, __IPHONE_3_2);

- RLB

---

我已经知道这些了，我猜苹果没有提供它。 - Nic Hubbard

Answer 5

我只是在这里随便提一下，但如果你能在某个地方使用SVG（比如在网页上，或者在某个使用SVG-to-Core-Graphics库的应用程序中），我知道有一些这样的库存在，但并不是最理想的解决方案），我有代码：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="g146" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop stop-color="#E2E5EA" offset="0" />
        <stop stop-color="#D1D3D9" offset="1" />
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#g146)" />
</svg>

使用 DigitalColor Meter 应用程序创建（在我看来，这是苹果应用程序的可怕名称），Xcode 4.5ß4 和 SVG Gradient Background Maker。

- Constantino Tsarouhas