一个问号,点击给一个提示view的实现。

1,339 阅读4分钟

很简单的一个东西,不过为了应付各种情况,比如cell上有问号,点击弹出来,比如这样
这里写图片描述
又或者需要这样:
这里写图片描述



我自己简单画了一下,画笔拙劣,表示一下意思能看明白即可:

主要的样式就4种:主体样式不管,箭头所在位置分布是上下左右这四种




这时候需要做一个统一管理的样式,外部负责传入样式,view内部根据样式来定制。比如横竖,比如是否需要竖直列表的方式等。


思路:其实就是写一个回字型,内部是大框。大框外面是箭头,箭头所在的方向可以根据外面传进来的值设置上下左右和位置

上面的三角形就是箭头,大小都可以设置,位置可以向左右移动,根据外部传进来的坐标设置

上代码:

.h文件:


typedef enum: NSUInteger{
    AskViewShowTypeVertical = 0,// 主体的大框水平展示
    AskViewShowTypeHoritical = 1// 主体的大框竖直展示
}AskViewShowType;

typedef enum: NSUInteger{// 箭头所依附的方向
    ArrowDependDerectionTop = 0,
    ArrowDependDerectionLeft = 1,
    ArrowDependDerectionBottom = 2,
    ArrowDependDerectionRight = 3
}ArrowDependDerection;

@interface XDYAskRemindView : UIView



/**
 初始化方法介绍

 @param frame 可以使用masonry后传
 @param type view展示方向,可以为横,竖
 @param derection 箭头所在方向,上下左右
 @param pvalue 箭头在某一方向的位置,如在上下,pvalue为x值,若在左或右,pvalue为y值
 @param arr 内容数组,内部为字典结构
 @param title 竖直展示时显示的title
 @return
 */

-(instancetype)initWithFrame:(CGRect)frame axixWithType:(AskViewShowType)type arrowDepend:(ArrowDependDerection)derection point:(CGFloat)pvalue contentText:(NSArray <NSDictionary *> *)arr title:(NSString *)title;

**.m文件**
--------

@interface XDYAskRemindView()

@property (nonatomic, unsafe_unretained) AskViewShowType askType;
@property (nonatomic, unsafe_unretained) ArrowDependDerection arrowDerection;
@property (nonatomic, unsafe_unretained) CGFloat arrowLocate;
@property (nonatomic, strong) NSArray <NSDictionary *> *contentArray;
@property (nonatomic, strong) NSString *title;
@property (nonatomic, unsafe_unretained) CGPoint arrowP;

@end

@implementation XDYAskRemindView

-(void)drawRect:(CGRect)rect{
    // 进入此方法后先画三角形,其他的部分在createview里面画,结构就是一个回字型,里面的口内部是用来画页面,里面口与外面口之间的通道用来挪移三角形的位置
    if (_arrowDerection == ArrowDependDerectionTop) {
        self.arrowP = CGPointMake(self.arrowLocate, 0);
    }else if(_arrowDerection == ArrowDependDerectionLeft){
        self.arrowP = CGPointMake(0,self.arrowLocate);
    }else if(_arrowDerection == ArrowDependDerectionBottom){
        self.arrowP = CGPointMake(self.arrowLocate,self.mj_h - H(20));
    }else{
        self.arrowP = CGPointMake(self.mj_w - W(20),self.arrowLocate);
    }
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 0.5);

    CGPoint points[3];
    points[0] = self.arrowP;
    if (_arrowDerection == ArrowDependDerectionTop) {
        points[1] = CGPointMake(self.arrowP.x-W(10), self.arrowP.y+H(10));
        points[2] = CGPointMake(self.arrowP.x+W(10), self.arrowP.y+H(10));
    }else if(_arrowDerection == ArrowDependDerectionLeft){
        points[1] = CGPointMake(self.arrowP.x+W(10), self.arrowP.y-H(10));
        points[2] = CGPointMake( self.arrowP.x+W(10), self.arrowP.y+H(10));
    }else if(_arrowDerection == ArrowDependDerectionBottom){
        points[1] = CGPointMake(self.arrowP.x-W(10), self.arrowP.y-H(10));
        points[2] = CGPointMake(self.arrowP.x+W(10), self.arrowP.y-H(10));
    }else{
        points[1] = CGPointMake(self.arrowP.x-W(10), self.arrowP.y-H(10));
        points[2] = CGPointMake(self.arrowP.x-W(10), self.arrowP.y+H(10));
    }

    CGContextSetRGBFillColor(context, 0, 0, 0, 0.6);
    CGContextSetStrokeColorWithColor(context, COLOR(clearColor).CGColor);
    CGContextMoveToPoint(context, self.arrowP.x, self.arrowP.y);
    CGContextAddLines(context, points, 3);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
}

// 这个是初始化方法,在初始化方法中
-(instancetype)initWithFrame:(CGRect)frame axixWithType:(AskViewShowType)type arrowDepend:(ArrowDependDerection)derection point:(CGFloat)pvalue contentText:(NSArray <NSDictionary *> *)arr title:(NSString *)title{
    if (self = [super initWithFrame:frame]) {
        self.askType = type;
        self.arrowDerection = derection;
        self.arrowLocate = pvalue;
        self.title = title;
        if (arr.count > 0) {
            self.contentArray = [NSArray arrayWithArray:arr];
        }else{
            NSDictionary *dic = @{@"key":@"content",@"value":@""};
            self.contentArray = [NSArray arrayWithObject:dic];
        }
        [self initViews];
    }
    return self;
}

- (instancetype)init{
    return [self initWithFrame:CGRectZero axixWithType:AskViewShowTypeHoritical arrowDepend:ArrowDependDerectionTop point:0 contentText:nil title:@""];
}

- (instancetype)initWithFrame:(CGRect)frame{
    return  [self initWithFrame:CGRectZero axixWithType:AskViewShowTypeHoritical arrowDepend:ArrowDependDerectionTop point:0 contentText:nil title:@""];
}

-(void)initViews{
    self.backgroundColor = COLOR(clearColor);

    UIView *bgView = [[UIView alloc] init];
    bgView.backgroundColor = ColorRGBA(0, 0, 0, 0.6);
    bgView.layer.cornerRadius = 4;
    [self addSubview:bgView];

    [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.mas_left).offset(W(10));
        make.right.mas_equalTo(self.mas_right).offset(-W(10));
        make.top.mas_equalTo(self.mas_top).offset(W(10));
        make.bottom.mas_equalTo(self.mas_bottom).offset(-W(10));
    }];

    UILabel *title = [[UILabel alloc] init];
    title.yyFont(14).yyText(self.title).yyTextColor(COLOR(whiteColor));
    [bgView addSubview:title];

    [title mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.mas_left).offset(W(15));
        make.top.mas_equalTo(self.mas_top).offset(H(12));
    }];

    title.hidden = self.title.length == 0;

    UIView *line = [[UIView alloc] init];
    line.backgroundColor = ColorRGB(245, 245, 245);
    [bgView addSubview:line];

    [line mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(title);
        make.right.mas_equalTo(self.mas_right).offset(-W(15));
        make.top.mas_equalTo(title.mas_bottom).offset(H(5));
        make.height.mas_equalTo(1);
    }];

    line.hidden = self.title.length == 0;

    if (self.contentArray.count == 1) {
        NSDictionary *dic = self.contentArray[0];

        UILabel *content = [[UILabel alloc] init];
        content.yyFont(12).yyText(self.title).yyTextColor(COLOR(whiteColor));
        content.text = [NSString stringWithFormat:@"%@",dic[@"value"]];
        content.numberOfLines = 0;
        content.lineBreakMode = NSLineBreakByWordWrapping;
        [bgView addSubview:content];

        [content mas_updateConstraints:^(MASConstraintMaker *make) {
            if (self.title.length == 0 ) {
                make.top.mas_equalTo(bgView.mas_top).offset(H(5));
            }else{
                make.top.mas_equalTo(line.mas_bottom).offset(H(5));
            }
            make.left.mas_equalTo(title);
            make.width.mas_lessThanOrEqualTo(bgView);
        }];

    }else{
        for (NSInteger i = 0; i<self.contentArray.count; i++) {
            NSDictionary *dic = self.contentArray[i];

            UILabel *content = [[UILabel alloc] init];
            content.yyFont(12).yyText(self.title).yyTextColor(COLOR(whiteColor));
            content.text = [NSString stringWithFormat:@"%@:%@",dic[@"key"],dic[@"value"]];
            [bgView addSubview:content];

            [content mas_makeConstraints:^(MASConstraintMaker *make) {
                make.left.mas_equalTo(title);
                make.top.mas_equalTo(line.mas_bottom).offset(H(5) + H(20)*i);
            }];
        }
    }
}

代码就是这些。有些简单,我的项目里因为用到了竖直展示的时候排列多行文字所以看起来自定义的性能有点低,其实去掉这些判断的代码,只是横竖展示文字的话还是可以的。

以上 就是这个提示view的创建,在调用的时候,外面创建调用该初始化方法,将要展示的内容以字典方式封入数组中传入,在里面进行解析,显示即可。实现的就是上图所示的效果。
github