ios實現相似魔獸小地圖功能 在

寫了一個相似魔獸小地圖功能的控件。

好比你有一個能夠放大縮小的scrollView。會在裏面進行一些放大縮小，點擊裏面的按鈕呀，等操做。

這個小地圖控件。就會和你的大scrollView同步。並有縮略圖和你當前視口的位置。就像遊戲裏那樣。

看圖。

 

 

SmallMapView.h

//
//  SmallMapView.h
//  littleMapView
//
//  Created by fuqiang on 13-7-2.
//  Copyright (c) 2013年 fuqiang. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface SmallMapView : UIView

//縮放比例
@property (nonatomic,assign,readonly)float scaling;

//標示窗口位置的浮動矩形
@property (nonatomic,retain,readonly)CALayer *rectangleLayer;

//內容
@property (nonatomic,retain,readonly)CALayer *contentLayer;

//被模擬的UIScrollView
@property (nonatomic,retain,readonly)UIScrollView *scrollView;

//init
- (id)initWithUIScrollView:(UIScrollView *)scrollView frame:(CGRect)frame;

//在UIScrollView的scrollViewDidScroll委託方法中調用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

//重繪View內容(須要注意。若是在調用reloadSmallMapView 方法的時候，須要更新的內容內有動畫。如按鈕變色等)
//請用[self performSelector:@selector(reloadSmallMapView:) withObject:nil afterDelay:0.2];
- (void)reloadSmallMapView;
@end

SmallMapView.m

//
//  SmallMapView.m
//  littleMapView
//
//  Created by fuqiang on 13-7-2.
//  Copyright (c) 2013年 fuqiang. All rights reserved.
//

#import "SmallMapView.h"

@implementation SmallMapView

- (id)initWithUIScrollView:(UIScrollView *)scrollView frame:(CGRect)frame
{
    self = [super init];
    if (self) {
        _scrollView = scrollView;
        
        //設置縮略圖View尺寸
        [self setFrame:frame];
        
        //設置縮略圖縮放比例
        [self setScaling:_scrollView];
        
        //設置羅略圖內容
        _contentLayer = [self drawContentView:_scrollView frame:frame];
        [self.layer addSublayer:_contentLayer];
        
        //初始化縮略移動視口
        _rectangleLayer = [[CALayer alloc] init];
        _rectangleLayer.opacity = 0.5;
        _rectangleLayer.shadowOffset = CGSizeMake(0, 3);
        _rectangleLayer.shadowRadius = 5.0;
        _rectangleLayer.shadowColor = [UIColor blackColor].CGColor;
        _rectangleLayer.shadowOpacity = 0.8;
        _rectangleLayer.backgroundColor = [UIColor whiteColor].CGColor;
        _rectangleLayer.frame = CGRectMake(0, 0, scrollView.frame.size.width * _scaling, scrollView.frame.size.height * _scaling);
        [self.layer addSublayer:_rectangleLayer];
    }
    return self;
}

- (void)dealloc
{
    [_rectangleLayer release];
    [super dealloc];
}

//------
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self setScaling:scrollView];
    float x = scrollView.contentOffset.x;
    float y = scrollView.contentOffset.y;
    float h = scrollView.frame.size.height;
    float w = scrollView.frame.size.width;
    [self.rectangleLayer setFrame:CGRectMake(x * _scaling, y * _scaling, h * self.scaling, w * self.scaling)];
}

//重繪View內容
- (void)reloadSmallMapView
{
    [_contentLayer removeFromSuperlayer];
    _contentLayer = [self drawContentView:_scrollView frame:self.frame];
    [self.layer insertSublayer:_contentLayer atIndex:0];
}

//設置縮略圖縮放比例
- (void)setScaling:(UIScrollView *)scrollView
{
    _scaling = self.frame.size.height / scrollView.contentSize.height;
}

//複製UIScrollView中內容
- (CALayer *)drawContentView:(UIScrollView *)scrollView frame:(CGRect)frame
{
    [self setScaling:scrollView];
    CALayer *layer = [[CALayer alloc] init];
    layer.frame = frame;
    for (UIView *view in scrollView.subviews)
    {
        UIGraphicsBeginImageContext(view.bounds.size);
        [view.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        CALayer *copyLayer = [CALayer layer];
        copyLayer.contents = (id)image.CGImage;
        float x = view.frame.origin.x;
        float y = view.frame.origin.y;
        float h = view.frame.size.height;
        float w = view.frame.size.width;
        copyLayer.frame = CGRectMake(x * _scaling,y *_scaling,w * _scaling,h * _scaling);
        [layer addSublayer:copyLayer];
    }
    return [layer autorelease];
}
@end

 

 

 

 

若是有須要的，能夠去這裏獲得源碼：https://github.com/TinyQ/LittleMapView.git