iOS - 解决设置导航栏按钮图片变色的问题

爱被打了一巴掌 2022-11-12 09:55 262阅读 0赞

# 问题描述 #

今天在利用以下代码给导航栏按钮设置图片时，发现**原本是黑色的切图显示成了蓝色**。

UIButton *editButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [editButton setImage:[UIImage imageNamed:@"home_edit"] forState:UIControlStateNormal];
    [editButton addTarget:self action:@selector(didTapEditButton:) forControlEvents:UIControlEventTouchUpInside];
    
    UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithCustomView:editButton];
    self.navigationItem.rightBarButtonItem = rightItem;

得到的显示效果：  
![在这里插入图片描述][20210323185954922.png]

# 解决方案 #

在 iOS 7 的时候，UIImage 多了一个 `renderingMode` 的枚举类型属性，以设置 UIImage 对象的渲染方式，即是否根据当前的 Tint Color 进行渲染。UIImageRenderingMode 枚举的系统定义如下：

typedef NS_ENUM(NSInteger, UIImageRenderingMode) { 
        UIImageRenderingModeAutomatic,          // 根据图片的使用环境和所处的绘图上下文自动调整渲染模式。 
        UIImageRenderingModeAlwaysOriginal,     // 始终绘制图片的原始状态, 不适用视图Tint Color
        UIImageRenderingModeAlwaysTemplate,     // 始终根据Tint Color进行图片绘制, 忽略图片原本的色彩信息
    } API_AVAILABLE(ios(7.0));

`renderingMode` 属性的默认值为 UIImageRenderingModeAutomatic，我们可以利用系统提供的 `imageWithRenderingMode:` 方法进行该属性值的设置。

于是，我们修改上问题描述中的代码，让 UIImage 始终绘制图片的原始状态。

UIImage *image = [UIImage imageNamed:@"home_edit"];
    [editButton setImage:[image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];

得到如下显示效果：  
![在这里插入图片描述][20210323191205656.png]

# 参考资料 #

*  [https://blog.csdn.net/willyang519/article/details/37566593][https_blog.csdn.net_willyang519_article_details_37566593]
 *  [https://blog.csdn.net/ShengQiangLiu/article/details/40352129][https_blog.csdn.net_ShengQiangLiu_article_details_40352129]

[20210323185954922.png]: /images/20221022/439f43afa00744b6b53cf312d8ceb20e.png
[20210323191205656.png]: /images/20221022/42c956470257450eac225452ff93eea8.png
[https_blog.csdn.net_willyang519_article_details_37566593]: https://blog.csdn.net/willyang519/article/details/37566593
[https_blog.csdn.net_ShengQiangLiu_article_details_40352129]: https://blog.csdn.net/ShengQiangLiu/article/details/40352129