在代码中动态更改详细信息披露按钮的颜色

Posted 2023-03-21

【中文标题】在代码中动态更改详细信息披露按钮的颜色

【英文标题】：Change color of detail disclosure button dynamically in code

【发布时间】：2013-05-22 16:12:47

【问题描述】：

我知道以前有人问过类似的问题，但大多数答案都说创建一个具有所需颜色的新细节披露按钮图像（例如How to change color of detail disclosure button for table cell）。

我希望能够在运行时动态地将其更改为我选择的任何颜色，因此使用预配置的图像是不可行的。

通过阅读，我认为可能有几种方法可以做到这一点，但我不确定哪个是最好的，或者确切地说是如何做到这一点：

在代码中绘制所需的色环，并在圆圈外加上阴影圆的图像和右箭头（带有清晰的alpha通道用于休息，因此绘制的色环仍然可见）

在 UIImageView 中添加圆外圆阴影的图像，并用作遮罩，在此阴影圆内填充填充，然后覆盖箭头。

添加灰度图像，用自身遮罩，覆盖所需颜色（例如http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage），然后用箭头图像覆盖。

什么是最好的方法，有没有人有任何代码显示如何做到这一点？

【问题讨论】：

我在自己的应用程序中使用选项 3。效果很好。

@rmaddy - 有没有机会发布没有箭头的细节披露按钮的灰度图像（如果可能，非视网膜和视网膜版本）？

【参考方案1】：

我使用以下辅助方法为灰度图像着色。它采用灰度图像、色调颜色和用于确保色调仅发生在灰度图像的一部分中的选项遮罩图像。此方法还确保新图像具有与原始图像相同（如果有）可调整大小的插图。

+ (UIImage *)tintImage:(UIImage *)baseImage withColor:(UIColor *)color mask:(UIImage *)maskImage 
    UIGraphicsBeginImageContextWithOptions(baseImage.size, NO, baseImage.scale);

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGRect area = CGRectMake(0, 0, baseImage.size.width, baseImage.size.height);

    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -area.size.height);

    CGContextSaveGState(ctx);
    if (maskImage) 
        CGContextClipToMask(ctx, area, maskImage.CGImage);
     else 
        CGContextClipToMask(ctx, area, baseImage.CGImage);
    

    [color set];
    CGContextFillRect(ctx, area);
    CGContextRestoreGState(ctx);

    CGContextSetBlendMode(ctx, kCGBlendModeOverlay);

    CGContextDrawImage(ctx, area, baseImage.CGImage);

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    if (!UIEdgeInsetsEqualToEdgeInsets(baseImage.capInsets, UIEdgeInsetsZero)) 
        newImage = [newImage resizableImageWithCapInsets:baseImage.capInsets];
    

    return newImage;

这是非视网膜灰度细节披露图像：

这是视网膜版本：

这是非视网膜面具（在引号之间 - 它大部分是白色的）： ""

还有视网膜面具（引号之间： ""

【讨论】：

非常感谢@rmaddy。你是个传奇！我知道我没有在我的问题中特别要求它，但我计划覆盖箭头图像，所以我也可以使用它来创建一个类似的动态彩色按钮，带有一个勾号、一个带有十字和第三个没有任何箭头/勾号/十字（即只有带白色边框的彩色圆形图像）。不要假设您有类似的图像/面具，带有勾号，也带有十字，还有一个普通的？我只是要测试您的代码，如果一切正常，我会将其标记为答案。

虽然您的解决方案适用于为图像着色，但存在一些外观问题：1) 它丢失了图像上半部分的高光弧，因此颜色显得纯色。 2) tint 后，新颜色与左、右、下内边框相交的部分看起来不如原灰度图好看。

对于问题（1），所有颜色都不会丢失高光，只有一些。对于（2），它可能只是我的眼睛，但所有颜色看起来都不是很好。将此标记为答案，虽然它并不完美，但对我来说已经足够了，就目前而言。我认为一个稍微好一点的解决方案是，用所有颜色保持高亮是为圆圈绘制纯色，并为周围的边框、高亮和符号（即 V 形/箭头、勾号、十字等）使用叠加图像。 )

【参考方案2】：

考虑在标签中使用图标字体而不是图像。像glyphicons 这样的东西。然后，您可以将文本颜色设置为您想要的任何颜色。您也有很好的缩放选项。代价是您在某些情况下没有如此精确的控制，但它应该适合您的情况。