Как сделать мультитач зум для картинки

Предположим, что мы хотим сделать аналог программы, через которую можно смотреть фотографии на iPhone. Одной составляющей этой программы является мультитач зум. Далее вы узнаете как его сделать.

Я предлагаю написать класс, которому мы будем задавать картинку. Этот класс можно будет положить на любой UIView. Для того, чтобы сделать зум нам понадобится UIScrollView и протокол его делегата UIScrollViewDelegate.

UIScrollView может зумить любой UIView (либо унаследованное от него), который на нем лежит, но только один. Чтобы зум начал работать достаточно сделать 3 вещи:

• Выставить максимальный уровень зума
• Выставить минимальный уровень зума
• Определить в делегате специальный метод, который будет показывать какой UIView зумить

Унаследуем наш класс от UIScrollView и сделаем его делегатом для самого себя. Еще нам необходимо создать UIImageView, который будет показывать картинку. Приведем файл ZoomView.h

@interface ZoomView : UIScrollView {

    UIImageView* m_imageView;

    UIImage* m_image;

}

@property (nonatomic, readonly) UIImageView* imageView;

@property (nonatomic, copy) UIImage* image;

-(id) initWithImage:(UIImage*)image frame:(CGRect)frame;

@end

Как видим, у нас два свойства — одно для доступа к UIImageView (только для чтения), другое — картинка, ее мы можем менять в любое время.

Конструктор принимает два аргумента — картинку и frame. В конструкторе мы должны сохранить картинку, назначить делегат на себя и создать UIImageView:

-(id) initWithImage:(UIImage*)image frame:(CGRect)frame {

    self = [super initWithFrame:frame];

    self.delegate = self;

    m_image = [image copy];

    [self createImageViewWithImage:m_image];

    return self;

}

Тут мы встретили непонятный метод:

[self createImageViewWithImage:m_image];

Он всего-лишь создает UIImageView, его код:

// создает imageView

-(void) createImageViewWithImage:(UIImage*)image {

    m_imageView = [[UIImageView alloc] initWithImage:image];

    // назначить всю доступную область

    m_imageView.frame = self.bounds;

    // режим отображения картинки

    m_imageView.contentMode = UIViewContentModeScaleAspectFit;

    // максимальный и минимальный зум

    [self setMinimumZoomScale:1.0];

    [self setMaximumZoomScale:2.0];

    [self addSubview:m_imageView];

}

В этом методе мы сделали два обязательных пункта — назначили минимальный и максимальный уровень зума. Выполним третий пункт — метод делегата, который должен возвращать UIView, который нужно зумить:

// делегат UIScrollView, должен возвращать то что надо зумить

-(UIView*) viewForZoomingInScrollView:(UIScrollView *)scrollView {

    return m_imageView;

}

Приведу полный код файла ZoomView.m

#import "ZoomView.h"

@implementation ZoomView

@synthesize imageView;

// создает imageView

-(void) createImageViewWithImage:(UIImage*)image {

    m_imageView = [[UIImageView alloc] initWithImage:image];

    // назначить всю доступную область

    m_imageView.frame = self.bounds;

    // режим отображения картинки

    m_imageView.contentMode = UIViewContentModeScaleAspectFit;

    // максимальный и минимальный зум

    [self setMinimumZoomScale:1.0];

    [self setMaximumZoomScale:2.0];

    [self addSubview:m_imageView];

}

// меняет картинку в UIImageView

-(void) changeImageTo:(UIImage*)image {

    m_imageView.image = image;

}

// позволяет установить картинку из-вне

-(void) setImage:(UIImage *)image {

    [m_image release];

    m_image = nil;

    if ( image != nil ) {

        m_image = [image copy];

        // если imageView еще не создано - создать

        if ( m_imageView == nil ) {

            [self createImageViewWithImage:m_image];

        }

        [self changeImageTo:m_image];

    }

}

-(UIImage*) image {

    return [[m_image copy] autorelease];

}

// конструторы и деструктор

-(id) initWithFrame:(CGRect)frame {

    self = [super initWithFrame:frame];

    self.delegate = self;

    return self;

}

-(id) init {

    return [self initWithFrame:CGRectZero];

}

-(id) initWithCoder:(NSCoder *)aDecoder {

    self = [super initWithCoder:aDecoder];

    self.delegate = self;

    return self;

}

-(id) initWithImage:(UIImage*)image frame:(CGRect)frame {

    self = [super initWithFrame:frame];

    self.delegate = self;

    m_image = [image copy];

    [self createImageViewWithImage:m_image];

    return self;

}

-(void) dealloc {

    self.delegate = nil;

    [m_imageView release];

    [m_image release];

    [super dealloc];

}

// делегат UIScrollView, должен возвращать то что надо зумить

-(UIView*) viewForZoomingInScrollView:(UIScrollView *)scrollView {

    return m_imageView;

}

@end

Когда мы имеем полностью реализованный класс — мы можем его использовать. В вашем ViewController подключите файл ZoomView.h:

#import "ZoomView.h"

Достаточно создать экземпляр класса, передать картинку и размеры:

ZoomView* zoomView = [[ZoomView alloc] initWithImage:[UIImage imageNamed:@"ИМЯ_КАРТИНКИ_В_ПРОЕКТЕ.jpg"] frame:self.view.bounds ];

И добавить на вид:

[self.view addSubview:zoomView];

Добавьте любую картинку в проект и введите ее имя при создании класса ZoomView.

Чтобы зумить картинку в симуляторе — зажмите Alt (Option) и подвигайте мышью.

Исходный код можно скачать тут.

Похожие статьи