先讓我們看看,能實現(xiàn)的最終效果:
1450806559781.png
首先圆恤,我們需要稍微理清一下CAGradientLayer、CALayer,UIView和mask的大概關(guān)系。
在iOS中窗悯,能看得見摸的著的基本都是UIView,如按鈕偷拔、圖片等蒋院。UIView之所以能看得見是因為里面有一個圖層(即
CALayer對象
)。對UIView的位置大小的操作莲绰,實際上就是對圖層(即CALayer對象
)的操作欺旧。可以把圖層看成是沒有事件的UIView蛤签,而對應(yīng)UIView則是這個圖層的控制者切端。所以如果直接在圖層上添加(addSublayer
)圖層,就會直接覆蓋在上面顷啼。CAGradientLayer是繼承CALayer的踏枣,用于畫出漸變圖層。圖層A有一個屬性是mask钙蒙,mask實際上也是一個圖層茵瀑,該圖層設(shè)置為圖層B。mask層工作原理是按照透明度裁剪躬厌,只保留非透明部分马昨,所以圖層B并非覆蓋在圖層A上,而是根據(jù)圖層B不透明的部分去顯示圖層A扛施。若圖層B是個藍(lán)色圓環(huán)鸿捧,而圖層A是個紅色的長方形,那么最終顯示的就是紅色的圓環(huán)疙渣。(所以說設(shè)置蒙版mask并不會改變原來圖層的顏色
)
實例一:
1450792777714.png
1450804026188.png
漸變思路(適合文字漸變和圖片不透明部分漸變):UILabel本身的圖層其實就是文字匙奴,所以我們需要創(chuàng)建一個漸變層到UILabel的父視圖圖層(即superview的layer對象),然后使用UILabel本身的圖層作為漸變層的mask即可妄荔。
UILabel *label4 = ({
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(64, 300, 200, 15)];
label.text = @"你好啊";
[self.view addSubview:label];
//設(shè)置漸變層泼菌,實際上有這個漸變層就可以顯示了。
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = label.frame;
// 設(shè)置漸變層的顏色
gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
//水平漸變添加下面兩行即可
// gradientLayer.startPoint = CGPointMake(0, .5);
// gradientLayer.endPoint = CGPointMake(1, .5);
// 疑問:漸變層能不能加在label上
// 不能啦租,如果添加漸變層到label圖層上,則會遮蓋label的文字圖層哗伯;如果作為label圖層的mask,由于mask是完全不透明漸變層篷角,所以是正常顯示焊刹,這種情況如果消失了,說明mask的frame.origin沒有設(shè)置正確恳蹲。
// 添加漸變層到控制器的view圖層上
[self.view.layer addSublayer:gradientLayer];
gradientLayer.mask = label.layer;
//由于label.layer從self.view.layer中移動到漸變層gradientLayer中作為蒙版虐块,所以坐標(biāo)改變了需要重新調(diào)整。
label.layer.frame = gradientLayer.bounds;
label;
});
實例二:
1450804128723.png
1450804110590.png
漸變思路(適合文字背景漸變和圖片透明部分漸變):創(chuàng)建漸變圖層添加到圖標(biāo)或文字的父視圖圖層(既superview的layer)阱缓,然后把圖標(biāo)或文字的圖層addSublayer到漸變層即可非凌。
UIImageView *imageView5 = ({
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(64, 400, 200, 30)];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.image = [UIImage imageNamed:@"abc.png"];
startY +=35;
[self.view addSubview:imageView];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = imageView.frame;
gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
//添加漸變層到view圖層上
[self.view.layer addSublayer:gradientLayer];
//將原來的圖標(biāo)圖層或者文字圖層添加到漸變層上
[gradientLayer addSublayer:imageView.layer];
//由于imageView.layer從self.view.layer中移動到漸變層gradientLayer中,所以坐標(biāo)改變了需要重新調(diào)整荆针。
imageView.layer.frame = imageView.layer.bounds;
imageView;
});
實例三:
有時候可能還需要制作成這種圖片:
1450805634345.png
這時候只需要將UIImageView的寬高設(shè)置成相等的敞嗡,并且在實例二的基礎(chǔ)上對漸變層的cornerRadius和masksToBounds處理即可。相信大家對這兩個屬性都比較熟悉了航背。
在漸變層做圓角處理喉悴,處理成圓:
gradientLayer.cornerRadius = imageView.frame.size.width/2;
gradientLayer.masksToBounds = YES;
演示Demo下載:GraduatedColor