仿简书个人页面

在简书写了这么久博客,一直觉得个人页面挺有意思的,今天就写了一个仿个人页面的demo,这里只是给大家一个思路,写的不一定好,先看看最后的效果图吧.
github下载地址

在写的时候我想了很多,先想如果它整体是个tableview的话,那动态文章那个view可以设为sectionView,这样没问题,可是下面的cell里面就要用scrollerview,scrollerview里面又是tableview,这样总是会scrollerview里面的tableview就会吸收整个tableview的滑动事件.然后我就整体用一个scrollerview,下面也是一个scrollerview,动态,文章和更多那个view就在滑动的代理方法里判断scrollerview的contentOffset.y是否超过一个临界值,如果超过就让他scrollerview的contentoffset停留在那里不动.具体的看看代码吧,我是用storyboard写的.

然后看看代码吧.

//
//  ViewController.m
//  仿简书
//
//  Created by 徐茂怀 on 16/5/5.
//  Copyright © 2016年 徐茂怀. All rights reserved.
//

#import "ViewController.h"
#import "UIView+UIView_Add.h"
#define SCREEN_HEIGHT     ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_WIDTH      ([[UIScreen mainScreen] bounds].size.width)
@interface ViewController ()<UIScrollViewDelegate,UITableViewDataSource,UITableViewDelegate>
@property (strong, nonatomic) IBOutlet UIImageView *userImg;
@property (strong, nonatomic) IBOutlet UITableView *wenjiTableView;
@property (strong, nonatomic) IBOutlet UINavigationBar *navBar;
@property (strong, nonatomic) IBOutlet UIButton *bianjiBtn;
@property (strong, nonatomic) IBOutlet UIView *selectView;

@property (strong, nonatomic) IBOutlet UIScrollView *scrollview;
@property (strong, nonatomic) IBOutlet UIButton *dongtaiBtn;
@property (strong, nonatomic) IBOutlet UIButton *wenzhangBtn;
@property (strong, nonatomic) IBOutlet UIView *huakuaiView;
@property (strong, nonatomic) IBOutlet UIButton *moreBtn;
@property (strong, nonatomic) IBOutlet UIView *moreView;
@property (strong, nonatomic) IBOutlet UIScrollView *subScroll;
@property (strong, nonatomic) IBOutlet UITableView *dongtaiTableView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //头像和编辑按钮的的设置
    _userImg.layer.masksToBounds = YES;
    _userImg.layer.cornerRadius = 30;
    _navBar.barTintColor = [UIColor whiteColor];
    _navBar.clipsToBounds = NO;
    _bianjiBtn.layer.masksToBounds = YES;
    _bianjiBtn.layer.borderColor = [UIColor colorWithRed:0.53 green:0.91 blue:0.56 alpha:1].CGColor;
    _bianjiBtn.layer.borderWidth = 1;
    _bianjiBtn.layer.cornerRadius = 3;
    //在小的scrollerview里面添加2个tableview和一个view
    _subScroll.contentSize = CGSizeMake(SCREEN_WIDTH * 3, SCREEN_HEIGHT);
    _moreView.x = SCREEN_WIDTH * 2;
    _moreView.width = SCREEN_WIDTH;
    [_subScroll addSubview:_moreView];
    _wenjiTableView.x = SCREEN_WIDTH ;
    [_subScroll addSubview:_wenjiTableView];
    _dongtaiTableView.x = 0;
    [_subScroll addSubview:_dongtaiTableView];
}
#pragma mark UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //当整体滑动到一个临界值时将tableview设为可滑动或者不可活动
    if (_scrollview.contentOffset.y / 3 <= 53.00 && _wenjiTableView.contentOffset.y <= 0.1) {
        [_wenjiTableView setScrollEnabled:NO];
    }
    if (_scrollview.contentOffset.y / 3 <= 53.00 && _dongtaiTableView.contentOffset.y <= 0.1) {
        [_dongtaiTableView setScrollEnabled:NO];
    }
    //左右滑动小的scrollerview让文字颜色改变和小滑块滑动
    if (scrollView == _subScroll) {
        CGFloat i = _subScroll.contentOffset.x / SCREEN_WIDTH;
        if (i == 0) {
            _dongtaiBtn.selected = YES;
            _wenzhangBtn.selected = NO;
            _moreBtn.selected = NO;
            [UIView animateWithDuration:0.5 animations:^{
                _huakuaiView.centerX = _dongtaiBtn.centerX;
            }];
        }else if ( i == 1){
            _wenzhangBtn.selected = YES;
            _dongtaiBtn.selected = NO;
            _moreBtn.selected = NO;
            [UIView animateWithDuration:0.5 animations:^{
                _huakuaiView.centerX = _wenzhangBtn.centerX;
            }];
            [UIView animateWithDuration:0.5 animations:^{
                _subScroll.contentOffset = CGPointMake(SCREEN_WIDTH , 0);
            }];
        }else if (i == 2){
            _moreBtn.selected = YES;
            _dongtaiBtn.selected = NO;
            _wenzhangBtn.selected = NO;
            [UIView animateWithDuration:0.5 animations:^{
                _huakuaiView.centerX = _moreBtn.centerX;
            }];
            [UIView animateWithDuration:0.5 animations:^{
                _subScroll.contentOffset = CGPointMake(SCREEN_WIDTH * 2, 0);
            }];
        }
        return;
    }
    if (scrollView == _scrollview) {
        CGFloat contentY = _scrollview.contentOffset.y / 3;
        if (contentY <= 25 && contentY >= 0) {
            //改变头像的大小
            [_userImg setHeight:60 - contentY];
            _userImg.centerX = self.view.centerX;
            [_userImg setWidth:60 - contentY];
            _userImg.layer.cornerRadius = _userImg.width/2;
        }
        if (contentY >= 53) {
            //让scrollerview停留之
            _scrollview.contentOffset = CGPointMake(0, 53 * 3);
            [_wenjiTableView setScrollEnabled:YES];
            [_dongtaiTableView setScrollEnabled:YES];
        }
    }
}
//点击按钮的动作

- (IBAction)dongtaiAction:(UIButton *)sender {
    sender.selected = YES;
    _wenzhangBtn.selected = NO;
    _moreBtn.selected = NO;
    [UIView animateWithDuration:0.5 animations:^{
         _huakuaiView.centerX = sender.centerX;
    }];
    [UIView animateWithDuration:0.5 animations:^{
        _subScroll.contentOffset = CGPointMake(0, 0);
        _scrollview.contentOffset = CGPointMake(0, 159);
    }];
    [self changeImage];
    
}

- (IBAction)wenzhangAction:(UIButton *)sender {
    sender.selected = YES;
    _dongtaiBtn.selected = NO;
    _moreBtn.selected = NO;
    [UIView animateWithDuration:0.5 animations:^{
        _huakuaiView.centerX = sender.centerX;
    }];
    [UIView animateWithDuration:0.5 animations:^{
        _subScroll.contentOffset = CGPointMake(SCREEN_WIDTH , 0);
         _scrollview.contentOffset = CGPointMake(0, 159);
    }];
    [self changeImage];
}
- (IBAction)moreAction:(UIButton *)sender {
    sender.selected = YES;
    _dongtaiBtn.selected = NO;
    _wenzhangBtn.selected = NO;
    [UIView animateWithDuration:0.5 animations:^{
        _huakuaiView.centerX = sender.centerX;
    }];
    [UIView animateWithDuration:0.5 animations:^{
        _subScroll.contentOffset = CGPointMake(SCREEN_WIDTH * 2, 0);
         _scrollview.contentOffset = CGPointMake(0, 159);
    }];
    [self changeImage];
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if ([tableView isEqual:_dongtaiTableView]) {
        return 100;
    }
    return 100;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([tableView isEqual:_dongtaiTableView]) {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"dongtaicell" forIndexPath:indexPath];
        return cell;
    }
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"wenzhangcell" forIndexPath:indexPath];
    return cell;
}

-(void)changeImage
{
    [UIView animateWithDuration:0.5 animations:^{
        CGRect frame = _userImg.frame;
        frame.size.height = 36.57;
        frame.size.width = 35.5;
        _userImg.frame = frame;
        _userImg.layer.cornerRadius = _userImg.width / 2;
        _userImg.centerX = self.view.centerX;
    }];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

里面写了主要的注释,思路差不多就是这样,也是可以理解的,但是在上下滑动滑动到临界值时总是有点卡顿,这是因为在-(void)scrollViewDidScroll:(UIScrollView *)scrollView方法里面判断滑动的临界值然后再决定tableview是否可以滑动,这肯定是会卡主,要松手再划一下才能行,还有一个bug就是当头像放大了之后,点击中间的按钮时,头像会先变方,然后缩小变圆,我估计是和cornerRadius的使用有很大关系吧.而且简书app上面也是这个bug.这2个问题我还没想到更好的解决方法,如果有知道的朋友可以简单的给我指点一下.谢谢大家.
好了,今天就到这里了,住大家天天开心he'he