UIView渐变背景

项目需要，需要在图片上显示文字，但是文字的颜色很难控制，有时候与背景图的颜色很接近导致文字难以看清楚，可以通过将图片上显示文字的地方加一层黑色的半透明的背景色来解决这个问题。将这层背景色做成从黑色到透明的渐变。

image.png

比如这样一张图，我需要在低端加上介绍文字

image.png

可以看到底下变得更黑了，文字更加清楚。

实现方式主要使用了CAGradientLayer。先在ImageView的底端加一个UIView，并在这个UIView上插入一个从透明到黑色的CAGradientLayer，然后再UIView上插入一个Label就行了。

实现代码如下：

1. //

2. // ViewController.m

3. // Layer

4. //

5. // Created by xuzhaocheng on 14-6-17.

6. // Copyright (c) 2014年 Zhejiang University. All rights reserved.

7. //

8. import "ViewController.h"

9. @interface ViewController ()

10. @end

11. @implementation ViewController

12. {

13. CAGradientLayer *_gradientLayer;

14. UIView *_layerView;

15. UIImageView *_imageView;

16. }

17. • (void)viewDidLoad

18. {

19. [super viewDidLoad];

20. // Do any additional setup after loading the view, typically from a nib.

21. self.view.backgroundColor = [UIColor blueColor];

22. UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(10, 350, 150, 100)];

23. [button setTitle:@"显示/隐藏标题" forState:UIControlStateNormal];

24. [button addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];

25. [self.view addSubview:button];

26. _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test"]];

27. _imageView.frame = CGRectMake(0, 0, 320, 320);

28. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 25, 320, 100)];

29. label.text = @"我是标题标题标题！";

30. label.textColor = [UIColor whiteColor];

31. _layerView = [[UIView alloc] initWithFrame:CGRectMake(0, 320-100, 320, 100)];

32. _gradientLayer = [CAGradientLayer layer]; // 设置渐变效果

33. _gradientLayer.bounds = _layerView.bounds;

34. _gradientLayer.borderWidth = 0;

35. _gradientLayer.frame = _layerView.bounds;

36. _gradientLayer.colors = [NSArray arrayWithObjects:

37. (id)[[UIColor clearColor] CGColor],

38. (id)[[UIColor blackColor] CGColor], nil nil];

39. _gradientLayer.startPoint = CGPointMake(0.5, 0.5);

40. _gradientLayer.endPoint = CGPointMake(0.5, 1.0);

41. [_layerView.layer insertSublayer:_gradientLayer atIndex:0];

42. [_imageView addSubview:_layerView];

43. [_layerView addSubview:label];

44. [self.view addSubview:_imageView];

45. }

46. • (void)buttonPressed

47. {

48. static BOOL yesOrNo = YES;

49. if (yesOrNo) {

50. [_layerView removeFromSuperview];

51. } else {

52. [_imageView addSubview:_layerView];

53. }

54. yesOrNo = !yesOrNo;

55. }

56. @end