在實(shí)際工作過程中，通常會(huì)需要圖片來增加視覺沖擊，增強(qiáng)展現(xiàn)效果，但是因?yàn)槭謾C(jī)設(shè)備的屏幕尺寸的限制，需要盡量在有限的空間內(nèi)展示適量必須的內(nèi)容，但是又不失混亂。這里，我主要總結(jié)了一些工作當(dāng)中遇到的情況。

方案1：圖片結(jié)合文本框

為了給圖片添加文字描述，又要避免因?yàn)閳D片比較亮導(dǎo)致文字不明顯，所以這里給文本框一個(gè)暗色的背景色，并且將文字設(shè)置為白色來增加對比度。

image1.png

@property (strong, nonatomic) UIImageView *imageView;

接下來，繼續(xù)對界面進(jìn)行美化：

 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  = @"今天天氣不錯(cuò)哦";
    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來實(shí)現(xiàn)比較好的毛玻璃效果，更好地與背景圖片進(jìn)行融合。因?yàn)槊ＡЧ袃煞N模糊效果，我們這里采用的是第一個(gè)模糊效果UIBlurEffect.

image2.png

創(chuàng)建這個(gè)模糊效果的方法為：

UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];

在這里我們設(shè)置文本字體顏色為白色，展現(xiàn)一個(gè)更好地效果，而這個(gè)毛玻璃效果也是iOS中常用的一個(gè)效果。

 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  = @"今天天氣不錯(cuò)哦";
    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中添加文本內(nèi)容，根據(jù)文檔顯示，我們需要將文本添加到UIVisualEffectView的contentView當(dāng)中。

方案3：添加毛玻璃效果——2

因?yàn)樯厦娴哪欠N毛玻璃效果雖然已經(jīng)很好了，但是與背景圖片融合的并不是特別的好，所以我們現(xiàn)在要試驗(yàn)第2中毛玻璃模糊效果。

image3.png

因?yàn)檫@個(gè)模糊效果的特殊性，所以模糊效果的實(shí)現(xiàn)和創(chuàng)建方式也會(huì)有所不同。

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的基礎(chǔ)上實(shí)現(xiàn)，而UIVibrancyEffect模糊效果的實(shí)現(xiàn)需要借助UIBlurEffect來實(shí)現(xiàn)。

這種模糊效果的設(shè)置，文字顏色的設(shè)置是沒有作用的,下面是對文字的顯示。

  UILabel *title = [[UILabel alloc] init];
    title.text  = @"今天天氣不錯(cuò)哦";
    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

/**
 *  確定方向
 */
@property (nonatomic,assign) EColorDirection direction;
/**
 *  確定漸變的顏色
 */
@property (strong, nonatomic) UIColor *color;
/**
 *  百分比（漸變開始或者結(jié)束的地方）
 */
@property (nonatomic,assign) CGFloat percent;
@property (copy, nonatomic) NSString *titles;

而對于顏色漸變方向，我們則是通過枚舉的方式來進(jìn)行定義：

typedef enum : NSUInteger{
    up, // 從上到下
    down, // 從下到上
    right, // 從右往左
    left, // 從左到右
} EColorDirection;

然后在.m文件當(dāng)中，定義兩個(gè)屬性：

@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@property (strong, nonatomic) UILabel *label;

在該文件當(dāng)中，我們要重寫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;
}

因?yàn)槲覀冊?h文件當(dāng)中定義了一些可以接收外界參數(shù)的屬性，所以需要重寫setter和getter方法來接收外界的賦值。

@synthesize titles = _titles;
- (void)setTitles:(NSString *)titles
{
    _titles = titles;
//    self.titles = titles;
    self.label.text = titles;
}
- (NSString *)titles
{
    return _titles;
}

這樣我們的帶有顏色漸變效果的類graidentLayerImageView就實(shí)現(xiàn)了。

接下來我們需要引用這個(gè)graidentLayerImageView的.h文件，然后進(jìn)行調(diào)用。
因?yàn)樵?m文件當(dāng)中聲明了@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 = @"程序媛成長記錄漸變效果";

到這里，目前我所用到的幾種組合使用圖片和文字來對項(xiàng)目進(jìn)行說明的幾種方法已經(jīng)總結(jié)完了，如果你有其他的方法，不防提示一下我咯，謝謝！

項(xiàng)目github傳送門