一個問號，點選給一個提示view的實現。

dota4app發表於2018-01-19
View

很簡單的一個東西，不過為了應付各種情況，比如cell上有問號，點選彈出來，比如這樣
這裡寫圖片描述
又或者需要這樣：
這裡寫圖片描述



我自己簡單畫了一下，畫筆拙劣，表示一下意思能看明白即可：

主要的樣式就4種：主體樣式不管，箭頭所在位置分佈是上下左右這四種


一個問號，點選給一個提示view的實現。



這時候需要做一個統一管理的樣式，外部負責傳入樣式，view內部根據樣式來定製。比如橫豎，比如是否需要豎直列表的方式等。


思路：其實就是寫一個回字型，內部是大框。大框外面是箭頭，箭頭所在的方向可以根據外面傳進來的值設定上下左右和位置

一個問號，點選給一個提示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



相關文章