[IOS] Use uiscrollview and uipagecontrol to display translucent help masks

In a recent project, a translucent mask is required to be added to an existing interface, prompting users for the function of each element on the interface.
In addition, the mask is not only one page, so you must slide the page between the left and right sides.

A brief summary of the Implementation ideas:
1. Since we want to display a translucent masked image, uiimageview must be indispensable.
2. To display multiple pages and Slide left and right, embed the uiimageview into uiscrollview and set the pagingenabled attribute of uiscrollview to yes to slide the whole page.
3. According to the current popular design scheme, when the image slides, the current page and the total number of pages are represented by vertices. This requires the uipagecontrol control.
4. These elements used to display help should not disturb the page definition in the XIB interface file, so they should be added to the page through dynamic loading.

The following code is used to explain the implementation method:

In the header file, add the uiscrollview and uipagecontrol member variables and implement uiscrollviewdelegate.

@interface ViewController : UIViewController<UIScrollViewDelegate>
{
    UIScrollView* helpScrView;
    UIPageControl* pageCtrl;
}

In the. M file, first implement the viewdidload function, which is called before the interface is displayed.

-(Void) viewdidload
{
[Super viewdidload];
Cgrect bounds = self. View. frame; // obtain the Interface Area

// Load the masked image. The Loading Method of only one image is shown here.
Uiimageview * imageview1 = [[uiimageview alloc] initwithframe: cgrectmake (bounds. origin. x, bounds. origin. y, bounds. size. width, bounds. size. height)] autorelease]; // create a uiimageview with the same location size as that on the main interface.
[Imageview1 setimage: [uiimage imagenamed: @ "help01.png"]; // upload image help01.png to imageview1.
Imageview1.alpha = 0.5f; // set the transparency to 50%.

// Continue loading the image
//....

// Create uiscrollview
Helpscrview = [[uiscrollview alloc] initwithframe: cgrectmake (bounds. origin. x, bounds. origin. y, bounds. size. width, bounds. size. height)]; // create a uiscrollview with the same location size as the main interface.
[Helpscrview setcontentsize: cgsizemake (bounds. size. width * 3, bounds. size. height)]; // set the size of all content. Here, three images are displayed, so the width is set to the UI width * 3, and the height is the same as that of the interface.
Helpscrview. pagingenabled = yes; // if it is set to yes, it will slide by PAGE
Helpscrview. Bounces = no; // cancel the elastic attributes of uiscrollview, which can be determined based on your preferences.
[Helpscrview setdelegate: Self]; // The delegate function of uiscrollview is defined in this class.
Helpscrview. showshorizontalscrollindicator = no; // The uiscrollview progress bar is canceled because uipagecontrol is used to indicate the page progress.
[Helpscrview addsubview: imageview1]; // Add uiimageview to uiscrollview.
[Self. View addsubview: helpscrview]; // Add uiscrollview to the main interface.

// Create uipagecontrol
Pagectrl = [[uipagecontrol alloc] initwithframe: cgrectmake (0, bounds. size. height-30, bounds. size. width, 30)]; // create uipagecontrol at the bottom of the screen.
Pagectrl. numberofpages = 3; // total number of image pages
Pagectrl. currentpage = 0; // current page
[Pagectrl addtarget: Self action: @ selector (pageturn :) forcontrolevents: uicontroleventvaluechanged]; // the user clicks the response function of uipagecontrol
[Self. View addsubview: pagectrl]; // Add uipagecontrol to the main interface.
}

The second is the scrollviewdidenddecelerating function of uiscrollviewdelegate, which is called after the user stops sliding the page.

-(Void) scrollviewdidenddecelerating :( uiscrollview *) scrollview
{
// Update the current page of uipagecontrol
Cgpoint offset = scrollview. contentoffset;
Cgrect bounds = scrollview. frame;
[Pagectrl setcurrentpage: Offset. X/bounds. Size. Width];
}

Then the response function pageturn when you click uipagecontrol

-(Void) pageturn :( uipagecontrol *) sender
{
// Enables uiscrollview to display sliding data.
Cgsize viewsize = helpscrview. Frame. size;
Cgrect rect = cgrectmake (sender. currentpage * viewsize. Width, 0, viewsize. Width, viewsize. Height );
[Helpscrview scrollrecttovisible: rect animated: Yes];
}

Finally, do not forget to release the uiscrollview and uipagecontrol objects in viewdidunload.

Before the end, I would like to mention that the function of disabling and re-displaying the Help page is not added here. This part is a more detailed implementation and is difficult to implement. I will not go into details here.