iOS图片拉伸实例-提示框-聊天气泡

情形分析

要求1：在自定义照相机中进行弹框提示
要求2：根据提示的文字不同，使用两种背景图片
要求3：文字字数不同，view也随之不同

由这几个要求可以看出，这个提示框类似于聊天气泡。

实例分析

1、创建一个方法，参数1：提示框文字；参数2：使用哪种图片（一共两种，所以用了BOOL；如果有多重，可以直接传进图片，具体情况——具体分析！）
2、创建一个UIImageView，上面放置一个Label，并且让UIImageView依据文字设置宽度。

1、声明
 @property (nonatomic, strong) UIImageView * bubbleView;
2、初始化创建
self.bubbleView = [[UIImageView alloc] init];
3、调用
[self showWarningSignsWithTitle:@"当前环境昏暗，请移到较亮区域！" WithCameraOK:NO];

具体方法

- (void)showWarningSignsWithTitle:(NSString *)title WithCameraOK:(BOOL)cameraOK{
    // 1、创建label
    UILabel * wordsLabel = [[UILabel alloc] init];
    // 2、根据文字获取宽度、高度
    NSDictionary *attrs = @{NSFontAttributeName:[UIFont systemFontOfSize:16.0f]};
    CGSize wordsSize = [title boundingRectWithSize:CGSizeMake(self.view.bounds.size.width-60 , 2000.0f) options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
   // 3、根据传入的BOOL值设置UIImageView的图片。
    if (cameraOK) {
        self.bubbleView.image = [[UIImage imageNamed:@"bg_camera_tips_ok.9.png"] stretchableImageWithLeftCapWidth:30 topCapHeight:5];
    }else {
        self.bubbleView.image = [[UIImage imageNamed:@"bg_camera_tips_fail.9.png"] stretchableImageWithLeftCapWidth:30 topCapHeight:5];
    }
    // 4、对UIImageView进行属性设置
    [self.bubbleView setOpaque:NO];
    [self.bubbleView setClipsToBounds:YES];
    [self.bubbleView setClearsContextBeforeDrawing:YES];
//    [self.bubbleView setBackgroundColor:[UIColor clearColor]];
    [self.bubbleView setContentMode:UIViewContentModeScaleToFill];
    //  这个是重点！根据图片进行设置
    self.bubbleView.frame = CGRectMake((self.WarningSignsView.bounds.size.width - (20 + wordsSize.width))/2.0, 10,  24 + wordsSize.width, 41);

    // 5、UILabel属性设置---frame是重点！！
    wordsLabel.frame = CGRectMake(12, 6, wordsSize.width, wordsSize.height);
    wordsLabel.lineBreakMode = NSLineBreakByTruncatingMiddle;
    [wordsLabel setFont:[UIFont systemFontOfSize:16.0f]];
    [wordsLabel setAdjustsFontSizeToFitWidth:NO];
    [wordsLabel setNumberOfLines:1]; // 此处要求只有一行，如果是多行，直接设置为0
    [wordsLabel setBackgroundColor:[UIColor clearColor]];
    [wordsLabel setText:title];
   // 6、在添加到父视图之前，先移除俯视图上的所有子视图，如果是聊天，就不需要这段！
    for(UILabel * label in [self.bubbleView subviews])
    {
        [label removeFromSuperview];
    }
    [self.bubbleView addSubview:wordsLabel];
    for(UIView * view in [self.WarningSignsView subviews])
    {
        [view removeFromSuperview];
    }

    [self.WarningSignsView addSubview:self.bubbleView];

}

效果图：

效果图1.png 效果图2.png

这个项目拍照界面布局使用了xib。其中上文提到的WarningSignsView，就是在xib中设置的。WarningSignsView在.h文件中可以看到，
#import <UIKit/UIKit.h>
@interface CameraUIViewController : UIViewController<AVCaptureVideoDataOutputSampleBufferDelegate>

@property (weak, nonatomic) IBOutlet UIView *WarningSignsView;

@end