漸變透明這種效果的文字一般都在可滾動的Label上,這樣的效果能使Label看起來更加美觀,同時可以提醒用戶,還有部分文字沒有顯示出來。
效果如下:
文字顏色漸變透明.png
圖層結構是這樣的:在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客喜而笑,洗盞更酌。肴核既盡,杯盤狼籍。相與枕藉乎舟中,不知東方之既白。";
}
這樣,文字顏色漸變透明的效果就能實現啦。