Analysis of UIScrollView image browser function under iPhone

Source: Internet
Author: User
Tags scale image

IPhoneLowerUIScrollView image browserIs the content to be introduced in this article.ImageLibrary callImageIn this example, we plan to make a simpleImage browser.

The function is simple, fromImageLoad in LibraryImageAnd then put it under the view, and support zoom-in, zoom-out, and pan.

The first solution is as follows:

The preceding frameworks are the same:

Use toolbar as a button bar, which contains a button to trigger the slave button.

Press the action button to call the image library, and then send a message to the delegate image library. (the Protocol is attached to the main UIViewController, and the same is true for other delegate files ).

If the second parameter of the image UIImagePickerControllerDelegate imagePickerController: didFinishPickingMediaWithInfo: is obtained, a Dictionary containing the selected image is obtained.

OK. The show starts. The subsequent solution is as follows.

1. Set a UIImageView as the image carrier, fill the screen, set the Mode to Center, and display the image in the Center.

Then, use UIPinchGestureRecognizer to make a gesture. After the gesture is triggered, the response method is called back. Set the bounds and center of UIImageView in the method to ensure that they are displayed in the center. In the process, a type of extended UIImage is searched from the network, and the image can be scaled. Source code: (Note that the UIGraphicsXXXX function must be called in the main thread)

 
 
  1. //
  2. // UIImage_Extra.h
  3. // Camera
  4. //
  5. // Created by Li seleci on 11-4-22.
  6. // Copy 2011 _ MyCompanyName _. All rights reserved.
  7. //
  8. # Import <Foundation/Foundation. h>
  9. @ Interface UIImage (Extra)
  10. -(UIImage *) imageByScalingAndCroppingForSize: (CGSize) targetSize;
  11. @ End
  12. //
  13. // UIImage_Extra.m
  14. // Camera
  15. //
  16. // Created by Li seleci on 11-4-22.
  17. // Copy 2011 _ MyCompanyName _. All rights reserved.
  18. //
  19. # Import "UIImage_Extra.h"
  20. @ Implementation UIImage (Extra)
  21. -(UIImage *) imageByScalingAndCroppingForSize: (CGSize) targetSize
  22. {
  23. UIImage * sourceImage = self;
  24. UIImage * newImage = nil;
  25. CGSize imageSize = sourceImage. size;
  26. CGFloat width = imageSize. width;
  27. CGFloat height = imageSize. height;
  28. CGFloat targetWidth = targetSize. width;
  29. CGFloat targetHeight = targetSize. height;
  30. CGFloat scaleFactor = 0.0;
  31. CGFloat scaledWidth = targetWidth;
  32. CGFloat scaledHeight = targetHeight;
  33. CGPoint thumbnailPoint = CGPointMake (0.0, 0.0 );
  34. If (CGSizeEqualToSize (imageSize, targetSize) = NO)
  35. {
  36. CGFloat widthFactor = targetWidth/width;
  37. CGFloat heightFactor = targetHeight/height;
  38. If (widthFactor> heightFactor)
  39. ScaleFactor = widthFactor; // scale to fit height
  40. Else
  41. ScaleFactor = heightFactor; // scale to fit width
  42. ScaledWidth = width * scaleFactor;
  43. ScaledHeight = height * scaleFactor;
  44. // Center the image
  45. If (widthFactor> heightFactor)
  46. {
  47. ThumbnailPoint. y = (targetHeight-scaledHeight) * 0.5;
  48. }
  49. Else
  50. If (widthFactor
  51. {
  52. ThumbnailPoint. x = (targetWidth-scaledWidth) * 0.5;
  53. }
  54. }
  55. UIGraphicsBeginImageContext (targetSize); // this will crop
  56. CGRect thumbnailRect = CGRectZero;
  57. ThumbnailRect. origin = thumbnailPoint;
  58. ThumbnailRect. size. width = scaledWidth;
  59. ThumbnailRect. size. height = scaledHeight;
  60. [SourceImage drawInRect: thumbnailRect];
  61. NewImage = UIGraphicsGetImageFromCurrentImageContext ();
  62. If (newImage = nil)
  63. NSLog (@ "cocould not scale image ");
  64. // Pop the context to get back to the default
  65. UIGraphicsEndImageContext ();
  66. Return newImage;
  67. }
  68. @ End

A problem occurs when moving down the translation. Although touchesBegan and touchesMove can be reloaded to move UIImageView, iOS special effects are lost. When the image is moved to the edge of the screen, it is zoomed in and reduced, UIImageView does not necessarily fly there. You need to add judgment conditions. Therefore, this method is not advisable.

Now we have found a new api that can solve the stretching problem. There is a function in UIImage called stretchableImageWithLeftCapWidth: topCapHeight:. You can return a new UIImage, which can be stretched. For more information, see apple's Sample Code.

2. I checked on the Internet that I could use UIScrollView for translation processing, and embedded a UIImageView in it. The gesture was used to manage the enlarged and reduced images, so that I could eat hot pot while singing.

There are several things to consider in this solution. One is the contentSize of UIScrollView. The size of UIImageView should be taken into account. After the image is enlarged or reduced, the contentSize should be adjusted.

Another problem is that the center position of the scaling should be considered during scaling. For example, there is a personal face on the image, and the gesture is centered on the face and nose. After the enlargement, the center of the gesture may be biased, therefore, it is complicated to modify the UIImageView center during scaling.

3. To solve this problem, search for the document and find that there is zoom in UIScrollView. You can use the delegate viewForZoomingInScrollView method to specify a view in UIScrollView to zoom in, you can also set the maximum and minimum magnification. This nb, A UIScrollView class is all done with Pan scaling. Cool !!

But there are also issues to be aware. Because UIScrollView may have to actively call its subView attributes, do not modify the attributes of the subview During Scaling.

In addition, scaling and translation are all done by people, and you can change them in UIImageView.ImageYou must note thatUIScrollViewZoomScale, contentSize, and contentOffset of are all set to the initial values. Imagine a situation whereUIScrollViewAddImageZoom in, contentSize, contentOffset, and zoomScale are all changed. At this time, you have found a very smallImageIf you do not set the initial values of the three attributes, or set only one attribute, this will inevitably cause confusion.

The third of the three methods is the simplest.

Conclusion: I forgot to say in that book that Apple has been working on Mac for 20 years. If you need to use a lot of code to implement a very simple function, it must be a wrong method.

Today's exploration confirms this sentence. In addition, there are no principles in all iOS development books on the market. Therefore, the search engine, coupled with browsing various Website forums, has become a quick way to solve the problem.

Summary: Analysis onIPhoneImplementationScrollView image browserI hope this article will be helpful to you.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.