imageWithText一些总结——2015-12-01

在实际工作过程中，通常会需要图片来增加视觉冲击，增强展现效果，但是因为手机设备的屏幕尺寸的限制，需要尽量在有限的空间内展示适量必须的内容，但是又不失混乱。这里，我主要总结了一些工作当中遇到的情况。

方案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 = @"程序媛成长记录渐变效果";

到这里，目前我所用到的几种组合使用图片和文字来对项目进行说明的几种方法已经总结完了，如果你有其他的方法，不防提示一下我咯，谢谢！

项目github传送门