iOS微信朋友圈与摇一摇-源码实现

admin

本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能.

预览效果:

WeChat_Demo.gif

主要重点1.整体架构
利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等.

1. [self.navigationBar setBackgroundImage:[UIImage imageNamed:@"Dimensional-_Code_Bg"] forBarMetrics:UIBarMetricsDefault];      
   
2. 
   
3. [self.navigationBar setTitleTextAttributes:@{
   
4.                                              NSForegroundColorAttributeName:[UIColor whiteColor]
   
5.                                              }];
   
6. 
   
7. [self.navigationBar setTintColor:[UIColor whiteColor]];

复制代码

2.发现界面和我的界面

利用UITableViewController和Plist文件实现界面的展示.实现过程中有采用数据模型或直接利用字典等方式.这里的实现比较简单,就不多说啦.

1. - (instancetype)initWithDict:(NSDictionary *)dict{
   
2. 
   
3. if (self = [super init]) {
   
4.     [self setValuesForKeysWithDictionary:dict];
   
5. }
   
6. return self;
   
7. }
   
8. 
   
9. + (instancetype)pictureWithDict:(NSDictionary *)dict{
   
10. 
    
11. return [[self alloc] initWithDict:dict];
    
12. }

复制代码

3.朋友圈功能的实现

这里面主要的难点在于朋友圈首页的下拉刷新效果的实现,和选择照片页的状态重用问题,以及照片的传递和代理的实现等.
朋友圈首页的下拉刷新效果:主要利用transform属性和scrollview的多种滚动状态.

1. - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
   
2.    self.dragging = YES;
   
3. }
   
4. - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
   
5. 
   
6. if (self.num == 0) {
   
7.     self.num ++;
   
8.     return;
   
9. }
   
10. 
    
11. CGFloat offsetY = scrollView.contentOffset.y;
    
12. 
    
13. CGFloat angle = -offsetY * M_PI / 30;
    
14. 
    
15. if (self.dragging == YES) {
    
16. 
    
17.     if (offsetY <= 110) {
    
18.         self.containerView.y = 10 + offsetY;
    
19. 
    
20.     }
    
21. 
    
22. }else {
    
23. 
    
24.     if (self.currentY < 120) {
    
25.         self.containerView.y = 10 + offsetY;
    
26.     }
    
27. 
    
28. }
    
29. self.activityView.transform = CGAffineTransformMakeRotation(angle);
    
30. 
    
31. }
    
32. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    
33. 
    
34. self.dragging = NO;
    
35. 
    
36. CGFloat currentY = self.containerView.y;
    
37. self.currentY = currentY;
    
38. 
    
39. }
    
40. 
    
41. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
42. 
    
43. [UIView animateWithDuration:0.25 animations:^{
    
44. 
    
45.     self.containerView.frame = CGRectMake(15, 120, 30, 30);
    
46.     self.activityView.transform = CGAffineTransformMakeRotation(2 * M_PI);
    
47. }];
    
48. 
    
49. }

复制代码

其中照片的展示是采用UICollectionViewController来实现的.没有直接调用系统的相册,因此加大了难度.自定义了cell,并采用了代理方式来实现类与类之间的通信.

1. @protocol YYPictureCellDelegate <NSObject>
   
2. @optional
   
3. - (void)pictureCell:(YYPictureCell *)cell withDidClickBtn:(UIButton *)btn;
   
4. 
   
5. @end
   
6. 
   
7. - (IBAction)clickSureBtn:(UIButton *)sender {
   
8. 
   
9. if ([self.delegate respondsToSelector:@selector(pictureCell:withDidClickBtn:)]) {
   
10. 
    
11.     [self.delegate pictureCell:self withDidClickBtn:sender];
    
12. }
    
13. }
    
14. 
    
15. - (void)pictureCell:(YYPictureCell *)cell withDidClickBtn:(UIButton *)btn{
    
16. 
    
17. if ((self.selectedBtn.count == 9) && (!btn.isSelected)) {
    
18. 
    
19.     UIAlertView *alert = [[UIAlertView alloc]initWithTitle:nil message:@"最多选取9张照片哦,亲!" delegate:nil cancelButtonTitle:@"确定" otherButtonTitles: nil];
    
20.     [alert show];
    
21. 
    
22.     return;
    
23. }
    
24. 
    
25. btn.selected = !btn.isSelected;
    
26. 
    
27. NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];
    
28. 
    
29. YYPictureModel *model = self.dataArray[indexPath.row];
    
30. 
    
31. if (btn.isSelected) {
    
32. 
    
33.     model.clickedBtn = YES;
    
34. 
    
35.     [self.selectedBtn addObject:btn];
    
36.     [self.selImageArray addObject:model];
    
37. 
    
38. } else{
    
39. 
    
40.     model.clickedBtn = NO;
    
41.     [self.selectedBtn removeObject:btn];
    
42.     [self.selImageArray removeObject:model];
    
43. }
    
44. 
    
45. if (self.selectedBtn.count > 0) {
    
46. 
    
47.     self.doneBtn.enabled = YES;
    
48.     self.doneBtn.selected = YES;
    
49.     self.previewBtn.enabled = YES;
    
50.     self.previewBtn.selected = YES;
    
51. }else {
    
52. 
    
53.     self.doneBtn.enabled = NO;
    
54.     self.doneBtn.selected = NO;
    
55.     self.previewBtn.enabled = NO;
    
56.     self.previewBtn.selected = NO;
    
57. }   
    
58. }

复制代码

4.摇一摇功能的实现

摇一摇功能的本身实现十分简单,就是调用系统的两个方法即可.难点在于动画效果.其实这里的动画效果也不是很难.主要是计算有点复杂.可能是我在网上搜索到的素材有点不合适.导致要考虑各个控件的frame问题...

1. //实现摇一摇功能
   
2. - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{
   
3. 
   
4. self.upLine.hidden = NO;
   
5. self.downLine.hidden = NO;
   
6. [UIView animateWithDuration:0.6 animations:^{
   
7. 
   
8.     self.upImageView.y -= 60;
   
9.     self.upLine.y -= 60;
   
10. 
    
11.     self.downImageView.y += 60;
    
12.     self.downLine.y += 60;
    
13. 
    
14. }completion:^(BOOL finished) {
    
15. 
    
16.     [UIView animateWithDuration:0.6 animations:^{
    
17. 
    
18.         self.upImageView.y += 60;
    
19.         self.upLine.y += 60;
    
20. 
    
21.         self.downImageView.y -= 60;
    
22.         self.downLine.y -= 60;
    
23. 
    
24.     } completion:^(BOOL finished) {
    
25. 
    
26.         self.upLine.hidden = YES;
    
27.         self.downLine.hidden = YES;
    
28. 
    
29.         //弹出搜索框
    
30.         [self showSearchView];
    
31.         [self.searchView performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:2.4];
    
32.     }];
    
33. 
    
34. }];
    
35. }
    
36. //摇一摇结束后
    
37. - (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event{
    
38. 
    
39. }

复制代码

结束语:

在此,还有感谢提供素材的网友们.此demo主要是把功能实现,代码方面没有做过多的优化,但是易懂,呵呵...有待后续添加其他功能和代码的优化.需要源代码的请戳这里:https://github.com/yaomars/WeChat_Demo