iOS tintColor解析
2015-10-16 11:34
411 查看
在
本章的实例程序能够在github上面进行访问,访问地址:github.com/ShinobiControls/iOS7-day-by-day
为了证明这一点,我们需要知道tintColor如何改变标准控件的外观,可以看看我们已经写好的ColorChanger应用程序。
在storyboard中包含了一系列的控件,包括
这个方法的主体就是生成一个随机的颜色, 最后一行设置tint color。
有一个UI control并不是响应tintColor的变化,它就是
当调用
为了展示这个效果,我们需要添加一个
当你点击
为了查看它是如何工作的,我们需要创建一个
到目前为止,我们都没有做什么新鲜的事情,只是搭建了一个简单的
我们做的就是根据当前view的tintColor进行设置一些控件的颜色。
就是这么的简单。在view controller中的代码并不需要修改,因为设置tintColor只是在
在这个demo中,我将会展示如何着色图片。
我们需要在storyboard中添加一个
首先我们加载一个图像,然后我们调用
一旦你设置图像的模式为模板图像,并且设置比例,确保图不失真。
UIView中一个相对来说比较小的属性,
tintColor属性是相当的强大。今天我们就来看看如何使用他,包含使用tint color进行着色标准控件、我们自定义控件甚至重新着色图像。
本章的实例程序能够在github上面进行访问,访问地址:github.com/ShinobiControls/iOS7-day-by-day
Tint color of existing iOS controller – 使用tint color为iOS中已经存在的控件进行着色
在iOS7中,UIView新增了一个属性
tintColor.这是一个
UIColor,被使用在
UIView中改变应用程序的外观的。默认tintColor的值为nil,这表示它将会运用父视图层次的颜色来进行着色。如果父视图中没有设置tintColor,那么默认系统就会使用蓝色。因此,可以通过设置root view controller的tintColor来改变系统整体的颜色。
为了证明这一点,我们需要知道tintColor如何改变标准控件的外观,可以看看我们已经写好的ColorChanger应用程序。
在storyboard中包含了一系列的控件,包括
UIButton,
UISlider和
UIStepper,在view controller中我们有一个改变颜色的按钮关联到下面的方法:
1 2 3 4 5 6 7 8 | - (IBAction)changeColorHandler:(id)sender { // Generate a random color CGFloat hue = (arc4random() % 256 / 256.0); CGFloat saturation = (arc4random() % 128 / 256.0) + 0.5; CGFloat brightness = (arc4random() % 128 / 256.0) + 0.5; UIColor *color = [UIColor colorWithHue:hue staturation:saturation brightness:brightnee alpha:1]; self.view.tintColor = color; } |
有一个UI control并不是响应tintColor的变化,它就是
UIProgressView.是因为它具有两个tint colors(一个是设置进度条本身,一个设置进度轨道色的),为了能够改变,我们需要添加一个方法:
1 2 3 | - (void)updateProgressViewTint { self.progressView.progressTintColor = self.view.tintColor; } |
changeColorHandler:方法之后:
Tint Dimming – 颜色变暗
除了能够设置色调颜色(tintColor),还有另外的一个属性在UIView中,它可以使tint color变暗, 因此整个视图层次变暗。这个属性是
tintAdjustmentMode,并且它可以在三个值里面选择一个设置(
UIViewTintAdjustmentModeNormal,
UIViewTintAdjustmentModeDimmed和
UIViewTintAdjustmentModeAutomatic)
为了展示这个效果,我们需要添加一个
UISwitch控件并且绑定它的
valueChanged:事件到下面的方法上面:
1 2 3 4 5 6 7 89 | - (IBAction)dimTintHandler:(id)sender { if (self.dimTintSwitch.isOn) { self.view.tintAdjustMentMode = UIViewTintAdjustmentModeDimmed; }else { self.view.tintAdjustmentMode = UIViewTintAdjustmentModeNormal; } [self updateProgressViewTint]; } |
UISwitch之后,整个页面变暗了,这样的很方便进行弹出框的效果,展示弹出框的时候,后面的页面变暗,以免分散用户的注意力。
Using tint color in custom views – 给自定义发视图进行着色
UIView中有一个新的方法,当
tintColor或者
tintAdjustmentMode属性发生变化的时候就会调用这个方法。
为了查看它是如何工作的,我们需要创建一个
UIView的子类,它包含一个整个的色块,一个标签的文本颜色和tint color相同,还有一个一直保持灰色的标签。
1 2 3 4 5 6 7 89 | @implementation SCSampleCustomControl { UIView *_tintColorBlock; UILabel *_greyLabel; UILabel *_tintColorLabel; } - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { self.backgroundColor = [UIColor clearColor]; [self prepareSubViews]; } } - (void)prepareSubviews { _tintColorBlock = [[UIView alloc] init]; _tintColorBlock.backgroundColor = self.tintColor; [self addSubview:_titnColorBlock]; _greyLabel = [[UILabel alloc] init]; _greyLabel.text = @"Grey label"; _greyLabel.textColor = [UIColor grayColor]; [_greyLabel sizeToFit]; [self addSubview:_greyLabel]; _tintColorLabel = [[UILabel alloc] init]; _tintColorLabel.text = @"Tint color label"; _tintColorLabel.textColor = self.tintColor; [_tintColorLabel sizeToFit]; [self addSubview:_tintColorLabel]; } - (void)layoutSubviews { _tintColorBlock.frame = CGRectMake(0, 0, CGRectGetWidth(self.bounds) / 3, CGRectGetHeight(self.bounds)); CGRect frame = _greyLabel.frame; frame.origin.x = CGRectGetWidth(self.bounds) / 3 + 10; frame.origin.y = 0; _greyLabel.frame = frame; frame = _tintColorLabel.frame; frame.origin.x = CGRectGetWidth(self.bounds) / 3 + 10; frame.origin.y = CGRectGetHeight(self.bounds) / 2; _tintColorLabel.frame = frame; } @end |
UIView的子类。有趣的内容现在就来了。我们复写一个新的方法
tintColorDidChange:
1 2 34 | - (void)tintColorDidChange { _tintColorLabel.textColor = self.tintColor; _tintColorBlock.backgroundColor = self.tintColor; } |
就是这么的简单。在view controller中的代码并不需要修改,因为设置tintColor只是在
UIView层次中进行赋值。
Tinting images with tintColor – 给图像着色
最后有关tintColor比较cool的能力就是,它可以为一个图像着色。图像着色的时候会把所有像素alpha为1的全部变换成tintColor的颜色,其他的颜色就会设置成透明。在这个demo中,我将会展示如何着色图片。
我们需要在storyboard中添加一个
UIImageView,并且设置关联为
tintedImageView,然后在
viewDidLoad中添加如下代码:
1 2 34 | // Load the image UIImage *shinobiHead = [UIImage imageNamed:@"shinobihead"]; // Set the rendering mode to respect tint color shinobiHead = [shinobiHead imageWithRenderingMode:UIImageRenderingModeAlwarysTemplate]; // And set to the image view self.tintedImageView.image = shinobiHead; self.tintedImageView.contentMode = UIViewContentModeScaleAspectFit; |
imageWithRenderingMode:方法来改变图像渲染模式为
UIImageRenderingModeAlwaysTemplate,其他两个选项是
UIImageRenderingModeAlwaysOriginal和
andUIImageRenderingModeAutomatic。默认是
andUIImageRenderingModeAutomatic,在这个情况下,根据上下文来改变图像,例如标签栏、工具栏等都是设置成模板对象。
一旦你设置图像的模式为模板图像,并且设置比例,确保图不失真。
Conclusion – 总结
表面上tintColor很简单的UIView,然而,它实际上代表了一些令人难以置信的强大的外观定制功能。如果你创建自己的UIView子类或自定义控件,然后,我鼓励你,实现tintColorDidChange——它会让你的工作更多的与标准UIKit组件串联。相关文章推荐
- ios 证书装给别人使用
- 解决IOS9的Info.plist问题
- iOS 9 适配中出现 问题
- IOS9适配会遇到的问题
- ios页面传值——代理方法
- 整理 iOS 9 适配中出现的坑
- iOS原生如何加载HTML中img标签的图片
- iOS7 NavigationController 右滑手势问题
- iOS系统navigationBar背景色,文字颜色处理
- IOS学习动画二之 Core Animation (3)
- IOS学习动画二之 Core Animation (2)
- iOS学习笔记——滚动视图(scrollView)
- IOS学习动画二之 Core Animation (1)
- iOS内存优化——Instruments详解
- [IOS开发]搜索用谓词NSPredicate
- iOS每日一记——————一些常用的小技巧(一)
- iOS后端取值之种种
- iOS8 Size Classes的理解与使用
- iOS和OS X快速并行对象缓存:TMCache
- 初学ios开发之iOS 证书、描述文件、AppID