仿简书个人页面

在简书写了这么久博客,一直觉得个人页面挺有意思的,今天就写了一个仿个人页面的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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • 1.badgeVaule气泡提示 2.git终端命令方法> pwd查看全部 >cd>ls >之后桌面找到文件夹内容...
    i得深刻方得S阅读 4,626评论 1 9
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,991评论 4 60
  • 以前总是怕这怕那,怕改变,怕失去,然后自己想要的生活一点点从身边溜走了。想要的没有得到,不想要的,害怕的,慢慢都来...
    飘零绿阅读 147评论 0 0
  • 相比同类软件,Git有很多优点。其中很显著的一点,就是版本的分支(branch)和合并(merge)十分方便。有些...
    喜欢就可以阅读 230评论 0 0
  • 刚刚在听歌,我唱的笔记,随之而来的感受是想哭,心中一股委屈,胸口一下感觉好堵,瞬间我的眼泪开始积聚。 边听着歌边流...
    雷云玲阅读 212评论 0 0