有時我們可能會有這么一種需求，就是當(dāng)用戶第一次進(jìn)入app會有比較重要的信息提示希望用戶仔細(xì)看一下，如果只是一個彈出框加上一個刪除或者確定按鈕，用戶往往不會去閱讀提示的內(nèi)容，這樣我們就可以在確認(rèn)按鈕加上倒計時，這樣就會讓用戶感覺提示的信息應(yīng)該比較重要，當(dāng)?shù)褂嫊r結(jié)束才能刪除或者確認(rèn)。說了這么多其實功能有點類似啟動頁廣告。先看一下需要的效果：
效果圖
大致的樣子就是這樣，當(dāng)然實現(xiàn)也不難，下面我們先看一下大致的控件，整體上來看就是自定義一個view，然后添加到window上就可以，這個view背景可以是button這樣我們就可以設(shè)置點擊事件，也可以是view，雖然我們的需求是不允許點擊，但是自己還是用的button，而view上就是label+橫線（可用label，view實現(xiàn)但注意一像素的設(shè)置）+高度不定的label+button+倒計時，整體上就是這樣。下面就一步一步去實現(xiàn)。
首先我們先創(chuàng)建一個view，當(dāng)然我們我已用xib提高開發(fā)效率，這里我用的代碼，先自定義一個初始化方法，然后再創(chuàng)建需要的控件：
- (instancetype)initWithTitle:(NSString *)title messages:(NSString *)message cancelButtonTitle:(NSString *)cancelButtonTitle {
self = [super init];
if (self) {
_titles = title;
_message = message;
_cancelTitle = cancelButtonTitle;
self.backgroundColor = [UIColor whiteColor];
self.alpha = 0;
self.layer.masksToBounds = YES;
self.layer.cornerRadius = 5.0;
}
return self;
}
在里面給view設(shè)置背景顏色，透明度等。
先來創(chuàng)建背景按鈕，并且設(shè)置好相應(yīng)的屬性：
//添加背景
-(void)addBack {
self.btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, ScreenWd, ScreenHt)];
self.btnBack.backgroundColor = [UIColor blackColor];
[self.btnBack addTarget:self action:@selector(gotoBackBtnClick:) forControlEvents:UIControlEventTouchUpInside];
self.btnBack.alpha = 0;
}
//點擊背景按鈕
- (void)gotoBackBtnClick:(UIButton *)btn{
NSLog(@"點擊背景");
}
設(shè)置標(biāo)題，這里使用懶加載的方式：
//添加頭部提示
- (UILabel *)labTitle {
if (!_labTitle) {
_labTitle = [[UILabel alloc] initWithFrame:CGRectMake(20, 10, ScreenWd-80, 20)];
_labTitle.textAlignment = NSTextAlignmentCenter;
_labTitle.text = _titles;
}
return _labTitle;
}
設(shè)置橫線，我這里使用的是一高度，如果想設(shè)置為1像素，我們可以這樣設(shè)置(參考：如何正確的繪制1像素的線):
//添加橫線
- (UIImageView *)imgLine {
if (!_imgLine) {
_imgLine = [[UIImageView alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(self.labTitle.frame)+10, ScreenWd-80, 1)];
_imgLine.backgroundColor = [UIColor colorWithWhite:0.925 alpha:1.000];
}
return _imgLine;
}
接下來的label需要計算行高：
//添加內(nèi)容
- (UILabel *)labMessage {
if (!_labMessage) {
_labMessage = [[UILabel alloc] init];
_labMessage.textColor = [UIColor colorWithWhite:0.259 alpha:1.000];
_labMessage.textAlignment = NSTextAlignmentCenter;
_labMessage.numberOfLines = 0;
_labMessage.text = _message;
_labMessage.font = FontSize;
NSDictionary *attrs = @{NSFontAttributeName : FontSize};
CGRect messageSize = [_message boundingRectWithSize:CGSizeMake(ScreenWd-80, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil];
_labMessage.frame = CGRectMake(20, CGRectGetMaxY(self.imgLine.frame)+10, ScreenWd-80, messageSize.size.height);
}
return _labMessage;
}
最后就是button的設(shè)置，要注意坐標(biāo)的計算：
//添加確定
- (UIButton *)cancelButton {
if (!_cancelButton) {
_cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
_cancelButton.backgroundColor = [UIColor colorWithWhite:0.976 alpha:1.000];
_cancelButton.layer.masksToBounds = YES;
_cancelButton.layer.cornerRadius = 3.0;
_cancelButton.layer.borderWidth = 1.0;
_cancelButton.layer.borderColor = [UIColor colorWithWhite:0.875 alpha:1.000].CGColor;
[_cancelButton setTitle:_cancelTitle forState:UIControlStateNormal];
[_cancelButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
_cancelButton.titleLabel.font = FontSize;
[_cancelButton addTarget:self action:@selector(gotoCancelButtonClick:) forControlEvents:UIControlEventTouchUpInside];
_cancelButton.frame = CGRectMake(20, CGRectGetMaxY(self.labMessage.frame)+10, ScreenWd-80, 30);
}
return _cancelButton;
}
然后根據(jù)之前寫的倒計時，直接加上就可以了：
- (UIButton *)cancelButton {
if (!_cancelButton) {
[CJXTimer initWithGCD:3 beginState:^(int seconds){
[_cancelButton setTitle:[NSString stringWithFormat:@"請認(rèn)真閱讀(%.2d)", seconds] forState:UIControlStateNormal];
_cancelButton.userInteractionEnabled = NO;
} endState:^{
//設(shè)置按鈕的樣式
[_cancelButton setTitle:_cancelTitle forState:UIControlStateNormal];
_cancelButton.userInteractionEnabled = YES;
}];
_cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
_cancelButton.backgroundColor = [UIColor colorWithWhite:0.976 alpha:1.000];
_cancelButton.layer.masksToBounds = YES;
_cancelButton.layer.cornerRadius = 3.0;
_cancelButton.layer.borderWidth = 1.0;
_cancelButton.layer.borderColor = [UIColor colorWithWhite:0.875 alpha:1.000].CGColor;
[_cancelButton setTitle:_cancelTitle forState:UIControlStateNormal];
[_cancelButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
_cancelButton.titleLabel.font = FontSize;
[_cancelButton addTarget:self action:@selector(gotoCancelButtonClick:) forControlEvents:UIControlEventTouchUpInside];
_cancelButton.frame = CGRectMake(20, CGRectGetMaxY(self.labMessage.frame)+10, ScreenWd-80, 30);
}
return _cancelButton;
}
然后給view設(shè)置位置，位置可以直接在引用的時候設(shè)置，但是感覺那樣不是很好，所以直接在這里設(shè)置bounds：
self.bounds = CGRectMake(0, 0, ScreenWd - 40, CGRectGetMaxY(self.cancelButton.frame)+10);
self.center = CGPointMake(ScreenWd/2, ScreenHt/2);
[BaseWindow addSubview:self];
然后再設(shè)置彈出和消失動畫效果以便以后引用：
- (void)show {
self.bounds = CGRectMake(0, 0, ScreenWd - 40, CGRectGetMaxY(self.cancelButton.frame)+10);
self.center = CGPointMake(ScreenWd/2, ScreenHt/2);
[BaseWindow addSubview:self.btnBack];
[BaseWindow addSubview:self];
[UIView animateWithDuration:0.3 animations:^{
self.btnBack.alpha = 0.4;
self.alpha = 1.0;
}];
}
/**
* 視圖隱藏
*/
- (void)dismiss{
[UIView animateWithDuration:0.3 animations:^{
self.btnBack.alpha = 0;
self.alpha = 0;
}completion:^(BOOL finished) {
[self.btnBack removeFromSuperview];
[self removeFromSuperview];
}];
}
最后我們測試一下：
- (IBAction)popView:(id)sender {
CJXAlertView *cjxView = [[CJXAlertView alloc]initWithTitle:@"提示" messages:@"注意啦！注意啦！這里的消息很重要。塞納河畔 左岸的咖啡 我手一杯 品嘗你的美 留下唇印的嘴 花店玫瑰 名字寫錯誰 告白氣球 風(fēng)吹到對街 微笑在天上飛 你說你有點難追 想讓我知難而退 禮物不需挑最貴 只要香榭的落葉 喔 營造浪漫的約會 不害怕搞砸一切 擁有你就擁有 全世界 親愛的 愛上你 從那天起 甜蜜的很輕易 親愛的 別任性 你的眼睛 在說我愿意"cancelButtonTitle:@"確定"];
[cjxView show];
}
正如預(yù)期的效果，如果感覺哪里不合適可以再調(diào)整一下。當(dāng)然如果需要其他樣式也可以這樣一步一步設(shè)置，我這里封裝的不算太好，因為需求的原因，沒有做其他按鈕的設(shè)置，但是這樣基本可以滿足需求了。
我是Demo
