前幾天翻看代碼庫(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)這里