美文网首页项目以及封装橙红科技有限公司iOS
iOS图片拉伸实例-提示框-聊天气泡

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

作者: 艳晓 | 来源:发表于2016-06-22 14:49 被阅读3315次

    情形分析

    要求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

    相关文章

      网友评论

      • Abner_XuanYuan:这个WarningSignsView是哪里的?
        Abner_XuanYuan:恩恩 好的 明白了
        艳晓:@轩辕辉 这个类使用了xib,我在文章最下面,添加了几句,你可以看看。O(∩_∩)O谢谢评论!
      • Eric_1024:挺好...

      本文标题:iOS图片拉伸实例-提示框-聊天气泡

      本文链接:https://www.haomeiwen.com/subject/cgtndttx.html