alpha、clearColor、opaque、hidden你能分清吗

1. alpha

1.1 alpha基本介绍

alpha属性值为浮点类型,范围是0.01.00.0代表完全透明,1.0代表完全不透明。

下图显示了大矩形alpha值分别为1.0、0.75、0.5、0.1、0.0时的情况:

AlphaAll.png

下面,我们通过一段代码看下alpha值对视图的影响:

    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2)];
    [self.view addSubview:aView];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    textView.text = @"pro648";
    [aView addSubview:textView];
    
    textView.alpha = 0.25;
    aView.backgroundColor = [UIColor whiteColor];
    textView.backgroundColor = [UIColor redColor];

运行结果:

AlphaInitial.png

在上面的代码中,我们首先添加一个UIView对象aView到视图控制器的上半部分,然后在aView中添加UITextView对象textView。设置aView背景颜色为白色,textView背景颜色为红色,并设置textViewalpha值为0.25。在运行结果中我们可以看到alpha不仅影响视图的backgroundColor,也会影响视图上的文字。

1.2 改变父视图alpha的值,子视图alpha值不会改变。

    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2)];
    [self.view addSubview:aView];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    textView.text = @"pro648";
    [aView addSubview:textView];
    
    aView.alpha = 0.5;
    
    NSLog(@"aView alpha is:%f",aView.alpha);
    NSLog(@"textView alpha is:%f",textView.alpha);

运行后输出如下:

aView alpha is:0.500000
textView alpha is:1.000000

可以看到改变aViewalpha值,子视图textViewalpha值不会改变。

1.3 改变父视图alpha的值,子视图alpha值虽然不会改变,但视图绘制效果是由该视图及其父视图alpha值的乘积决定。

更新代码如下:

    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2)];
    [self.view addSubview:aView];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    textView.text = @"pro648";
    [aView addSubview:textView];
    
    aView.alpha = 0.5;
    textView.alpha = 0.5;
    aView.backgroundColor = [UIColor whiteColor];
    textView.backgroundColor = [UIColor redColor];
    
    NSLog(@"aView alpha is:%f",aView.alpha);
    NSLog(@"textView alpha is:%f",textView.alpha);

上面代码里设置aViewtextViewalpha值均为0.5,所以视图最终显示的alpha值为:0.5*0.5=0.25。

运行结果如下:

AlphaMultiply.png

仔细观察,你会发现该视图显示效果与1 中的视图显示效果一致,均为0.25。但是视图本身的alpha值并没有被改变,控制台输出结果如下所示:

aView alpha is:0.500000
textView alpha is:0.500000

1.4 如果只想设定视图背景颜色的alpha值而不影响其他视图的显示效果,可以使用colorWithRed: green: blue: alpha:方法定义一个有着特定alpha值的颜色来作为视图的背景颜色。

    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2)];
    [self.view addSubview:aView];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    textView.text = @"pro648";
    [aView addSubview:textView];
    
    aView.backgroundColor = [UIColor colorWithRed:255/255.0f green:255/255.0f blue:255/255.0f alpha:0.3];
    textView.backgroundColor = [UIColor redColor];
    
    NSLog(@"aView alpha is:%f",aView.alpha);
    NSLog(@"textView alpha is:%f",textView.alpha);

运行后显示如下:

AlphaRGBA.png

可以看到,子视图textView的显示完全不受影响。控制台输出结果为:

aView alpha is:1.000000
textView alpha is:1.000000

1.5 当alpha为零时,视图将完全不可见,且不能响应触摸事件。

更新代码如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2)];
    [self.view addSubview:aView];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    textView.text = @"pro648";
    [aView addSubview:textView];
    
    textView.alpha = 0;
    aView.backgroundColor = [UIColor redColor];
    textView.backgroundColor = [UIColor greenColor];
    [textView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]];
    
    NSLog(@"aView alpha is:%f",aView.alpha);
    NSLog(@"textView alpha is:%f",textView.alpha);
}

- (void)handleTapGesture:(UITapGestureRecognizer *)tapGesture {
    NSLog(@"Single Tap");
}

textView视图alpha设定为零,并添加点击手势。运行后如下:

AlphaZero.png

可以看到textView视图和文本都没有显示,且点击CGRectMake(50, 50, 100, 100)区域,控制台没有任何输出。

事实上,iOS上不可见的视图均不可响应事件。

另外,改变alpha值的过程也可以使用动画。

2. clearColor

backgroundColor是出现在UIView背面颜色的特殊色调,clearColor的grayscale和alpha值都是0.0,即没有背景颜色,像玻璃一样可以透过当前视图显示下面视图。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2)];
    [self.view addSubview:aView];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    textView.text = @"pro648";
    [aView addSubview:textView];
    
    aView.backgroundColor = [UIColor redColor];
    textView.backgroundColor = [UIColor clearColor];
//    textView.backgroundColor = nil;   // 即不设置背景颜色。
    [textView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]];
    
    NSLog(@"aView alpha is:%f",aView.alpha);
    NSLog(@"textView alpha is:%f",textView.alpha);
}

- (void)handleTapGesture:(UITapGestureRecognizer *)tapGesture {
    NSLog(@"Single Tap");
}

运行后如下图:

AlphaclearColor.png

设置为clearColortextView没有颜色,直接透过显示后面aView视图的颜色,所以clearColor就像一层玻璃。另外clearColor视图上的文字是可见的。点击textView上文本区域,控制台会输出Single Tap,说明视图会响应触摸事件。

backgroundColor默认值是nil,这时视图也是透明的背景颜色,但其与clearColor不同。textView背景色为nil时,使用NSLog(@"%@",textView.backgroundColor)输出,控制台输出为(null);textView背景色为clearColor时,使用NSLog(@"%@",textView.backgroundColor)输出,控制台输出为UIExtendedGrayColorSpace 0 0

3. opaque

opaque不透明的,该属性是BOOL类型,用于确定视图是否不透明。

该属性为绘图系统提供了如何处理视图的提示。如果设置为YES,绘图系统将视图视为完全不透明,这样可以使绘图系统优化一些绘图操作,并提高性能;如果设置为NO,则绘图系统会把该视图与其他视图合成,形成最终视图。默认值为YES

一个不透明的视图其内容将会是完全不透明,也就是内容的alpha值应为1.0。如果视图为部分透明或完全透明,需要把opaque设为NO;如果设置为YES将产生不可预期的结果。

只需要为UIView的子类在使用drawRect:方法时设定opaque属性,opaque对系统提供的类(如:UIButton、UILabel、UITableViewCell等)没有效果。

4. hidden

hidden属性是BOOL类型,用于确定视图是否隐藏。设置为YES时,隐藏视图;设置为NO时,显示视图。

被设置为隐藏的视图,会从窗口中消失,不能接收输入事件。但它仍然存在于视图层级中,并像往常一样参与自动布局调整。如果被隐藏的视图有子视图,其子视图也会一起隐藏。

如果被隐藏的视图处于第一响应,则下一有效视图自动成为新的第一响应。

此属性的值仅反映接收者的状态,并不考虑视图层级中父视图的状态。因此,如果视图hidden属性是NO,但父视图被隐藏,则该视图仍然被隐藏。

alpha值为0hidden属性为YES都可以隐藏视图,其不同之处在于:使用alpha隐藏视图其过程可以是动画的,而使用hidden属性则不可以。

参考资料:

  1. UIView alpha vs. UIColor alpha
  2. What is the impact of view.alpha = 0 vs view.hidden = YES?
  3. opaque
  4. alpha
  5. hidden

欢迎更多指正:https://github.com/pro648/tips/wiki

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 1、设置UILabel行间距 NSMutableAttributedString* attrString = [[...
    十年一品温如言1008阅读 1,619评论 0 3
  • 一、初始化方法 1、- initWithFrame: UIView *view = [[UIView alloc]...
    默默_David阅读 2,476评论 1 3
  • Core Animation基础 Core Animation 利用了硬件加速和架构上的优化来实现快速渲染和实时动...
    独木舟的木阅读 1,523评论 0 3
  • 周围的人都很优秀,看了禅道这本书,被别人说成成功学这种毫无逻辑作用的书,小生气,自己觉得挺有用的书被别人说成是……...
    6186834d3810阅读 345评论 0 1
  • 今天他发了工资。他为自己斟上从超市买来的红酒,满满一杯,然后小心翼翼地嘬了一口,怕溢出来。他打开手机随手播放了一首...
    唐黄阅读 330评论 0 2