MPCoachMarks 0.0.12

MPCoachMarks 0.0.12

测试已测试
语言语言 Obj-CObjective C
许可证 MIT
发布最后发布2017年11月

Marcelo Perretta 维护。




  • Marcelo Perretta

MPCoachMarks 是一个 iOS 类,用于通过在现有 UI 上显示带有形状剪切的用户引导标记。这种方法将您实际的 UI 作为用户启动过程的一部分。

基于伟大的项目 WSCoachMarksViewDDCoachMarks,我创建了这个仓库来维护引导标记项目,目标是在现有项目的基础上改进并结合每个分支和旧项目的问题添加一些额外的功能。

要求

MPCoachMarks 在任何 iOS 版本上都能工作,并使用 ARC 构建。它依赖于以下 Apple 框架

  • Foundation.framework
  • UIKit.framework
  • QuartzCore.framework

将 MPCoachMarks 添加到您的项目

源文件

或者,您可以直接将 MPCoachMarks.hMPCoachMarks.m 源文件添加到您的项目中。

  1. 下载最新的代码版本 latest code version 或将存储库作为 Git 子模块添加到您的 git-tracked 项目中。
  2. 在 Xcode 中打开您的项目,然后拖拽 MPCoachMarks.hMPCoachMarks.m 到您的项目(使用“Product Navigator view”)。确保在从项目外部提取了代码存档时选择选择 Copy items。
  3. 使用 #import "MPCoachMarks.h" 在您需要 MPCoachMarks 的地方进行包含。

使用

在您的 viewDidLoad 方法中创建一个 MPCoachMarks 实例,并传入一个引导标记定义数组(每个定义包含一个矩形和相应的标题)。

- (void)viewDidLoad {
    [super viewDidLoad];

    // ...

    // Setup coach marks
    CGRect coachmark1 = CGRectMake(([UIScreen mainScreen].bounds.size.width - 125) / 2, 64, 125, 125);
    CGRect coachmark2 = CGRectMake(([UIScreen mainScreen].bounds.size.width - 300) / 2, coachmark1.origin.y + coachmark1.size.height, 300, 80);
    CGRect coachmark3 = CGRectMake(2, 20, 45, 45);

    // Setup coach marks
    NSArray *coachMarks = @[
                            @{
                                @"rect": [NSValue valueWithCGRect:coachmark1],
                                @"caption": @"You can put marks over images",
                                @"shape": [NSNumber numberWithInteger:SHAPE_CIRCLE],
                                @"position":[NSNumber numberWithInteger:LABEL_POSITION_BOTTOM],
                                @"alignment":[NSNumber numberWithInteger:LABEL_ALIGNMENT_RIGHT],
                                @"showArrow":[NSNumber numberWithBool:YES]
                            },
                            @{
                                @"rect": [NSValue valueWithCGRect:coachmark2],
                                @"caption": @"Also, we can show buttons"
                                },
                            @{
                                @"rect": [NSValue valueWithCGRect:coachmark3],
                                @"caption": @"And works with navigations buttons too",
                                @"shape": [NSNumber numberWithInteger:SHAPE_SQUARE],
                                }
                            ];


    MPCoachMarks *coachMarksView = [[MPCoachMarks alloc] initWithFrame:self.view.bounds coachMarks:coachMarks];
    [self.view addSubview:coachMarksView];
    [coachMarksView start];
}

请记住将引导标记视图添加到最高控制器。所以如果您的导航控制器中,使用

MPCoachMarks *coachMarksView = [[MPCoachMarks alloc] initWithFrame:self.navigationController.view.bounds coachMarks:coachMarks];
[self.navigationController.view addSubview:coachMarksView];
[coachMarksView start];

您可以在显示 MPCoachMarks 之前使用 start 方法进行配置。例如

coachMarksView.animationDuration = 0.5f;
coachMarksView.enableContinueLabel = NO;
[coachMarksView start];

如何只向用户显示一次引导标记的示例(假设 coachMarksViewviewDidLoad 中实例化)

- (void)viewDidAppear:(BOOL)animated {
    // Show coach marks
    BOOL coachMarksShown = [[NSUserDefaults standardUserDefaults] boolForKey:@"MPCoachMarksShown"];
    if (coachMarksShown == NO) {
        // Don't show again
        [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"MPCoachMarksShown"];
        [[NSUserDefaults standardUserDefaults] synchronize];

        // Show coach marks
        [coachMarksView start];

        // Or show coach marks after a second delay
        // [coachMarksView performSelector:@selector(start) withObject:nil afterDelay:1.0f];
    }
}

配置

coachMarks (NSArray)

修改引导标记。

shape (MaskShape)

您可以使用 3 种不同的形状类型

  • 默认(或空)
  • SHAPE_CIRCLE
  • SHAPE_SQUARE

(带圆角的正方形是默认值)

position(标签对齐方式)

您可以使用5种不同的标题标签位置。

  • LABEPOSITION_BOTTOM(或空)
  • LABEPOSITION_LEFT
  • LABEPOSITION_TOP
  • LABEPOSITION_RIGHT
  • LABEPOSITION_RIGHT_BOTTOM

(LABEPOSITION_BOTTOM是默认值)

alignment(标签对齐方式)

您可以使用 3 种不同的形状类型

  • LABEL_ALIGNMENT_CENTER(或空)
  • LABEL_ALIGNMENT_LEFT
  • LABEL_ALIGNMENT_RIGHT

(LABEL_ALIGNMENT_CENTER是默认值)

showArrow(BOOL)

您可以选择显示或隐藏箭头图像 (默认设置为NO)

lblCaption(UILabel)

访问标题标签。

lblContinue(UILabel)

访问继续标签。

btnSkipCoach(UIButton)

访问跳过按钮。

maskColor(UIColor)

遮罩颜色(默认:0,0,0,alpha 0.9)。

animationDuration(CGFloat)

到下一个教练标记的过渡动画持续时间(默认:0.3)。

cutoutRadius(CGFloat)

裁剪矩形半径(默认:2px)。

maxLblWidth(CGFloat)

标题标签设置为最大宽度230px。行数根据标题内容自动计算。

lblSpacing(CGFloat)

定义标题标签在裁剪框上方或下方出现的距离(默认:35px)。

enableContinueLabel(BOOL)

默认弹出“点击继续”标签以引导用户至第一个教练标记(默认:YES)。

continueLabelText(NSString)

继续标签文本(默认:“点击继续”)。

continueLocation(继续位置)

设置“继续”标签的位置。

您可以使用三种不同的位置:

  • LOCATION_TOP
  • LOCATION_CENTER
  • LOCATION_BOTTOM

(LOCATION_BOTTOM是默认值)

skipButtonText(NSString)

跳过按钮文本(默认:“跳过”)。

MPCoachMarksViewDelegate

如果您想在特定教练标记进入视图时执行某个特定操作,您的视图控制器可以实现MPCoachMarksViewDelegate。

1. 使您的视图控制器符合MPCoachMarksViewDelegate协议

@interface WSMainViewController : UIViewController <MPCoachMarksViewDelegate>

2. 将委托分配给您的教练标记视图实例

coachMarksView.delegate = self;

3. 实现代理协议方法

注意:所有方法都是可选的。仅实现所需的方法。

  • - (void)coachMarksView:(MPCoachMarksView*)coachMarksView willNavigateToIndex:(NSUInteger)index
  • - (void)coachMarksView:(MPCoachMarksView*)coachMarksView didNavigateToIndex:(NSUInteger)index
  • - (void)coachMarksViewWillCleanup:(MPCoachMarksView*)coachMarksView
  • - (void)coachMarksViewDidCleanup:(MPCoachMarksView*)coachMarksView
  • - (void)coachMarksViewDidClicked:(MPCoachMarks *)coachMarksView atIndex:(NSInteger)index

许可协议

此代码在MIT 许可协议的条款和条件下分发。