AwesomeIntroGuideView Documentation

repository·master·Indexed 19 days ago

https://github.com/bupterambition/awesomeintroguideview

An iOS library for creating onboarding experiences using coach marks with rectangular, star, or circular cutouts. It allows developers to highlight UI elements with captions and introductory images, supporting configuration via views or dictionaries and redirection via redirectURL.

Tokens
725
Snippets
3
Records
4
Agent score
15%

What's inside AwesomeIntroGuideView

  1. Display coach marks using views or dictionaries

    master

    You can display onboarding coach marks by passing an array of views or a configuration array of dictionaries to the AwesomeIntroGuideView instance.

    When using dictionaries to define the frame and appearance of each coach mark, use the following keys:

    • rect: An NSValue containing a CGRect defining the cutout area.
    • caption: A string describing the feature.
    • shape: A string defining the cutout style (e.g., "circle" or "square").
    // Setup coach marks using an array of dictionaries
    NSArray *coachMarks = @[
        @{
            @"rect": [NSValue valueWithCGRect:(CGRect){{0,0},{45,45}}],
            @"caption": @"Helpful navigation menu",
            @"shape": @"circle"
        },
        @{
            @"rect": [NSValue valueWithCGRect:(CGRect){{10.0f,56.0f},{300.0f,56.0f}}],
            @"caption": @"Document your wedding by taking photos",
            @"shape": @"square"
        }
    ];
    
    // Initialize and start the guide
    AwesomeIntroGuide *coachMarksView = [[AwesomeIntroGuide alloc] initWithFrame:self.view.bounds coachMarks:coachMarks];
    [self.view addSubview:coachMarksView];
    [coachMarksView start];
  2. Configure an introductory guide image with redirection

    master

    You can define an introductory display image (via URL or local resource) that includes a clickable link. If a user clicks the guiding image, the app will navigate to the specified redirectURL (which can be a web URL or an internal app route).

    ```objc
    // Load guide image with a redirect URL and specific point
    [self.coachMarksView loadGuideImageUrl:introGuideImgUrl 
                                withPoint:(CGPoint){70,100} 
                             redirectURL:@