高仿简书个人中心

短命女 2022-05-31 11:53 274阅读 0赞

# 概述 #

高仿简书个人中心头像放大缩小，头像的点击，下面的分类等

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/11226.html][http_www.demodashi.com_demo_11226.html] ####

#### 一、准备工作 ####

高仿简书个人中心上下 左右滑动页面，开始做之前，首先思路要清晰，逻辑比较繁琐。

![10C03A6D50280579F0F630A5A4CFC5E0.jpg][]

首先看到简书个人中心页面时，我大致给他划分为4大部分：

1，首先是用户的头像

2，用户资料信息

3，三个标题（TitleView）

4，下面UITableView

因为此处有左右滑动和上下两种滑动，所以在上面的2，3，4 我们整体放在一个ScrollView上， 而1，用户头像的改变，根据ScrollView 的上下滑动 y 值对头像大小进行处理。

#### 二、程序实现 ####

项目中不需要配置任何东西，全都是逻辑方面的东西，只要思维逻辑清楚，我们就开始干，

![屏幕快照 2017-08-16 12.00.29.png][2017-08-16 12.00.29.png]

在上面的项目图中可以清楚的看到，所有的View都是自定义实现的，控制控制器的大小，之前一阿里朋友告诉我，他们公司的硬性规定，无论页面实现什么功能，在控制器中的代码 不能超过300 行，能封装的尽量封装起来，不做繁琐的代码Copy。

首先看下如何自定义头像View

/** 初始化方法
     * 头像图片
     */
    - (instancetype)initWithImage:(UIImage *)image;
    
    /** 更新头像大小
     * 滚动视图
     */
    - (void)reloadSizeWithScrollView:(UIScrollView *)scrollView;
    
    /**
     * 点击头像回调
     */
    - (void)handleClickActionWithBlock:(ClickImageBlock)block;

头像大小的改变

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
        if ([keyPath isEqualToString:ContentOffset] && object == self.scrollView) {
            
            CGFloat offsetY = self.scrollView.contentOffset.y;
            CGFloat scale = 1.0;
            if (offsetY < 0) { // 放大
                scale = MIN(1.5, 1 - offsetY / 300);//简书没有这个功能
            } else if (offsetY > 0) { // 缩小
                scale = MAX(0.40, 1 - offsetY / 300);
            }
            self.yourImages.transform = CGAffineTransformMakeScale(scale, scale);
            
            CGRect frame = self.yourImages.frame;
            frame.origin.y = 15;
            self.yourImages.frame = frame;
        }
    }

自定义TitleView（要可以左右滑动，标题下方有标注）

- (void)titleButtonClicked:(UIButton *)button {
        _selectedIndex               = button.tag;
        if (self.selectedButton) {
            self.selectedButton.selected = YES;
        }
        button.selected              = NO;
        self.selectedButton          = button;
        
        if (self.buttonSelected) {
            self.buttonSelected(button.tag);
        }
        
        NSString* title              = self.gztitles[button.tag];
        CGFloat sliderWidth          = button.titleLabel.font.pointSize * title.length;
        [self.sliderView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(sliderWidth);
            make.height.mas_equalTo(2);
            make.centerX.equalTo(button);
            make.bottom.equalTo(self).offset(-2);
        }];
        [UIView animateWithDuration:0.25 animations:^{
            [self layoutIfNeeded];
        }];
    }
    
    - (void)setSelectedIndex:(NSInteger)selectedIndex {
        _selectedIndex   = selectedIndex;
        UIButton* button = self.subviews[selectedIndex];
        [self titleButtonClicked:button];
    }
    
    - (void)setGztitles:(NSArray *)gztitles {
        [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
        _gztitles               = gztitles;
        CGFloat width         = [UIScreen mainScreen].bounds.size.width / gztitles.count;
        
        for ( int i           = 0; i<gztitles.count; i++ ) {
            UIButton* titleButton = [self titleButton:gztitles[i]];
            titleButton.tag       = i;
            [self addSubview:titleButton];
            [titleButton mas_makeConstraints:^(MASConstraintMaker *make) {
                make.top.bottom.equalTo(self);
                make.left.equalTo(self).offset(width * i);
                make.width.mas_equalTo(width);
            }];
            if (i != 0) {
                titleButton.selected  = YES;
            } else {
                self.selectedButton   = titleButton;
            }
        }
        UIButton *button      = self.subviews[0];
        NSString *title       = gztitles[0];
        CGFloat sliderWidth   = button.titleLabel.font.pointSize * title.length;
        [self addSubview:self.sliderView];
        [self.sliderView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(sliderWidth);
            make.height.mas_equalTo(4);
            make.centerX.equalTo(button);
            make.bottom.equalTo(self).offset(-3);
        }];
        [self layoutIfNeeded];
    }
    
    - (UIButton *)titleButton:(NSString *)title {
        UIButton* titleButton       = [[UIButton alloc] init];
        [titleButton addTarget:self action:@selector(titleButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
        titleButton.titleLabel.font = [UIFont systemFontOfSize:15];
        [titleButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        [titleButton setTitleColor:[UIColor grayColor] forState:UIControlStateSelected];
        [titleButton setTitle:title forState:UIControlStateNormal];
        return titleButton;
    }

自定义的信息页面

- (void)layoutSubviews {
        [super layoutSubviews];
        [self addSubview:self.nameLabel];
        [self addSubview:self.Address];
        [self addSubview:self.infoLabel];
        [self addSubview:self.editInfoButton];
    }

简单的添加属性就好

UITableView的话也是简单的TableView

最后到我们的控制器页面，在这个页面我们只负责

UITableViewDelegate 的东西，数据我们都在自定义的页面处理，减少控制器页面的代码量，

在控制器中我们就是将自定义的View组合起来

首先是整体一个ScrollView 然后在其上面添加我们事先定义的所有控件。

GZContentScrollView *scrollView           = [[GZContentScrollView alloc] init];
        scrollView.delaysContentTouches           = NO;
        [self.view addSubview:scrollView];
        self.scrollView                           = scrollView;
        scrollView.pagingEnabled                  = YES;
        scrollView.showsVerticalScrollIndicator   = NO;
        scrollView.showsHorizontalScrollIndicator = NO;
        scrollView.delegate                       = self;
        scrollView.contentSize                    = CGSizeMake([UIScreen mainScreen].bounds.size.width * 3, 0);
        UIView *headView                          = [[UIView alloc] init];
        headView.frame               = CGRectMake(0, 0, 0, GZHeadViewHeight + GZTitleHeight);
        
        GZTableView1 *gzTableView1 = [[GZTableView1 alloc] init];
        gzTableView1.delegate            = self;
        gzTableView1.separatorStyle      = UITableViewCellSeparatorStyleNone;
        self.GZTableView1                = gzTableView1;
        gzTableView1.tableHeaderView     = headView;
        [scrollView addSubview:gzTableView1];
        [gzTableView1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(scrollView);
            make.width.mas_equalTo([UIScreen mainScreen].bounds.size.width);
            make.top.equalTo(self.view);
            make.bottom.equalTo(self.view);
        }];
        
        GZTableView2 *gzTableView2= [[GZTableView2 alloc] init];
        gzTableView2.delegate            = self;
        gzTableView2.separatorStyle      = UITableViewCellSeparatorStyleNone;
        self.GZTableView2                = gzTableView2;
        gzTableView2.tableHeaderView     = headView;
        [scrollView addSubview:gzTableView2];
        [gzTableView2 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(scrollView).offset([UIScreen mainScreen].bounds.size.width);
            make.width.equalTo(gzTableView1);
            make.top.bottom.equalTo(gzTableView1);
        }];
        
        GZTableView3 *gzTableView3 = [[GZTableView3 alloc] init];
        gzTableView3.delegate            = self;
        gzTableView3.separatorStyle      = UITableViewCellSeparatorStyleNone;
        self.GZTableView3                = gzTableView3;
        gzTableView3.tableHeaderView     = headView;
        [scrollView addSubview:gzTableView3];
        [gzTableView3 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(scrollView).offset([UIScreen mainScreen].bounds.size.width * 2);
            make.width.equalTo(gzTableView1);
            make.top.bottom.equalTo(gzTableView1);
        }];
    }

头部视图添加

视图都添加完毕之后，要实现滑动事件，我们必须要进行下面的活动：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
        if (scrollView == self.scrollView || !scrollView.window) {
            return;
        }
        CGFloat offsetY      = scrollView.contentOffset.y;
        CGFloat originY      = 0;
        CGFloat otherOffsetY = 0;

判断ScrollView 是因为 我们这个页面有两种滑动事件

至此，简书个人中心页面的功能都已实现。

#### 三、运行效果 ####

运行效果如下图显示：

![视.gif][.gif]

#### 代码下载：[http://www.demodashi.com/demo/11226.html][http_www.demodashi.com_demo_11226.html] ####

#### 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_11226.html]: http://www.demodashi.com/demo/11226.html
[10C03A6D50280579F0F630A5A4CFC5E0.jpg]: /images/20220531/91d32f31b1f04154a54ac7937b036a7c.png
[2017-08-16 12.00.29.png]: /images/20220531/e53689319c1042d78fb9549fd271155c.png
[.gif]: /images/20220531/f2de7db9963e49a6a8076b0d9b36fbdd.png