在實際工作過程中，通常會需要圖片來增加視覺沖擊，增強展現效果，但是因為手機設備的屏幕尺寸的限制，需要盡量在有限的空間內展示適量必須的內容，但是又不失混亂。這里，我主要總結了一些工作當中遇到的情況。
方案1：圖片結合文本框
為了給圖片添加文字描述，又要避免因為圖片比較亮導致文字不明顯，所以這里給文本框一個暗色的背景色，并且將文字設置為白色來增加對比度。
image1.png
我們首先在.h文件中添加一個屬性，擁有顯示圖片的
imageView
@property (strong, nonatomic) UIImageView *imageView;
接下來，繼續對界面進行美化：
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"h4.jpg"]];
self.imageView.frame = CGRectMake(0, 50, [UIScreen mainScreen].bounds.size.width, 200);
[self.view addSubview:self.imageView];
UILabel *title = [[UILabel alloc] init];
title.text = @"今天天氣不錯哦";
title.textAlignment = NSTextAlignmentCenter;
title.backgroundColor = [UIColor colorWithRed:79/255 green:90/255 blue:108/255 alpha:1];
title.alpha = 0.5;
title.font = [UIFont systemFontOfSize:17];
title.frame = CGRectMake(0, 170, [UIScreen mainScreen].bounds.size.width, 30);
[self.imageView addSubview:title];
title.textColor = [UIColor whiteColor];
方案2：添加毛玻璃效果——1
接下來我們使用iOS8的UIVisualEffectView來實現比較好的毛玻璃效果，更好地與背景圖片進行融合。因為毛玻璃效果有兩種模糊效果，我們這里采用的是第一個模糊效果UIBlurEffect.
image2.png
創建這個模糊效果的方法為：
UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
在這里我們設置文本字體顏色為白色，展現一個更好地效果，而這個毛玻璃效果也是iOS中常用的一個效果。
self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"h4.jpg"]];
self.imageView.frame = CGRectMake(0, 50, [UIScreen mainScreen].bounds.size.width, 200);
[self.view addSubview:self.imageView];
UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
effectView.frame = CGRectMake(0, 160, [UIScreen mainScreen].bounds.size.width, 40);
[self.imageView addSubview:effectView];
UILabel *title = [[UILabel alloc] init];
title.text = @"今天天氣不錯哦";
title.textAlignment = NSTextAlignmentCenter;
title.textColor = [UIColor whiteColor];
title.font = [UIFont systemFontOfSize:17];
title.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 40);
[effectView.contentView addSubview:title];
在這里需要注意的是，我們想要在毛玻璃效果UIVisualEffectView中添加文本內容，根據文檔顯示，我們需要將文本添加到UIVisualEffectView的contentView當中。
方案3：添加毛玻璃效果——2
因為上面的那種毛玻璃效果雖然已經很好了，但是與背景圖片融合的并不是特別的好，所以我們現在要試驗第2中毛玻璃模糊效果。
image3.png
因為這個模糊效果的特殊性，所以模糊效果的實現和創建方式也會有所不同。
UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
UIVisualEffect *effect2 = [UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)effect];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
UIVisualEffectView *effect2View = [[UIVisualEffectView alloc] initWithEffect:effect2];
effectView.frame = CGRectMake(0, 160, [UIScreen mainScreen].bounds.size.width, 40);
effect2View.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 40);
[effectView addSubview:effect2View];
effectView.frame = CGRectMake(0, 160, [UIScreen mainScreen].bounds.size.width, 40);
[self.imageView addSubview:effectView];
對于這種效果，需要在模糊效果UIVibrancyEffect的基礎上實現，而UIVibrancyEffect模糊效果的實現需要借助UIBlurEffect來實現。
這種模糊效果的設置，文字顏色的設置是沒有作用的,下面是對文字的顯示。
UILabel *title = [[UILabel alloc] init];
title.text = @"今天天氣不錯哦";
title.textAlignment = NSTextAlignmentCenter;
title.textColor = [UIColor whiteColor];
// title.backgroundColor = [UIColor blackColor];
title.alpha = 0.5;
title.font = [UIFont systemFontOfSize:17];
title.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 30);
[effect2View.contentView addSubview:title];
方案4：CAGradientLayer的漸變效果
最終效果如下如所示：
image4.png
在這里我們對展示文字的圖片進行了一些封裝，首先創建一個繼承自
UIImageView的graidentLayerImageView類，然后在這個類當中定義一些可以外界能夠調用和改變的屬性，包括：
/**
* 確定方向
*/
@property (nonatomic,assign) EColorDirection direction;
/**
* 確定漸變的顏色
*/
@property (strong, nonatomic) UIColor *color;
/**
* 百分比（漸變開始或者結束的地方）
*/
@property (nonatomic,assign) CGFloat percent;
@property (copy, nonatomic) NSString *titles;
而對于顏色漸變方向，我們則是通過枚舉的方式來進行定義：
typedef enum : NSUInteger{
up, // 從上到下
down, // 從下到上
right, // 從右往左
left, // 從左到右
} EColorDirection;
然后在.m文件當中，定義兩個屬性：
@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@property (strong, nonatomic) UILabel *label;
在該文件當中，我們要重寫graidentLayerImageView的- (instancetype)initWithFrame:(CGRect)frame方法：
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 初始化
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = self.bounds;
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor blackColor].CGColor
];
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(0, 1);
self.gradientLayer.locations = @[@(0.6),
@(1.0)
];
[self.layer addSublayer:self.gradientLayer];
self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, self.bounds.size.height - 40, self.bounds.size.width, 40)];
self.label.text = self.titles;
self.label.textColor = [UIColor whiteColor];
self.label.font = [UIFont systemFontOfSize:16];
self.label.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.label];
}
return self;
}
因為我們在.h文件當中定義了一些可以接收外界參數的屬性，所以需要重寫setter和getter方法來接收外界的賦值。
@synthesize titles = _titles;
- (void)setTitles:(NSString *)titles
{
_titles = titles;
// self.titles = titles;
self.label.text = titles;
}
- (NSString *)titles
{
return _titles;
}
這樣我們的帶有顏色漸變效果的類graidentLayerImageView就實現了。
接下來我們需要引用這個graidentLayerImageView的.h文件，然后進行調用。
因為在.m文件當中聲明了@property (strong, nonatomic) graidentLayerImageView *imagesView;的緣故，所以我們接下來的代碼就是：
self.imagesView = [[graidentLayerImageView alloc] initWithFrame:CGRectMake(0, 50, [UIScreen mainScreen].bounds.size.width, 200)];
self.imagesView.image = [UIImage imageNamed:@"h4.jpg"];
[self.view addSubview:self.imagesView];
self.imagesView.titles = @"程序媛成長記錄漸變效果";
到這里，目前我所用到的幾種組合使用圖片和文字來對項目進行說明的幾種方法已經總結完了，如果你有其他的方法，不防提示一下我咯，謝謝！
