IOS: Show translucent Novice guidelines when using the app for the first time

In a lot of apps, we will find such a function: that is, when the app launches into the main interface, there will be a translucent guide map, it will prompt the user how to operate, quickly familiar with the use of the app rules, greatly facilitate the user's use, but also accelerate the promotion of the app, the advantages are self-evident.

I mainly introduce the idea:

First create a translucent mask covering the current entire screen, then draw a white cue box (rectangle or circle) with a Bezier curve, and then give a text hint with an arrow icon, or add a custom child view control on the mask. Of course, finally add a touch gesture to the entire mask, just click to remove masks, sub-views, gestures, restore the normal interface.

Note: Novice booting only needs to appear once, and can be used by the controller only once in preference settings.

The demo is as follows:

Appear guidelines click on the guide to disappear, follow the instructions

The code is as follows:

Color macro Definition

// Color RGB #define Xyqcolorrgb (R, G, b) [Uicolor colorwithred: (r)/255.0 Green: (g)/255.0 Blue: (b)/255.0 alpha:1.0]#define Xyqcolorrgba (R, G, B, a) [Uicolor colorwithred: (r)/255.0 Green: (g)/255.0 Blue: (b)/255.0 alpha:a]

Beginner's Guide

#pragmaMark-Novice Boot-(void) newuserguide{//here to create guidelines in this view on window (masks, gestures)CGRect frame =[UIScreen mainscreen].bounds; UIView* Bgview =[[UIView alloc]initwithframe:frame]; Bgview.backgroundcolor= Xyqcolorrgba ( -, -, -,0.8); UITapGestureRecognizer* Tap =[[UITapGestureRecognizer alloc]initwithtarget:self Action: @selector (Suretapclick:)];        [Bgview Addgesturerecognizer:tap]; //Add a child view controlUILabel *textlabel = [[UILabel alloc]initwithframe:cgrectmake (5, the, frame.size.width-Ten, -)]; Textlabel.backgroundcolor=[Uicolor Clearcolor]; Textlabel.text=@""Click Direct Chat, swipe left to see reports, delete""; Textlabel.textcolor=[Uicolor Whitecolor]; Textlabel.textalignment=Nstextalignmentcenter; Textlabel.font=fontsize_16;    [Bgview Addsubview:textlabel]; Uiimageview* ImageView = [[Uiimageview alloc]initwithframe:cgrectmake (frame.size.width/2- -, the, -, $)];; Imageview.image= [UIImage imagenamed:@"Couponboard_guid"];    [Bgview Addsubview:imageview];        [[UIApplication Sharedapplication].keywindow Addsubview:bgview]; //Create path focus (you need to add the first path here)Uibezierpath *path =[Uibezierpath Bezierpathwithrect:frame]; //Here you add a second path (this is a rectangle)[Path Appendpath:[[uibezierpath Bezierpathwithroundedrect:cgrectmake (5, -, frame.size.width-Ten, -) Cornerradius:8] [Bezierpathbyreversingpath]]; //RenderingCashapelayer *shapelayer =[Cashapelayer layer]; Shapelayer.path=path.    Cgpath;    [Bgview.layer Setmask:shapelayer]; }/** * Beginner guide OK*/- (void) Suretapclick: (UITapGestureRecognizer *) tap{UIView*guidevview =Tap.view; [Guidevview Removefromsuperview]; //Remove Masks[Guidevview.subviews makeobjectsperformselector: @selector (Removefromsuperview)];//Remove all child views[Guidevview Removegesturerecognizer:tap];//Remove Gestures}

Resources:

Http://www.jianshu.com/p/00d4fe5a3c1a

http://www.jianshu.com/p/b83aefdc9519

IOS: Show translucent Novice guidelines when using the app for the first time