iOS开发-仿微博个人主页效果

作者: Kegem | 来源:发表于2017-03-16 15:28 被阅读2643次

在仿微博主页时,对其做了小小的改动,效果怎样,看大家项目的需求了:
分段控制器用的是YUSegment;
头部下拉放大使用的HFStretchableTableHeaderView,这个虽然很久了,但确实很实用;
由于是demo,所以使用的是自带的UIPageViewController,对于这个控件的一些缺陷,大家勿喷,根据自己需求更换即可;
在我的demo中比较重要的一个方法:

///允许同时识别多个手势
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    return YES;
}

由于我的主控制器使用的是UItableView,在TableView的一个cell里放了三个子控制器,来实现的,实现这个效果有很多种方法,我这个其一,三个子控制器都是继承一个BaseTableViewController,主要是方便用来判断该控制器是否可以滑动:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //下拉放大 必须实现
    [_stretchableTableHeaderView scrollViewDidScroll:scrollView];
    
    //计算导航栏的透明度
    UIImage *image = [UIImage imageNamed:@"pc_bg"];
    CGFloat minAlphaOffset = 0;
    CGFloat maxAlphaOffset = image.size.height-64;
    CGFloat offset = scrollView.contentOffset.y;
    CGFloat alpha = (offset - minAlphaOffset) / (maxAlphaOffset - minAlphaOffset);
    _barImageView.alpha = alpha;

    //根据导航栏透明度设置title
    if (alpha > 0.5) {
        self.title = @"name";
    } else {
        self.title = @"";
    }

    //子控制器和主控制器之间的滑动状态切换
    CGFloat tabOffsetY = [_tableView rectForSection:0].origin.y-64;
    if (scrollView.contentOffset.y >= tabOffsetY) {
        scrollView.contentOffset = CGPointMake(0, tabOffsetY);
        if (_canScroll) {
            //通知子控制器可以滑动了,其实这个通知是可以省掉了
            [[NSNotificationCenter defaultCenter] postNotificationName:@"kScrollToTopNtf" object:@1];
            _canScroll = NO;
            //在cell中告诉子控制器可以滑动了
            self.contentCell.canScroll = YES;
        }
    } else {
        if (!_canScroll) {
            scrollView.contentOffset = CGPointMake(0, tabOffsetY);
        }
    }
}

另外解决pageView左右滑动时,会带动主控制器上下滑动,我的实现原理是监听pageView中的手势:

///pageView
- (void)customPageView {
    NSDictionary *option = [NSDictionary dictionaryWithObject:[NSNumber numberWithInt:UIPageViewControllerSpineLocationMin] forKey:UIPageViewControllerOptionSpineLocationKey];
    self.pageViewCtrl = [[UIPageViewController alloc]
                         initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
                         navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
                         options:option];
    
    self.pageViewCtrl.dataSource = self;
    self.pageViewCtrl.delegate = self;
    
    PersonalLeftViewController *ctrl1 = [[PersonalLeftViewController alloc] init];
    PersonalMiddleViewController *ctrl2 = [[PersonalMiddleViewController alloc] init];
    PersonalRightViewController *ctrl3 = [[PersonalRightViewController alloc] init];
    
    self.dataArray = @[ctrl1,ctrl2,ctrl3].mutableCopy;
    
    [self.pageViewCtrl setViewControllers:@[self.dataArray[0]]
                                direction:UIPageViewControllerNavigationDirectionForward
                                 animated:YES
                               completion:nil];
    
    
    [self.contentView addSubview:self.pageViewCtrl.view];
    
    for (UIView *view in self.pageViewCtrl.view.subviews) {
        if ([view isKindOfClass:[UIScrollView class]]) {
            //监听拖动手势
            [view addObserver:self
                               forKeyPath:@"panGestureRecognizer.state"
                                  options:NSKeyValueObservingOptionNew
                                  context:nil];
        }
    }
    
    [self.pageViewCtrl.view mas_makeConstraints:^(MASConstraintMaker* make) {
        make.edges.equalTo(self.contentView);
    }];
}

//监听拖拽手势的回调
- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary<NSKeyValueChangeKey,id> *)change
                       context:(void *)context {
    if (((UIScrollView *)object).panGestureRecognizer.state == UIGestureRecognizerStateChanged) {
        NSLog(@"bottomSView 滑动了,让主控制器不允许滑动");
        [[NSNotificationCenter defaultCenter] postNotificationName:@"PageViewGestureState" object:@"changed"];
    } else if (((UIScrollView *)object).panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
        NSLog(@"结束拖拽");
        [[NSNotificationCenter defaultCenter] postNotificationName:@"PageViewGestureState" object:@"ended"];
    }
}

重要的部分就这么多,其实很简单,只是我写博客的时间不长,写的有点乱,还是接上代码demo吧:
demo:https://github.com/hkjin/PersonalHomePageDemo

效果图

Untitled.gif

下面接一个朋友对于导航栏渐变做的方案,当然啦,对于导航渐变大家应该有很多的解决方案,我个人觉得这位朋友的方案不错,贴出来让大家参考,感谢@李乾坤David
下面贴出他对导航处理的代码:@Liqiankun

相关文章

网友评论

  • Kegem:https://www.jianshu.com/p/8e6dfb547061 这个是我后来重新写的一个方案,比这个要简单很多,也容易适配,很简单就能集成到项目中...
  • luin4:作者还在吗? 我想问下你的这个上拉加载应该改哪里呢?现在上拉还是page子控制器
    luin4:@Kegem 感谢你的结构,我先写在子控制器了,感谢:+1:
    luin4:@Kegem 你的这种结构能做在主控制器里吗
    Kegem:@凹凸曼打小怪兽丶 上啦肯定是在子控制器,下拉应该在主控制器,应该都是这样做的吧
  • 7ac161573ae3:如果数据为空呢 不现实单元格还能实现上拉吗
  • 亦有时:请问,点击某一行的时候,如何push到下一页呢?
    Kegem:@亦有时 在哪个控制器点的就在哪个控制器里进行跳转,这个和分页pagectrl没什么区别啊
    Kegem:@亦有时 具体应该说是在当前控制器里进行跳转,子控制器里要获取当前控制器
    Kegem:@亦有时 在子控制器里进行跳转
  • 李乾坤David:这个实现还是有点小问题,就是如果从一个NavigationController跳入主页,然后当NavigationBar为半透明的时候返回上一个Controller会造成上一个NavigationBar也是半透明的。
    李乾坤David:@Kegem 我有个新的方案!等会PR一下:smile:
    Kegem:大多数的解决方案是在主页即将消失的时候,把导航栏的重新设置为项目默认的颜色和透明度
    - (void)viewWillDisappear:(BOOL)animated
    在这个方法里进行设置
    Kegem:@李乾坤David 这个肯定啦,因为你从其他页面push进主页,导航栏是同一个,你要在主页消失的时候重新设置为不透明就好啦
  • c2fffd2b0090:bug太多了···
    c2fffd2b0090:@Kegem cell里面观察者没有移除 会crash。。。
    Kegem:能说一下你那边发现的bug吗?
    Kegem:额。我这边运行很好呢。。ios8以上

本文标题:iOS开发-仿微博个人主页效果

本文链接:https://www.haomeiwen.com/subject/qvadnttx.html