- 現在來說一下這款很好用的氣泡提示，名字** JDFTooltips**，一個外國人寫的，在GitHub可下載：
https://github.com/JoeFryer/JDFTooltips。 -
首先來看一下大概就是這樣的效果了。
大概就是這樣的效果了 - 優點
1.滿足不同要求的初始化方法（四個）
2.可選不同的箭頭方向（上、下、左、右）
3.字體可自定義
4.字體顏色可自定義
5.背景顏色可自定義
6.背景寬度自定義
7.陰影，陰影的顏色可自定義
- 初始化方法
1）自定義尖角在哪個點的初始化方法
/**
* @author , 16-04-25 15:04:03
*
* <#Description#>
*
* @param targetPoint 提示框的尖角將在哪個點
* @param hostView 提示框加載到哪個視圖上
* @param tooltipText 提示語
* @param arrowDirection 尖角的方向
* @param width 提示框的寬度
*
* @return <#return value description#>
*/
- (instancetype)initWithTargetPoint:(CGPoint)targetPoint hostView:(UIView *)hostView tooltipText:(NSString *)tooltipText arrowDirection:(JDFTooltipViewArrowDirection)arrowDirection width:(CGFloat)width;
2）自定義尖角在哪個點，且有回調方法的初始化方法
/**
* @author , 16-04-25 15:04:33
*
* <#Description#>
*
* @param targetPoint 提示框的尖角將在哪個點
* @param hostView 提示框加載到哪個視圖上
* @param tooltipText 提示語
* @param arrowDirection 方向
* @param width 寬度
* @param showCompletionBlock 展示之后的回調
* @param hideCompletionBlock 隱藏之后的回調
*
* @return <#return value description#>
*/
- (instancetype)initWithTargetPoint:(CGPoint)targetPoint hostView:(UIView *)hostView tooltipText:(NSString *)tooltipText arrowDirection:(JDFTooltipViewArrowDirection)arrowDirection width:(CGFloat)width
showCompletionBlock:(JDFTooltipViewCompletionBlock)showCompletionBlock hideCompletionBlock:(JDFTooltipViewCompletionBlock)hideCompletionBlock;
3）尖角會在目標view寬（方向上下）或者高（方向左右）的二分之一處的初始化方法
/**
* @author , 16-04-25 15:04:53
*
* <#Description#>
*
* @param targetView 目標view,尖角會在目標view寬（方向上下）或者高（方向左右）的二分之一處
* @param hostView 加載在哪個視圖上
* @param tooltipText 提示語
* @param arrowDirection 方向
* @param width 寬度
*
* @return <#return value description#>
*/
- (instancetype)initWithTargetView:(UIView *)targetView hostView:(UIView *)hostView tooltipText:(NSString *)tooltipText arrowDirection:(JDFTooltipViewArrowDirection)arrowDirection width:(CGFloat)width;
4）尖角會在目標view寬（方向上下）或者高（方向左右）的二分之一處，且有回調方法的初始化方法
/**
* @author fushengjun, 16-04-25 15:04:56
*
* <#Description#>
*
* @param targetView 目標view,尖角會在目標view寬（方向上下）或者高（方向左右）的二分之一
* @param hostView 加載在哪個視圖上
* @param tooltipText 提示語
* @param arrowDirection 方向
* @param width 寬度
* @param showCompletionBlock 展示之后的回調方法
* @param hideCompletionBlock 隱藏之后的回調方法
*
* @return <#return value description#>
*/
- (instancetype)initWithTargetView:(UIView *)targetView hostView:(UIView *)hostView tooltipText:(NSString *)tooltipText
arrowDirection:(JDFTooltipViewArrowDirection)arrowDirection width:(CGFloat)width
showCompletionBlock:(JDFTooltipViewCompletionBlock)showCompletionBlock
hideCompletionBlock:(JDFTooltipViewCompletionBlock)hideCompletionBlock;
- 使用示例
//1.聲明
JDFTooltipView *tooltip1;
//2.初始化，but1是目標view,方向向下
tooltip1 = [[JDFTooltipView alloc] initWithTargetView:but1 hostView:self.view tooltipText:@"在投資期限內，每個月返還相同額度的利息，到期后返還最后一期利息和所有本金" arrowDirection:JDFTooltipViewArrowDirectionDown width:300.0f];
//提示語字體
tooltip1.font = [UIFont systemFontOfSize:12];
//提示語顏色
tooltip1.textColour = [UIColor redColor];
//點擊提示view本身是否使view消失
tooltip1.dismissOnTouch = NO;
//是否有陰影
tooltip1.shadowEnabled = YES;
//陰影顏色
tooltip1.shadowColour = [UIColor redColor];
//3.展示
[tooltip1 show];
//4.隱藏
[tooltip1 hideAnimated:YES]
示例演示
提示串（即有好幾個提示語，可以一個接著一個的讓他們顯示）
-
使用示例
1）包含頭文件
#import "JDFSequentialTooltipManager.h"
2）聲明一個管理提示串對象
@property(nonatomic, strong)JDFSequentialTooltipManager *tooltipManager;
3）初始化管理串對象
self.tooltipManager = [[JDFSequentialTooltipManager alloc] initWithHostView:self.view];
4）像管理提示串的對象里添加幾個提示框View
[self.tooltipManager addTooltipWithTargetView:label1 hostView:self.view
tooltipText:@"《殺人狂魔》是弗蘭克·卡方執導的恐怖片，阿美莉嘉·奧利沃、伊利亞·伍德等參加演出。該片主要講述了殺人狂魔弗蘭克的故事。"
arrowDirection:JDFTooltipViewArrowDirectionLeft width:200.0f];[self.tooltipManager addTooltipWithTargetView:label2 hostView:self.view tooltipText:@"程序員不是你們眼中的程序猿-后IT時代。程序猿是一種非常特殊的、可以從事程序開發、維護的動物。一般分為程序設計猿和程序編碼猿，但兩者的界限并不非常清楚，都可以進行開發、維護工作，特別是在中國，而且最重要的一點，二者都是一種非常悲劇的存在。" arrowDirection:JDFTooltipViewArrowDirectionRight width:200.0f]; [self.tooltipManager addTooltipWithTargetView:label3 hostView:self.view tooltipText:@"身為一名程序媛,總結混跡于技術圈多年的經驗可以概括成三要三不要。" arrowDirection:JDFTooltipViewArrowDirectionUp width:200.0f];
5)展示
[self.tooltipManager showNextTooltip];
6）演示示例，我這里每點擊一下空白處展示下一個
演示示例
- 本例代碼可點擊這里下載https://github.com/SPIREJ/CeShi_JDFTooltips
更新:下面是我同事封裝的，我們現在用這個。特點：簡單方便
- 直接貼代碼
.h文件
#import <UIKit/UIKit.h>
@interface XSPopoverView : UIView
+ (XSPopoverView *)showText:(NSString *)text
inView:(UIView *)superView
relateView:(UIView *)relateView;
@end
.m文件
#import "XSPopoverView.h"
@interface XSPopoverView ()
@property (nonatomic, strong) UILabel *textLB;
@property (nonatomic, strong) CAShapeLayer *triangleLayer;
@end
@implementation XSPopoverView
- (UILabel *)textLB
{
if (_textLB == nil) {
_textLB = [[UILabel alloc] initWithFrame:CGRectZero];
_textLB.backgroundColor = ColorWithHex(0x0, 0.7);
_textLB.textAlignment = NSTextAlignmentCenter;
_textLB.numberOfLines = 0;
_textLB.textColor = Color_whiteColor;
_textLB.font = XSFont(12);
}
return _textLB;
}
- (void)addTriangleRelateView:(UIView *)view
{
if (_triangleLayer == nil) {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(view.width / 2.0 - 8, view.height)];
[path addLineToPoint:CGPointMake(view.width / 2.0, view.height + 10)];
[path addLineToPoint:CGPointMake(view.width / 2.0 + 8, view.height)];
_triangleLayer = [CAShapeLayer layer];
_triangleLayer.path = path.CGPath;
_triangleLayer.fillColor = view.backgroundColor.CGColor;
[self.layer addSublayer:_triangleLayer];
}
}
- (void)adjustBoundsWithMaxWidth:(CGFloat)maxWidth
{
if ([XSHelper stringValid:_textLB.text]) {
[_textLB sizeToFit];
// 最大寬度，防止超出屏幕
if (_textLB.width >=maxWidth) {
_textLB.width = maxWidth;
}
[_textLB sizeToFit];
_textLB.width += 10;
_textLB.height += 10;
_textLB.layer.cornerRadius = 6;
_textLB.layer.masksToBounds = YES;
self.width = _textLB.width;
self.height = _textLB.height;
//
[self addSubview:self.textLB];
[self addTriangleRelateView:self.textLB];
}
}
+ (XSPopoverView *)showText:(NSString *)text inView:(UIView *)superView relateView:(UIView *)relateView
{
XSPopoverView *popoverView = [[XSPopoverView alloc] init];
popoverView.textLB.text = text;
[superView addSubview:popoverView];
// 距離左右屏幕的距離，取最小的
CGFloat minWiddh = MIN(relateView.x + relateView.width / 2.0, superView.width - (relateView.x + relateView.width / 2.0));
[popoverView adjustBoundsWithMaxWidth:(minWiddh - 10) * 2];
popoverView.centerX = relateView.x + relateView.width / 2.0;
popoverView.centerY = relateView.y - popoverView.height / 2.0;
return popoverView;
}
@end
使用方法，即
.h文件中的外接方法。
三個參數分別是：
text:要顯示的內容
superView：彈窗要加載到哪個父視圖上
relateView：彈窗顯示的位置在哪個視圖處-
效果示例：
彈窗示例
