重寫 View 的 Touch 方法,實(shí)現(xiàn)一個(gè)酷炫的九宮格圖片

前幾天翻看代碼庫(kù),發(fā)現(xiàn)一個(gè)之前寫過(guò)的一個(gè)有意思的小玩意,共享給大家??
廢話不多說(shuō),上圖,先看看效果
photosView.gif

怎么樣,是不是還蠻有意思呢?

實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單,我們只需要重寫幾個(gè) View 的 touch 方法

//觸摸開(kāi)始
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    //獲取觸摸點(diǎn)
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    
    //當(dāng)前點(diǎn)擊到的圖片的下標(biāo)小于圖片數(shù)組的元素個(gè)數(shù)
    _selectIndex = [self itemIndexWithPoint:point];
    if (_selectIndex < self.itemArray.count) {
        UIImageView *item = self.itemArray[_selectIndex];
        //拿到最上層
        [self bringSubviewToFront:item];
        //動(dòng)畫效果
        [UIView animateWithDuration:0.3 animations:^{
            //改變當(dāng)前選中圖片視圖的大小和位置
            item.center = point;
            item.transform = CGAffineTransformMakeScale(1.2, 1.2);
            item.alpha = 0.8;
        }];
    }
    
}

在觸摸一開(kāi)始,我們先判定當(dāng)前觸摸的點(diǎn)是在哪一張圖片上,獲得這張圖片的下標(biāo),并設(shè)置為選中下標(biāo),然后改變當(dāng)前圖片的位置(中心移動(dòng)到觸摸點(diǎn))和大小(放大效果)。

//觸摸移動(dòng)
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    //獲取觸摸點(diǎn)
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    
    //獲取當(dāng)前觸摸點(diǎn)位置下標(biāo)
    NSInteger index = [self itemIndexWithPoint:point];
    
    if (_selectIndex < self.itemArray.count) {
        UIImageView *item = self.itemArray[_selectIndex];
        item.center = point;
        if (index < self.itemArray.count && index != _selectIndex) {
            //當(dāng)前點(diǎn)位置所屬下標(biāo)與選中下標(biāo)不同
            //將兩個(gè)圖片分別在數(shù)據(jù)源數(shù)組和子視圖數(shù)組中移除
            UIImage *image = _dataList[_selectIndex];
            [_dataList removeObjectAtIndex:_selectIndex];
            [self.itemArray removeObjectAtIndex:_selectIndex];
            //重新插入到指定位置
            [_dataList insertObject:image atIndex:index];
            [self.itemArray insertObject:item atIndex:index];
            //重新記錄選中下標(biāo)
            _selectIndex = index;
            //重新布局
            [self restartMakeItemFram];
        }
    }
    
}

然后在觸摸移動(dòng)方法中再次判定當(dāng)前觸摸點(diǎn)所在的圖片下標(biāo),然后比較選中下標(biāo)與當(dāng)前下標(biāo),如果不相同,就交換兩張圖片的位置。

//觸摸結(jié)束
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    if (_selectIndex < _itemArray.count) {
        UIImageView *item = _itemArray[_selectIndex];
        
        //還原操作
        [UIView animateWithDuration:0.3 animations:^{
            item.transform = CGAffineTransformIdentity;
            item.alpha = 1;
            item.frame = [self makeFrameWithIndex:(int)_selectIndex];
        }];
    }
    
}

最后,在觸摸結(jié)束方法中還原選中圖片的大小,重新計(jì)算它的位置

是不是很簡(jiǎn)單呢?下面附上 Demo 的地址
Demo點(diǎn)這里點(diǎn)這里

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,084評(píng)論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,200評(píng)論 4 61
  • ( 郭寧Judy頭馬CC3演講稿) Do you think Harvard is the university ...
    大J小M成長(zhǎng)記閱讀 680評(píng)論 0 2
  • 急救室外,小平母親泣不成聲…… 12月3日下午15點(diǎn)零3分,星期三。天藍(lán)得一絲不掛,微冷,風(fēng)兒也歇息了。再尋常不過(guò)...
    十九M閱讀 383評(píng)論 2 3
  • I didn't like the implication. And even though my dad had...
    柒弟閱讀 1,085評(píng)論 0 2