📜 ⬆️ ⬇️

Creating a scrollbar of pictures a la iPhoto. Part 2

In the previous part, we have created, in general, a scary scroll bar, which, moreover, does not work correctly with content that exceeds its width and does not respond to the turns of the device.
Today we will try to correct these shortcomings.

Remove ImageScrubberToolbarDelegate from the ImageScrubberAppDelegate protocols and implement the method - (void) imageSelected: (int) anIndex and add the field ImageScrubberViewController * viewController.

Now we will create a new InterfaceBuilder document, select ImageScrubberViewController as file's owner, add UIView and ImageScrubberToolbar as a child element of UIView.

Now select the “Write class files” command, add the IBOutlet ImageScrubberToolbar * imageScrubberToolbar field to the ImageScrubberViewController class, add ImageScrubberToolbarDelegate to the ImageScrubberViewController protocols, add the implementation of the method - (void) imageSelected: (int) anefendrEntarlerEntheblerInbertconlerler method - (void) imageSelected: (int) anefeeberbarDelegate aneantheAntrulerberController;
')
Now, let's implement the - (void) viewDidLoad method of the ImageScrubberViewController class.

[super viewDidLoad];

NSString * resourcePath = [[NSBundle mainBundle] resourcePath];


NSArray * imagesArray = [NSArray arrayWithObjects: [UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Aurora.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Gentle Rapids.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Ladybug.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Pond Reeds.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Rock Garden.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Rocks.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Snow Leopard Prowl.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Snow Leopard.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Snowy Hills.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Stones.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Summit.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Tahoe.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Tranquil Surface.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Water.jpg" ]],
[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Zebra.jpg" ]],
nil];

[imageScrubberToolbar setImagesArray:imagesArray];


* This source code was highlighted with Source Code Highlighter .


Add the implementation - (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation - this method will only return YES (indicating that ANY orientation of the device is valid) and - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientHextron). class ImageScrubberToolbar.

Now, add the fields of the ImageScrubberToolbar class - int position - to store the number of the currently selected image and int left - to store the current left indent.

Let us turn to the implementation of touch processing methods.
Methods - (void) touchesMoved: (NSSet *) touches withEvent: (UIEvent *) event and - (void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event will remain unchanged.
Change - (void) touchesEnded: (NSSet *) touches withEvent: (UIEvent *) event - it will only check the number of touches and call the method - (void) imageSelected: (int) anIndex of class ImageScrubberToolbarDelegate.

Method - (void) rebuild will be called when changing the array of images or when the device rotates.
This method just calls - (void) calculateLeftAndUpdatePositions: (BOOL) rotated with argument YES.

Now let's implement the scrolling method.

float w = [imagesArray count]*SMALL_SIZE + 2.f*SIZE_DIF;

BOOL calculated = NO;
if (w > self.frame.size.width)
{
UIView * v = [self.subviews objectAtIndex:position];
if (v.frame.origin.x + SMALL_SIZE + SIZE_DIF > self.frame.size.width)
{
left = self.frame.size.width - (position + 1)*SMALL_SIZE - SIZE_DIF;
calculated = YES;
}
else if (v.frame.origin.x < SIZE_DIF)
{
left = -position*SMALL_SIZE + SIZE_DIF;
calculated = YES;
}
}
if (rotated && !calculated)
{
left = (self.frame.size.width - w + SMALL_SIZE)/2.f;
if (left < SIZE_DIF)
{
left = SIZE_DIF;
}
}
[selectionImageView setImage:[imagesArray objectAtIndex:position]];
[self updatePositions];


* This source code was highlighted with Source Code Highlighter .


The remaining changes are minor and easy to understand and implement, so download and disassemble the example - ImageScrubber2 .

The final result looks very, very nice, as for me.
image

Source: https://habr.com/ru/post/90702/


All Articles