渐变透明这种效果的文字一般都在可滚动的Label上,这样的效果能使Label看起来更加美观,同时可以提醒用户,还有部分文字没有显示出来。
效果如下:
图层结构是这样的:在self.view
上放一个颜色半透明过渡的view
,view
上放一个scrollView
,scrollView
上放一个Label
。因为父视图是半透明的,所以Label
上的文字也会跟随者半透明。
难点在于这个半透明的view
,它可以通过以下方法创建:
CGRect frame = CGRectMake(20, 100, SCREEN_WIDTH-40, SCREEN_HEIGHT-100-100);
// 过渡透明层
UIView *gradientView = [[UIView alloc] initWithFrame:frame];
[self.view addSubview:gradientView];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
NSArray *colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithWhite:0 alpha:0] CGColor], //clearColor,透明度为0(显示为黑色,就像黑洞...)
(id)[[UIColor colorWithWhite:0 alpha:0.5] CGColor],//clearColor,透明度为0.5
(id)[[UIColor colorWithWhite:0 alpha:1] CGColor], //clearColor,透明度为1(显示为透明)
nil];
[gradientLayer setColors:colors];
[gradientLayer setStartPoint:CGPointMake(0.0f, 0.0f)];
[gradientLayer setEndPoint:CGPointMake(0.0f, 0.2f)];
[gradientLayer setFrame:gradientView.bounds];
[[gradientView layer] setMask:gradientLayer];
CAGradientLayer
是苹果专门处理梯度显示的一个类,给它设置一个颜色数组即可显示。这里设置了三种颜色,CAGradientLayer
会自动让这三种颜色平缓过渡。
[UIColor colorWithWhite:0 alpha:1]
是透明色,即clearColor
,而
[UIColor colorWithWhite:0 alpha:0]
是透明且alpha为0,由于子控件的alpha值与父视图相同,所以子视图会有一部分区域为透明色。
设置完所有属性之后,不要忘了调用[[gradientView layer] setMask:gradientLayer];
剩余的代码就简单了。
UIScrollView *labScroll = [[UIScrollView alloc] initWithFrame:gradientLayer.bounds];
labScroll.backgroundColor = [UIColor whiteColor];
labScroll.showsVerticalScrollIndicator = NO;
[gradientView addSubview:labScroll];
NSString *text = self.t;
CGRect rect = [text boundingRectWithSize:CGSizeMake(SCREEN_WIDTH-40, 0) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18]} context:nil];
CGFloat height = rect.size.height;
labScroll.contentSize = CGSizeMake(0, height);
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, labScroll.bounds.size.width, height)];
label.textColor = [UIColor darkGrayColor];
label.numberOfLines = 0;
label.textAlignment = NSTextAlignmentLeft;
label.text = text;
label.font = [UIFont systemFontOfSize:18.0];
[labScroll addSubview:label];
其中self.t
是一个成员属性,在get方法中赋值《赤壁赋》(手动滑稽)。
- (NSString *)t {
return @"\t壬戌之秋,七月既望,苏子与客泛舟游于赤壁之下。清风徐来,水波不兴。举酒属客,诵明月之诗,歌窈窕之章。少焉,月出于东山之上,徘徊于斗牛之间。白露横江,水光接天。纵一苇之所如,凌万顷之茫然。浩浩乎如冯虚御风,而不知其所止;飘飘乎如遗世独立,羽化而登仙。\n\t于是饮酒乐甚,扣舷而歌之。歌曰:“桂棹兮兰桨,击空明兮溯流光。渺渺兮予怀,望美人兮天一方。”客有吹洞箫者,倚歌而和之。其声呜呜然,如怨如慕,如泣如诉,余音袅袅,不绝如缕。舞幽壑之潜蛟,泣孤舟之嫠妇。\n\t苏子愀然,正襟危坐而问客曰:“何为其然也?”客曰:“‘月明星稀,乌鹊南飞’,此非曹孟德之诗乎?西望夏口,东望武昌,山川相缪,郁乎苍苍,此非孟德之困于周郎者乎?方其破荆州,下江陵,顺流而东也,舳舻千里,旌旗蔽空,酾酒临江,横槊赋诗,固一世之雄也,而今安在哉?况吾与子渔樵于江渚之上,侣鱼虾而友麋鹿,驾一叶之扁舟,举匏樽以相属。寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。”\n\t苏子曰:“客亦知夫水与月乎?逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也。而又何羡乎!且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭,是造物者之无尽藏也,而吾与子之所共适。”\n\t客喜而笑,洗盏更酌。肴核既尽,杯盘狼籍。相与枕藉乎舟中,不知东方之既白。";
}
这样,文字颜色渐变透明的效果就能实现啦。
网友评论