MARK：这几天看到公司项目中有使用WebView读取HTML并显示的界面，正好可以学习下如何将HTML转换成原生文件
学习过程中
开始使用AFNetworking读取一个HTTPS的网址的时候，返回来了一大堆的类似NSData类型的数据，在网上查了很多资料后将NSData转成NSString类型后发现，MMP，这是一个网页啊！一顿搞懵逼。
后来看到有个第三方 TFHpple，并且在这个第三方中有相应的用法指导。
不多BB
- 首先需要Podfile中加入
pod 'TFHpple', '~> 2.0.0'
- 导入头文件
" #import <TFHpple.h> "
- 上图上码
- 上一张图
原方法：searchWithXPathQuery:@"这里与图对照看"
对照组：searchWithXPathQuery:@"//article[@class = 'content-item page spec-index-item']"
HTML元素.png- 上码
NSString *url = @"你的网址";
NSData *data = [[NSData alloc]initWithContentsOfURL:[NSURL URLWithString:url]];
TFHpple *xpathParser = [[TFHpple alloc] initWithHTMLData:data];
NSArray *dataArr = [xpathParser searchWithXPathQuery:@"//article[@class = 'content-item page spec-index-item']"];
for (TFHppleElement *element in dataArr) {
#pragma 取出HTML中的链接和发布时间
if ([[element objectForKey:@"class"] isEqualToString:@"content-item page spec-index-item"]) {
NSArray *LinkElementsArr = [element searchWithXPathQuery:@"//a"];
for (TFHppleElement *tempAElement in LinkElementsArr) {
//链接
NSString *linkStr = [tempAElement objectForKey:@"href"];
NSString *subStr = [@"http:" stringByAppendingString:linkStr];
//发布时间
NSString *titleStr = [tempAElement content];
NSString *f1 = [titleStr stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
NSString *resust = [f1 substringToIndex:10];
[self.avatarMutableDict setObject:subStr forKey:@"link"];
[self.avatarMutableDict setObject:resust forKey:@"publishDate"];
}
#pragma 取图片和标题
NSArray *IMGElementsArr = [element searchWithXPathQuery:@"//img"];
for (TFHppleElement *tempAElement in IMGElementsArr) {
//图片
NSString *imgStr = [tempAElement objectForKey:@"src"];
NSString *subStr = [@"http:" stringByAppendingString:imgStr];
//标题
NSString *titleStr = [tempAElement objectForKey:@"alt"];
NSString *realStr = [titleStr stringByReplacingOccurrencesOfString:@" 预览图" withString:@""];
[self.avatarMutableDict setObject:subStr forKey:@"imageUrl"];
[self.avatarMutableDict setObject:realStr forKey:@"title"];
}
#pragma 存入模型
SubsequentModel *model = [SubsequentModel subsequentModelWithDict:self.avatarMutableDict];
[self.avatarMutableArray addObject:model];
}
}
☞ 将HTML转成原生的数据转换到此结束了
开始新篇章 --- 一个有趣的Demo
上文获取的数据在这里将被用到
实现一个CollectionView，这里是基础就不写了。完成之后用一个不常用的方法
-(void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
item出现时调用，目的是实现跟随出现的效果
不好意思😅 有懒了，直接上码
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(SubsequentCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{
SubsequentModel *model = self.modelArray[indexPath.row];
CATransform3D rotation;//3D旋转
rotation = CATransform3DMakeTranslation(0 ,50 ,20);
// rotation = CATransform3DMakeRotation( M_PI_4 , 0.0, 0.7, 0.4);
//逆时针旋转
rotation = CATransform3DScale(rotation, 0.9, .9, 1);
rotation.m34 = 1.0/ -600;
cell.layer.shadowColor = [[UIColor blackColor]CGColor];
cell.layer.shadowOffset = CGSizeMake(10, 10);
cell.alpha = 0;
cell.layer.transform = rotation;
[UIView beginAnimations:@"rotation" context:NULL];
//旋转时间
[UIView setAnimationDuration:0.6];
cell.layer.transform = CATransform3DIdentity;
cell.alpha = 1;
cell.layer.shadowOffset = CGSizeMake(0, 0);
[UIView commitAnimations];
[cell cellOffset];
cell.model = model;
}
- 还有一些效果不放试一试 CATransform3DMake***
当你松手的时候调用此方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
if ([scrollView isEqual:self.myScroll]) {
int index = floor((self.myScroll.contentOffset.x - scrollView.frame.size.width / 2) / scrollView.frame.size.width) + 1;
self.currentIndexPath = [NSIndexPath indexPathForRow:index inSection:self.currentIndexPath.section];
[self.collectionView scrollToItemAtIndexPath:self.currentIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredVertically animated:NO];
[self.collectionView setNeedsDisplay];
SubsequentCell *cell = (SubsequentCell*)[self.collectionView cellForItemAtIndexPath:self.currentIndexPath];
[cell cellOffset];
CGRect rect = [cell convertRect:cell.bounds toView:nil];
self.animationTrans = cell.imgView.transform;
self.offsetY = rect.origin.y;
}
}
来吧！ 互相伤害吧！
效果图.gif
另附上一个大大的Demo
