HTML转原生，以及上/下拉刷新

MARK：这几天看到公司项目中有使用WebView读取HTML并显示的界面，正好可以学习下如何将HTML转换成原生文件

学习过程中

开始使用AFNetworking读取一个HTTPS的网址的时候，返回来了一大堆的类似NSData类型的数据，在网上查了很多资料后将NSData转成NSString类型后发现，MMP，这是一个网页啊！一顿搞懵逼。

后来看到有个第三方 TFHpple，并且在这个第三方中有相应的用法指导。

不多BB

• 首先需要Podfile中加入

pod 'TFHpple', '~> 2.0.0'

• 导入头文件

" #import "

• 上图上码
  • 上一张图

  原方法：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