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