这是我模拟现在新闻列表做的一个Demo，只是做着好玩，另外并实现了点击图片展开浏览的功能，至于那些图片浏览的方式么，当时突然想着好玩就那么做了…
这是项目的github地址：https://github.com/WalkingToTheDistant/TableViewDemo，如果觉得我写的代码对你有帮助的话，给我一个星呗^ _ ^
主界面截图
列表的所有样式
使用纯代码开发，Cell的高度都是在获取数据之后根据cell样式计算高度，TableView先展示框架和文字，然后启动子线程下载图片，等子线程下载结束之后再更新到TableView
主界面滑动效果
图片浏览模式-1
用UICollectionView实现UI，并在所有图片添加下拉手势使其能下滑返回
图片浏览模式-1
图片浏览模式-2
用CALayer的Transform矩阵变换实现，在手势滑动第一个图片到一定距离之后，给后面的Layer添加动画变化Transform（这种使用动画CAAnimation的方式会有点小问题，那就是快速左右滑动的时候，因为动画有执行的时间，所以会跟不上手势的速度......所以我这里做的一个优化就是在添加CAAnimation给View时，先判断View是否正在执行上一个CAAnimation，如果是，则把新CAAnimation添加到数组，等上一个CAAnimation执行结束之后再执行新的CAAnimation）
图片浏览模式-2
图片浏览模式-3（浏览模式-2的改进版）
用CALayer的Transfrom矩阵变换实现，其中添加了在手势滑动的过程中实时改变其他Layer的Transform来实现后面的图片跟着滑动的效果（模式-2是手势滑动图片到一定距离后再启动动画移动其余图片的位置，而模式-3是实时改变其余图片的位置）
图片浏览模式-3
暂时只做了这些功能，之后还会持续更新功能以及优化体验。
代码部分说明
1.图片裁剪圆角
if(radius > 0){ // 设置了圆角值 > 0
const float widthBound = self.bounds.size.width; // 在主线程使用
CGSize size = img.size;
float valueWidth = radius/widthBound; // 判断圆角值和View宽度的比例，如果是View宽度的一半，那么就是圆形
float newRadius = valueWidth * size.width;
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
CGRect rect = CGRectMake(0, 0, size.width, size.height);
if(valueWidth == 0.5){
if(size.width > size.height){
newRadius = size.height/2;
} else {
newRadius = size.width/2;
}
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(size.width/2, size.height/2) radius:newRadius startAngle:0 endAngle:M_PI*2 clockwise:YES];
[path addClip]; // 裁剪
} else {
CGRect rectPath = rect;
rectPath.size.height -= 2; // 需要往上移动2个坐标点，不然会出现断边
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rectPath cornerRadius:newRadius];
[path addClip]; // 裁剪
}
[img drawInRect:rect];
img = nil;
img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
[GCD GCDAsync_MainQueue:^{ // 主线程绘制
__block NSString *strContentsGra = kCAGravityResizeAspect;
if(self.contentMode == UIViewContentModeScaleAspectFill){
strContentsGra = kCAGravityResizeAspectFill; // 填充
} else if(self.contentMode == UIViewContentModeScaleToFill){
strContentsGra = kCAGravityResize; // 拉伸
}
wkSelf.layer.contentsGravity = strContentsGra;
wkSelf.layer.contentsScale = [UIScreen mainScreen].scale; // 屏幕Retina
if(img != nil){
wkSelf.layer.contents = (__bridge id _Nullable)(img.CGImage);
} else {
wkSelf.layer.contents = nil;
}
strContentsGra = nil;
}];
2.子线程下载图片
dispatch_group_t dispatchGroup = dispatch_group_create(); // 用组的方式限制子线程结束之后再去绘制主线程
_muAryImgsHUD = [NSMutableArray arrayWithCapacity:self.aryImgHDURLs.count];
__weak typeof(self) wkSelf = self;
dispatch_semaphore_t semaphore = dispatch_semaphore_create(3); // 用信号量的方式控制子线程的个数，这里同一时间限制3个子线程，避免线程过多
for(int i=0; i<self.aryImgHDURLs.count; i+=1){
dispatch_semaphore_wait(semaphore, DISPATCH_TIME_FOREVER); // 监测信号量，信号量-1，如果信号量<0，那么就锁在这里等待
[_muAryImgsHUD addObject:(id)[NSNull null]]; // 添加占位符，主要是为了下载之后的图片顺序
__block int index = i;
__block NSURL *url = self.aryImgHDURLs[i];
dispatch_group_async(dispatchGroup, dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSLog(@"线程:%i", i);
if(url == nil) { return; }
NSData *data = [NSData dataWithContentsOfURL:url]; // 这里就用了最简单的图片下载方式
if(data == nil) { return; }
UIImage *img = [UIImage imageWithData:data];
if(img == nil) { return; }
NSLog(@"线程:%i -- 添加成功", i);
[wkSelf.muAryImgsHUD setObject:img atIndexedSubscript:index];
img = nil;
url = nil;
data = nil;
dispatch_semaphore_signal(semaphore); // 释放信号量，信号量+1
});
}
dispatch_group_notify(dispatchGroup, dispatch_get_main_queue(), ^{
NSLog(@"muAryImgsHUD.count == %i", (int)
// ...... 绘制主线程
});
3.图片变换Transform的初始化
假设一个屏幕显示N个View（图片），那么就创建N个的Transform对应View的位置，然后手势滑动的过程中计算每个View之间的Transform差值，根据手势滑动的距离计算百分比，就得到每个View目前所在的位置
_numOfShowView = 5; // 我这里设定一个屏幕显示5个View
if(_muAryTransfrom == nil){
_muAryTransfrom = [NSMutableArray new];
}
if(_muAryAlpha == nil){
_muAryAlpha = [NSMutableArray new];
}
const float scaleValue = 0.08f;
for(int i=0; i<_numOfShowView; i+=1){
CATransform3D transform = CATransform3DIdentity;
if((i+1) == _numOfShowView){ // 最后一个View我放在屏幕的上面，形成往下移动的效果
float scale = 1.0f - (scaleValue*(i-1));
scale = (scale >= 0.f)? scale : 0.f;
float ty = - (_viewContainter.bounds.size.height/2 + CGRectGetHeight(st_frameOri)/2);
transform = CATransform3DTranslate(transform, 0, ty, 0);
transform = CATransform3DScale(transform, scale, scale, 1);
} else {
float scale = 1 - (scaleValue*i);
scale = (scale >= 0.f)? scale : 0.f;
float ty = -(CGRectGetHeight(st_frameOri)/10)*i;
transform = CATransform3DTranslate(transform, 0, ty, 0);
transform = CATransform3DScale(transform, scale, scale, 1);
NSLog(@"begin: y - %f ////// scaleX - %f ////// scaleY - %f", ty, scale, scale);
NSLog(@"end: y - %f ////// scaleX - %f ////// scaleY - %f", transform.m42, transform.m22, transform.m11);
}
float alpha = 1.0f - (0.2f*i);
alpha = (alpha >= 0.f)? alpha : 0.f;
[_muAryTransfrom addObject:[NSValue valueWithCATransform3D:transform]];
[_muAryAlpha addObject:[NSNumber numberWithFloat:alpha]];
}
然后手势滑动计算差值
在UIPanGestureRecognizer 的 UIGestureRecognizerStateChanged 状态中处理
// viewMove 是panGes.view，pointMove就是[panGes translationInView:panGes.view];
const float centerX = CGRectGetMinX(viewMove.frame) + CGRectGetWidth(viewMove.frame)/2;
float valueDistance = CGRectGetWidth(_viewContainter.bounds)/2;
float change = 0;
// 先判断目前手势滑动的View在屏幕的哪个位置
if(centerX <= valueDistance){ // 屏幕的左半部分
change = (valueDistance-centerX)/valueDistance;
} else { // 屏幕的右半部分
change = (centerX-valueDistance)/valueDistance;
}
if(change < 0){
change = 0;
} else if(change > 1.0f){
change = 1.0f;
}
for(int i=1; i<_muAryViewShow.count; i+=1){
// 先计算Y坐标偏移
CATransform3D transformPre = [_muAryTransfrom[i-1] CATransform3DValue];
CATransform3D transform = [_muAryTransfrom[i] CATransform3DValue];
const float valueTy = transformPre.m42 - transform.m42; // m42 坐标上的偏移值
float temp = change * valueTy;
const float ty = transform.m42 + temp;
// 再计算缩放偏移值，因为X和Y坐标的缩放值是一样的，所以只需要计算一个就可以了
const float valueScale = transformPre.m11 - transform.m11; // m11 x坐标上的缩放值，因为这里m11和m22是一样的，所以就只用m11
temp = valueScale * change;
const float scale = transform.m11 + temp;
CATransform3D transformResult = CATransform3DIdentity;
transformResult = CATransform3DTranslate(transformResult, 0, ty, 0);
transformResult = CATransform3DScale(transformResult, scale, scale, 1.0);
// 计算透明度
const float alphaPre = [_muAryAlpha[i-1] floatValue];
const float alpha = [_muAryAlpha[i] floatValue];
const float valueAlpha = alphaPre - alpha;
temp = valueAlpha * change;
const float alphaResult = alpha + temp;
// 结果赋值给View
UIView *viewFor = _muAryViewShow[i];
viewFor.layer.transform = transformResult;
viewFor.layer.opacity = alphaResult;
}
网友评论