iOS開發-簡單製作九宮格拼圖

今天閒來無事研究了下拼圖，不多說，附代碼

原圖和效果圖如下：

 

#define SPACE 2 //小圖邊距
#define NUMBER 3 //拼圖橫豎個數

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self creatView];
    [self segmentImage];
}

//創建背景視圖
- (void)creatView
{
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(9, 42, 302, 302)];
    view.backgroundColor = [UIColor magentaColor];
    view.tag = 100;
    [self.view addSubview:view];
}

//對圖片進行分割
- (void)segmentImage
{
    //<1>獲取分割的圖片
    UIImage *image = [UIImage imageNamed:@"king2"];
    
    //<2>獲取分割以後的每一小塊圖片的寬和高
    float newImageW = image.size.width / NUMBER;
    float newImageH = image.size.height / NUMBER;
    NSLog(@"%f",newImageW);
    //獲取背景視圖
    UIView *backView = [self.view viewWithTag:100];
    
    //<3>設置number個子視圖
    for (int i = 0; i < NUMBER; i++)
    {
        for (int j = 0; j < NUMBER; j++)
        {
            UIImageView *littleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(SPACE + j * newImageW, SPACE + i * newImageH, newImageW - SPACE, newImageH - SPACE)];
            
            //<4>分割UIImage對象
            //CGImageCreateWithImageInRect將UIImge圖片按照規定的大小進行分割
            //image.CGImage 將UIImage轉化成CGImage
            CGImageRef imageRef = CGImageCreateWithImageInRect(image.CGImage, littleImageView.frame);
            
            //<5>將CGImage轉化成UIImage
            UIImage *imageNew = [UIImage imageWithCGImage:imageRef];
            
            //<6>將新獲得的小圖片 添加在16個UIImageView上
            littleImageView.image = imageNew;
            
            //<7>隱藏某個子視圖
            if (i * j == 4)
            {
                littleImageView.tag = 998;
                littleImageView.hidden = YES;
            }
            
            //<8>爲所有的imageView視圖添加手勢
            littleImageView.userInteractionEnabled = YES;
            [self addGestureRecgonizerOnImageView:littleImageView];
            
            //將16個imageView添加到backView上
            [backView addSubview:littleImageView];
        }
    }
}

//爲每一個UIImageView視圖添加手勢----自定義方法
-(void)addGestureRecgonizerOnImageView:(UIImageView *)imageView
{
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
    tap.numberOfTouchesRequired = 1;
    tap.numberOfTapsRequired = 1;
    [imageView addGestureRecognizer:tap];
}

- (void)tapAction:(UITapGestureRecognizer *)tap
{
    UIImageView *imageView = (UIImageView *)tap.view;
    
    //獲取空白區域的視圖
    UIImageView *blockView = (UIImageView *)[self.view viewWithTag:998];
    
    BOOL isEquelX75 = fabs(imageView.frame.origin.x - blockView.frame.origin.x) == 100;
    BOOL isEquelY75 = fabs(imageView.frame.origin.y - blockView.frame.origin.y) == 100;
    BOOL isEquelX0 = fabs(imageView.frame.origin.x - blockView.frame.origin.x) == 0;
    BOOL isEquelY0 = fabs(imageView.frame.origin.y - blockView.frame.origin.y) == 0;
    
    if((isEquelX75 && isEquelY0 ) || (isEquelX0 && isEquelY75))
    {
        //交換兩個子視圖的顯示位置
        [UIView animateWithDuration:0.3  animations:^{
            
            CGRect rect = imageView.frame;
            imageView.frame = blockView.frame;
            blockView.frame = rect;
            
        } completion:nil];
    }
    
}

@end

最終點擊效果