源码解读--知乎日报

阅读知乎日报源码--总结

第一部分：首页(home)

构成:

顶部的自定义pictureView轮播
1. 设置定时器(self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES]😉
2. 当scroll即将开始滚动时，停止定时器([self.timer invalidate]😉.
3. 结束时又开启定时器，并且判断当前的x偏移值，设置scroll的contentsOffset
4. 这个自定义pictureView只负责把点击的图片的integer值传递给它的代理(这里是HomeVC)，然后具体的跳转事件由代理者完成
顶部的自定义的RefreshView刷新进度动画条
1. 这个进度条其实是一个CAShapeLayer，，然后是被加载到这个RefreshView的本身的layer上面去的
```
 CAShapeLayer *progressLayer = [CAShapeLayer layer];
 [refreshView.layer addSublayer:progressLayer];
 progressLayer.strokeColor = [UIColor whiteColor].CGColor;
 progressLayer.fillColor = [UIColor clearColor].CGColor;
 progressLayer.backgroundColor = [UIColor clearColor].CGColor;
 progressLayer.strokeEnd = 0.0;
  progressLayer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 0, 1);
 progressLayer.lineWidth = 2.0;
```
2.然后监听这个RefreshView的调用者(TableView或者Scroll)的ContentOffSet值的改变，然后去加载动画(是否小于-80)
3.toDo：我认为这里作者应该还要把这个是否用户拖动小于-80(也就是用户完成刷新这个动作)用代理返回给调用者，他是直接在HomeVC里面判断Scroll是否小于-80来进行刷新操作的
监听tableview的滚动，然后根据yOffset(偏移值)来确定headerView(这个不是自定义的，就是一个普通的)的透明程度
当点击侧滑按钮是是发的通知来弹出左侧抽屉的
数据源部分分为两个部分：
1. storyGroup还有一个array，是放当天的所有文章的数组
  2.顶部的headerView是自定义的
  其中会把顶部的移动的几个文章插入到storyGroup的第一个位置去
HomeVC成为了detailVC的代理：目的是告诉该detailVC他的上一篇和下一篇文章是什么，然后就可以在里面直接进行加载了

知识点

1.注册tableview：

[self.tableView registerNib:[UINib nibWithNibName:@"SYTableViewCell" bundle:nil] forCellReuseIdentifier:@"useid"];

2.添加监听：

[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

3.顶部headerView根据offset来设置的渐变效果

///渐变
    CGFloat alpha = 0;
    if (yoffset <= 75.) {
        alpha = 0;
    } else if (yoffset < 165.) {
        alpha = (yoffset-75.) / (165.-75);
    } else {
        alpha = 1.;
    }
    self.headerView.backgroundColor = SYColor(23, 144, 211, alpha);

第二部分：详细文章(detailVC)

构成:

底部的导航板
1. 第0个按钮：直接pop
2. 第1个：根据代理返回回来的文章，然后进行跳转
3. 第2个：增加点赞
4. 第3个：分享，首先根据这个文章是否被收藏然后来调用分享面板的instancetype方法，(因为收藏了的话，title应该是取消收藏)
5. 第4个：评论
6. 评论和点赞按钮上面的数字的实现都是在自定义底部的导航版（NavigationView）上实现的
7. 图片浏览器：这个我不知道为什么会使用两个scrollview，其他的重要知识点可能就是保存图片至相册(见下)

说说点赞按钮：

点赞按钮功能的实现实在这个自定义底部的导航版（NavigationView）上实现的。首先根据点击的tag值来确定点击的是否是点赞按钮响应了，然后再navView上监听这个button 的selected值，如果其selected值改变了并且是yes，那么在该点赞按钮上添加一个label，并且动画效果从正上方15的位置出现值+1，并且消失(remove)
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC))

说说分享面板：

它其实是加载到一个coverView(全屏的)上的，并且分享面板的y坐标是整个屏幕的高度，看到这里是纳闷的，然后接着往下看，才发现他是用动画的方式改变，简单说，就是动画开始时，他的y值变成了-320，也就是整个面板的高度，最后cover又是加载到主window上的

顶部和底部的箭头的转换和上一篇文章的获取也是根据contentoffSet来进行设置的
里面的文章的显示直接就是webview，当webView加载完成过后会获取网页上所有的图片(方法见下)
自己会成为图片浏览器的代理，以告诉该浏览器上一张和下一张图片

知识点

1.获取所有图片：

//js方法遍历图片添加点击事件 返回图片个数
static  NSString * const jsGetImages = @"function setImages(){"\
"var images = document.getElementsByTagName(\"img\");"\
"for(var i=0;i<images.length;i++){"\
"images[i].onclick=function(){"\
"document.location=\"detailimage:\"+this.src;"\
"};};return images.length;};";

[webView stringByEvaluatingJavaScriptFromString:jsGetImages];
[webView stringByEvaluatingJavaScriptFromString:@"setImages()"];

// 获取网页上的所有图片
NSString *jsImage = @"var images= document.getElementsByTagName('img');"
                    "var imageUrls = \"\";"
                    "for(var i = 0; i < images.length; i++)"
                        "{var image = images[i];"
                        "imageUrls += image.src+\"...beyanger....\";"
                    "}"
                    "imageUrls.toString();";

NSString *imageUrls = [webView stringByEvaluatingJavaScriptFromString:jsImage];

self.allImages = [imageUrls componentsSeparatedByString:@"...beyanger...."];

2.判断是否需要加载上下文章：

 if (yoffset < -80) {
    story = [self.delegate prevStoryForDetailController:self story:self.story];
    transform = CGAffineTransformMakeTranslation(0, kScreenHeight);
} else if ((kScreenHeight -60 - scrollView.contentSize.height + yoffset) > 80) {
    story = [self.delegate nextStoryForDetailController:self story:self.story];
    transform = CGAffineTransformMakeTranslation(0, -kScreenHeight);
}
if (!story) return;

3.上下文章的切换动画(有一个空白视图避免加载中给人不好的印象)

// 切换过程动画
UIView *v = [self.view snapshotViewAfterScreenUpdates:NO];
self.story = story;
UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, -kScreenHeight, kScreenWidth, 3*kScreenHeight)];
backView.backgroundColor = kWhiteColor;
v.frame = CGRectMake(0, kScreenHeight, kScreenWidth, kScreenHeight);
[backView addSubview:v];
[[UIApplication sharedApplication].keyWindow addSubview:backView];
[UIView animateWithDuration:0.25 animations:^{
    backView.transform = transform;
} completion:^(BOOL finished) {
    [backView removeFromSuperview];
    self.footer.transform = CGAffineTransformIdentity;
    self.header.transform = CGAffineTransformIdentity;
}];

4.保存图片至相册

- (void)saveImage {
if (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) {
    [MBProgressHUD showError:@"无法读取相册"];
}
UIImageWriteToSavedPhotosAlbum(self.imageView.image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
}


- (void)image: (UIImage *) image didFinishSavingWithError: (NSError *) error contextInfo: (void *) contextInfo{
[MBProgressHUD showSuccess:@"已保存至相册"];
}

第三部分：评论(commentVC)

构成:

底部的返回面板+长按和tap点击的手势出现的cell操作面板+自定义的cell
根据点击的位置判断是哪个cell，然后根据点击的CGPoint的x坐标，判断是否大于面板宽度的一半，然后决定面板的center应该在哪个位置(代码见下)

确定点击的cell和点击的位置

 UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressHandler:)];

///手势的点击事件

 -(void)longPressHandler:(UILongPressGestureRecognizer *)longGesture {
 if (longGesture.state == UIGestureRecognizerStateEnded) {
 	CGPoint location = [longGesture 		locationInView:self.tableView];
 NSIndexPath * indexPath = [self.tableView indexPathForRowAtPoint:location];
  self.cell = [self.tableView cellForRowAtIndexPath:indexPath];
  if (!self.cell) return self.pannel;

///因为用户会有可能已经对其进行了点赞

 SYCommentPannel *cv = [SYCommentPannel commentPannelWithLiked:self.cell.comment.isLike];
 cv.delegate  = self;
 CGFloat xoffset = cv.width*0.5+12;

 if (location.x < xoffset) {
 cv.center = CGPointMake(xoffset, location.y-20);
  } else if (location.x > (kScreenWidth-xoffset)) {
 cv.center = CGPointMake(kScreenWidth-xoffset, location.y-20);
  } else {
 cv.center = CGPointMake(location.x, location.y-20);
  }

 cv.alpha = 0;
 [self.tableView addSubview:cv];
 [UIView animateWithDuration:0.5 animations:^{
 	cv.alpha = 1.0;
 }];
 return cv;

2.调用系统方法进行复制

	[UIPasteboard generalPasteboard].string = comment.content;
    [MBProgressHUD showSuccess:@"复制成功"];

第四部分：侧滑栏(LeftDrawerVC)

构成:

MainVC使用的是第三方：MMDrawerController
MainVC里面设置了侧滑相关的属性
MainVC里面设置了中心视图位Home，侧滑视图为LeftDrawerVC
在LeftDrawerVCVC里面有一个属性保存着当前的主视图(mainVC),方便跳转

侧滑栏上面的数据源由两部分构成：收藏的专题和未收藏的专题，收藏了的在数据源数组的前半部分，有一个固定的专题叫做首页，它是直接插入0的位置
根据点击的是哪一个专题进行跳转

[self.mainController setCenterViewController:navi withCloseAnimation:YES completion:nil];
cell的代理设置设置为self，目的是为了用户收藏后，获得该专题是第几个cell，把该收藏的专题移动到第二个位置
各个专题的VC的代理也要设置为self，目的是为了当用户在各VC里面进行收藏该专题了过后，LeftDrawerVC可以根据该主题的名字来查找到该专题在数据源数组中的位置，然后操作同上，并且还需要在LeftDrawerVC的代理方法中进行网络操作告诉服务器用户进行了该专题的收藏，而且需要重新设置themeCell，因为cell后面的+按钮需要变化成>按钮
```
 // 重新设置theme，刷新cell的显示
 SYLeftDrawerCell *cell = [self.tableView cellForRowAtIndexPath:sip];
 cell.theme = theme;
 [self.tableView moveRowAtIndexPath:sip toIndexPath:dip];
 [self tableView:self.tableView moveRowAtIndexPath:sip toIndexPath:dip];
```

第五部分：专题VC(ThemeVC)

就相当于HomeVC，不过肯定有不同

StoryListVC首先继承自baseVC(baseVC其实就是专门为theme设计的)

ThemeVC继承自StoryListVC

顶部的headerView和前面的实现类似
headerView下面有tableview的tableHeader，紧贴着headerView，这个是属于编辑者的头像，最多只有5个头像，点击会进行跳转到editorVC，其中头像的圆角使用的是贝塞尔曲线，（见下）
如果用户点击headerView中的收藏按钮，则告诉代理者实现代理方法

圆角的贝塞尔曲线实现

 ///圆角的 贝塞尔实现
 - (void)awakeFromNib {
 for (UIImageView *imageView in self.editorsImage) {
	 	CAShapeLayer *maskLayer = [CAShapeLayer layer];
 	maskLayer.frame = imageView.bounds;
 	maskLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(imageView.bounds, 2, 2)].CGPath;
 	imageView.layer.mask = maskLayer;
 	 }

}

第六部分：launchVC

launch界面，其实没什么讲的，还是说一下逻辑吧

appDelegate的window的rootVC就是设置的是这个launchVC

首先会去userDefaults里边查找是否存在缓存图片
没有则会去下载并缓存下来
初始化MainVC，然后调用APPdelegate来把mainVC保存到appdelegate里面
并且加载lanuchImage的消失动画
在动画完成过后，设置delegate的rootVC为mainVC

发现的问题：

这里发现一个问题，那就是如果没联网，程序应该会崩，因为他是在网络的completionBlock里面进行加载的MainVC...

经验证，果真崩了...
但是更改逻辑过后虽然不蹦了，但是里面什么内容都没有，这个是影响用户体验的.. 我猜真正的知乎日报应该会有很好的解决办法把，待会儿下载一个试一试

第七部分：登录VC和设置VC

登录VC和设置VC

登录界面就主要是它用了一个RAC进行绑定，监听登录按钮的变化
设置VC在viewillAppear中会根据登录用户的名字(存放在UserDefault中)来判断第一个section是应该放置个人资料cell还是放置登录的cell
其中setting界面的Model部分没看太懂... 不过我知道他是干什么的..

在SettingCell里面，会根据settingmodel来判断他的右侧的视图是一个什么view，所以才会有上面model的存在，同时也方便了保存每个cell的状态

  - (UISwitch *)switchView {
   if (!_switchView) {
  		_switchView = [[UISwitch alloc] init];
  		_switchView.onTintColor = kGroundColor;
  		_switchView.on = [kUserDefaults boolForKey:self.item.title];
  		[_switchView addTarget:self action:@selector(clickedSwitch:) forControlEvents:UIControlEventValueChanged];
  	}
  	 return _switchView;
  }


  - (void)clickedSwitch:(UISwitch *)sender {
  	NSUserDefaults *ud = [NSUserDefaults standardUserDefaults];
  	[ud setBool:sender.isOn forKey:self.item.title];
  }

SDwebimage的清除缓存的方法

 + (void)clearCache {
 	[[SDImageCache sharedImageCache] clearDisk];
 	[self clearCacheTables];
 }

其他知识点

通篇文章都喜欢使用这种便利化构造器
+ (instancetype)cellWithTableView:(UITableView *)tableView {
static NSString *reuse_id = @"setting_reuseid";
SYSettingCell *cell = [tableView dequeueReusableCellWithIdentifier:reuse_id];

 	if (!cell) {
 	cell = [[self alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuse_id];
 	CAShapeLayer *layer = [CAShapeLayer layer];
 	layer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(4, 4, 32, 32)].CGPath;
 	cell.imageView.layer.mask = layer;
 	}
 	return cell;
 }

通篇文章都喜欢使用getter和setter方法
- (UILabel *)titleLabel {
if (!_titleLabel) {
UILabel *titleLabel = [[UILabel alloc] init];

 	NSDictionary *attr = @{
     	NSFontAttributeName:[UIFont systemFontOfSize:18],
     	NSForegroundColorAttributeName:[UIColor whiteColor]};
 
 	titleLabel.attributedText = [[NSAttributedString alloc] initWithString:@"今日要闻" attributes:attr];
 	[titleLabel sizeToFit];
 	titleLabel.center = CGPointMake(kScreenWidth*0.5, 35);
 	_titleLabel = titleLabel;
 	[self.view addSubview:titleLabel];
 
 	SYRefreshView *refresh = [SYRefreshView refreshViewWithScrollView:self.tableView];
 	refresh.center = CGPointMake(kScreenWidth*0.5 - 60, 35);
 	[self.view addSubview:refresh];
 	_refreshView = refresh;
 
 	}
 	return _titleLabel;
 }

通篇文章都喜欢使用delegate来进行模块之间通信
// 本文件中API大部分来自于
// https://github.com/izzyleung/ZhihuDailyPurify/wiki/知乎日报-API-分析

数据库的实现是用的FMDB

 ///获得数据库大小
 + (unsigned long long)dataSize {
 		NSString *path = 	NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES).lastObject;
  		NSString *dbName = [NSString stringWithFormat:@"%@.cached.sqlite", @"zhihu"];

 		 NSString *pathName = [path stringByAppendingPathComponent:dbName];
 		NSDictionary *attrs = [[NSFileManager defaultManager] attributesOfItemAtPath:pathName error:nil];
 		return attrs.fileSize;
 	}

MJExtension的使用

 			#import "MJExtension.h"

 			@implementation SYRecommender
 			/**
 			 归档的实现
 			*/

 			MJCodingImplementation

或者是
+ (NSDictionary *)modelContainerPropertyGenericClass {
// value should be Class or Class name.
return @{@"stories" : @"SYStory"};
}

或者是

 	+ (void)getThemeWithId:(int)themeId completed:(Completed)completed {

 		NSString *themeUrl = [NSString stringWithFormat:@"http://news-at.zhihu.com/api/4/theme/%d", themeId];
 		[YSHttpTool GETWithURL:themeUrl params:nil success:^(id responseObject) {
		 	SYThemeItem *item = [SYThemeItem mj_objectWithKeyValues:responseObject];
 		!completed ? : completed(item);
 	} failure:nil];
 }

Masonry的使用

 	///轮播的适配
 	self.scrollerView = scrollerView;
 	
 [scrollerView mas_makeConstraints:^(MASConstraintMaker *make) 		{
     make.top.left.bottom.right.mas_equalTo(ws);
 }];
 
 UIPageControl *pageControl = [[UIPageControl alloc] init];
 [self addSubview:pageControl];
 self.pageControl = pageControl;
 
 [pageControl mas_makeConstraints:^(MASConstraintMaker *make) {
     make.size.mas_equalTo(CGSizeMake(60, 16));
     make.centerX.mas_equalTo(ws);
     make.bottom.mas_equalTo(ws).offset(-14);
 }];

SDWebImage的使用
///获得图片大小
+ (NSUInteger)imageSize {
return [[SDImageCache sharedImageCache] getSize];
}

 ///清除数据
 + (void)clearCache {
 	[[SDImageCache sharedImageCache] clearDisk];
 	[self clearCacheTables];
 }

3元表达式

 result ? (!success? :success()) : (!failure? :failure());

And

 !isLike ? : [self addLikeAnimation];
  self.multiImage.hidden = !story.multipic;

图片截图

	-(UIImage *)snapshort {
		UIGraphicsBeginImageContext(self.bounds.size);
		 [self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];
		 UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
		UIGraphicsEndImageContext();
		return image;

	}

滚动

-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
	 CGFloat xoffset = scrollView.contentOffset.x;
	int currentPage  = (int)(xoffset / kScreenWidth + 0.5);
	self.pageControl.currentPage = currentPage;
	}

给comment这个model里面的islike属性进行了KVO监听

	[comment addObserver:self forKeyPath:@"isLike" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];

//然后处理
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
BOOL isLike = [change[@"new"] boolValue];
!isLike ? : [self addLikeAnimation];

	self.likeLabel.text = [NSString stringWithFormat:@"%ld", self.comment.likes];

	if (isLike) {
self.likeImage.image = [UIImage imageNamed:@"Comment_Voted"];
self.likeLabel.textColor = kGroundColor;
} else {
self.likeImage.image = [UIImage imageNamed:@"Comment_Vote"];
self.likeLabel.textColor = SYColor(128, 128, 128, 1.0);

}
}

Islicked的动画

if (self.isAnimatting) return;
	self.isAnimatting = YES;
	UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"+1"]];
	 CGRect frame  = CGRectMake(-30., -24, 30, 24);
	UIWindow *window = [UIApplication sharedApplication].keyWindow;

	imageView.frame = [self.likeImage convertRect:frame toView:window];
	[window addSubview:imageView];
	[UIView animateWithDuration:0.48 animations:^{
		CGRect endFrame = CGRectMake(0, 0, 5, 4);
		imageView.frame = [self.likeImage convertRect:endFrame toView:window];
	} completion:^(BOOL finished) {
		[imageView removeFromSuperview];
		self.isAnimatting = NO;
	}];

使用约束来控制是否存在图片时title的宽度

if (story.images.count > 0) {
	[self.image sd_setImageWithURL:[NSURL URLWithString:story.images.firstObject]];
	self.image.hidden = NO;
//控制约束
	self.titleLeft.constant = 18;
} else {
	self.image.hidden = YES;
	self.multiImage.hidden = YES;
	self.titleLeft.constant = 18-60;
}

tableView的HeaderView也有重用机制

	SYHomeHeaderView  *header = [tableView dequeueReusableHeaderFooterViewWithIdentifier:header_reuseid];

posted @ 2016-06-03 21:37 Wayne_Liu 阅读(1072) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Wayne_Liu