iOS微信朋友圈與搖一搖

weixin_34208283發表於2016-08-01
iOS

本Demo為練手小專案,主要是熟悉目前主流APP的架構模式.此專案中採用MVC設計模式,純程式碼和少許XIB方式實現.主要實現了朋友圈功能和搖一搖功能.

預覽效果:

2276378-5ecef9e5da956ecf.gif
WeChat_Demo.gif

主要重點

1.整體架構

利用UITabBarController和UINavigationController配合實現.其中要注意定義基類,方便整體上的管理,例如對UINavigationController頭部的顏色,字型和渲染顏色等設定.以及對UITabBarController的底部的渲染等.

[self.navigationBar setBackgroundImage:[UIImage imageNamed:@"Dimensional-_Code_Bg"] forBarMetrics:UIBarMetricsDefault];      

[self.navigationBar setTitleTextAttributes:@{
                                             NSForegroundColorAttributeName:[UIColor whiteColor]
                                             }];

[self.navigationBar setTintColor:[UIColor whiteColor]];
2.發現介面和我的介面

利用UITableViewController和Plist檔案實現介面的展示.實現過程中有采用資料模型或直接利用字典等方式.這裡的實現比較簡單,就不多說啦.

- (instancetype)initWithDict:(NSDictionary *)dict{

if (self = [super init]) {
    [self setValuesForKeysWithDictionary:dict];
}
return self;
}

+ (instancetype)pictureWithDict:(NSDictionary *)dict{

return [[self alloc] initWithDict:dict];
}
3.朋友圈功能的實現

這裡面主要的難點在於朋友圈首頁的下拉重新整理效果的實現,和選擇照片頁的狀態重用問題,以及照片的傳遞和代理的實現等.
朋友圈首頁的下拉重新整理效果:主要利用transform屬性和scrollview的多種滾動狀態.

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
   self.dragging = YES;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

if (self.num == 0) {
    self.num ++;
    return;
}

CGFloat offsetY = scrollView.contentOffset.y;

CGFloat angle = -offsetY * M_PI / 30;

if (self.dragging == YES) {
    
    if (offsetY <= 110) {
        self.containerView.y = 10 + offsetY;
        
    }

}else {

    if (self.currentY < 120) {
        self.containerView.y = 10 + offsetY;
    }
    
}
self.activityView.transform = CGAffineTransformMakeRotation(angle);

}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

self.dragging = NO;

CGFloat currentY = self.containerView.y;
self.currentY = currentY;

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

[UIView animateWithDuration:0.25 animations:^{

    self.containerView.frame = CGRectMake(15, 120, 30, 30);
    self.activityView.transform = CGAffineTransformMakeRotation(2 * M_PI);
}];

}

其中照片的展示是採用UICollectionViewController來實現的.沒有直接呼叫系統的相簿,因此加大了難度.自定義了cell,並採用了代理方式來實現類與類之間的通訊.

@protocol YYPictureCellDelegate <NSObject>
@optional
- (void)pictureCell:(YYPictureCell *)cell withDidClickBtn:(UIButton *)btn;

@end

- (IBAction)clickSureBtn:(UIButton *)sender {

if ([self.delegate respondsToSelector:@selector(pictureCell:withDidClickBtn:)]) {
    
    [self.delegate pictureCell:self withDidClickBtn:sender];
}
}

- (void)pictureCell:(YYPictureCell *)cell withDidClickBtn:(UIButton *)btn{

if ((self.selectedBtn.count == 9) && (!btn.isSelected)) {
    
    UIAlertView *alert = [[UIAlertView alloc]initWithTitle:nil message:@"最多選取9張照片哦,親!" delegate:nil cancelButtonTitle:@"確定" otherButtonTitles: nil];
    [alert show];
    
    return;
}

btn.selected = !btn.isSelected;

NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];

YYPictureModel *model = self.dataArray[indexPath.row];

if (btn.isSelected) {
    
    model.clickedBtn = YES;
    
    [self.selectedBtn addObject:btn];
    [self.selImageArray addObject:model];
    
} else{
    
    model.clickedBtn = NO;
    [self.selectedBtn removeObject:btn];
    [self.selImageArray removeObject:model];
}

if (self.selectedBtn.count > 0) {
    
    self.doneBtn.enabled = YES;
    self.doneBtn.selected = YES;
    self.previewBtn.enabled = YES;
    self.previewBtn.selected = YES;
}else {

    self.doneBtn.enabled = NO;
    self.doneBtn.selected = NO;
    self.previewBtn.enabled = NO;
    self.previewBtn.selected = NO;
}   
}
4.搖一搖功能的實現

搖一搖功能的本身實現十分簡單,就是呼叫系統的兩個方法即可.難點在於動畫效果.其實這裡的動畫效果也不是很難.主要是計算有點複雜.可能是我在網上搜尋到的素材有點不合適.導致要考慮各個控制元件的frame問題...

//實現搖一搖功能
- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{

self.upLine.hidden = NO;
self.downLine.hidden = NO;
[UIView animateWithDuration:0.6 animations:^{
   
    self.upImageView.y -= 60;
    self.upLine.y -= 60;
    
    self.downImageView.y += 60;
    self.downLine.y += 60;
    
}completion:^(BOOL finished) {
    
    [UIView animateWithDuration:0.6 animations:^{
        
        self.upImageView.y += 60;
        self.upLine.y += 60;
        
        self.downImageView.y -= 60;
        self.downLine.y -= 60;
        
    } completion:^(BOOL finished) {
        
        self.upLine.hidden = YES;
        self.downLine.hidden = YES;
        
        //彈出搜尋框
        [self showSearchView];
        [self.searchView performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:2.4];
    }];

}];
}
//搖一搖結束後
- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event{

}

結束語:

在此,還有感謝提供素材的網友們.此demo主要是把功能實現,程式碼方面沒有做過多的優化,但是易懂,呵呵...有待後續新增其他功能和程式碼的優化.需要原始碼的請戳這裡:https://github.com/yaomars/WeChat_Demo

相關文章