美文网首页视图控件高级UI
2019-01-15 仿抖音首页

2019-01-15 仿抖音首页

作者: zxh123456 | 来源:发表于2019-01-15 12:42 被阅读2次

最近app仿抖音改版。功能需求:

  1. 首页是个segment,三个选项卡:关注、推荐、附近。
  2. 首页右划进入搜索页面。
  3. 首页的推荐页左划进入个人中心。
ScreenRecording_01-15-2019 11-36-01.gif

app架构:抽屉+TabBar,主抽屉是TabBar,左抽屉是一个搜索页面。
抽屉用的是第三方MMDrawerController
主要代码如下:

首页架构

tabBar首页控制器采用一个segment,包含三个子控制器。外面再包装一个navigationController。

首页

- (void)viewDidLoad {
    [super viewDidLoad];
   .........
    //顶部区域
    UISegmentedControl *seg = [[UISegmentedControl alloc]initWithItems:@[@"关注",@"推荐",@"附近"]];
    seg.selectedSegmentIndex = 1;
    _selectedIndex = 1;
    self.seg = seg;
    [seg setTintColor:[UIColor clearColor]];
    [seg setTitleTextAttributes:@{
                                  NSForegroundColorAttributeName : [UIColor whiteColor],
                                  NSFontAttributeName : [UIFont boldSystemFontOfSize:20]
                                  } forState:UIControlStateSelected];
    [seg setTitleTextAttributes:@{
                                  NSForegroundColorAttributeName : [UIColor lightGrayColor],
                                  NSFontAttributeName : [UIFont boldSystemFontOfSize:15]
                                  } forState:UIControlStateNormal];
    seg.frame = CGRectMake((ScreenWidth - 200 ) * 0.5, SafeAreaTopHeight - 44, 200, 44);//x、y可以设为0,0 效果一样
    self.navigationItem.titleView = seg;
    [seg addTarget:self action:@selector(homePageSelected:) forControlEvents:UIControlEventValueChanged];
    //搜索按钮
 .........
    //设置子控制器
    XPNewHomePlayViewController *playVC = [XPNewHomePlayViewController new];
    self.playVC = playVC;
    [self addChildViewController:playVC];
    [playVC didMoveToParentViewController:self];
    [self.view addSubview:playVC.view];
    _currentVC = playVC;

    XPNewHomeNearByController *nearByVc = [XPNewHomeNearByController new];
    self.nearByVC = nearByVc;

    XPNewHomeGuanZhuController *guanzhuVc = [XPNewHomeGuanZhuController new];
    self.guanzhuVC = guanzhuVc;
}
#pragma mark - 切换viewController
- (void)changeControllerFromOldController:(UIViewController *)oldController toNewController:(UIViewController *)newController
{
    self.seg.enabled = NO;
    [self addChildViewController:newController];
    /**
     *  切换ViewController
     */
    [self transitionFromViewController:oldController toViewController:newController duration:0.3 options:UIViewAnimationOptionCurveEaseIn animations:^{
        //做一些动画
    } completion:^(BOOL finished) {
        if (finished) {
            //移除oldController,但在removeFromParentViewController:方法前不会调用willMoveToParentViewController:nil 方法,所以需要显示调用
            [oldController willMoveToParentViewController:nil];
            [oldController removeFromParentViewController];
            //新控制器加载进来
            [newController didMoveToParentViewController:self];
            _currentVC = newController;
            self.seg.enabled = YES;
        }else{
            _currentVC = oldController;
            self.seg.enabled = NO;
        }
    }];
}
-(void)homePageSelected:(UISegmentedControl *)seg{
    ......
    _selectedIndex = seg.selectedSegmentIndex;
    switch (seg.selectedSegmentIndex) {
        case 0:{
            NSLog(@"关注");
            if (_currentVC != self.guanzhuVC) {
                [self changeControllerFromOldController:_currentVC toNewController:self.guanzhuVC];
            }
            break;
        }
        case 1:{
            NSLog(@"推荐");
            if (_currentVC != self.playVC) {
                [self changeControllerFromOldController:_currentVC toNewController:self.playVC];
            }
            break;
        }
        case 2:{
            NSLog(@"附近");
            if (_currentVC != self.nearByVC) {
                [self changeControllerFromOldController:_currentVC toNewController:self.nearByVC];
            }
            break;
        }
        default:
            break;
    }
}
-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    //设置抽屉左侧内容
    UIViewController * vc = [[XPNewHomeSearchController alloc] init];
    UINavigationController * navC = [[XPBaseNavigationController alloc] initWithRootViewController:vc];
    MMDrawerController *mmVC = self.tabBarController.mm_drawerController;
    [mmVC setLeftDrawerViewController:navC];
    //设置抽屉手势打开
    self.tabBarController.mm_drawerController.openDrawerGestureModeMask = MMOpenDrawerGestureModeAll ;
    self.tabBarController.mm_drawerController.closeDrawerGestureModeMask = MMCloseDrawerGestureModeAll ;

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(drawerDidShowNewHomePage) name:@"DRAWER_CONTROLLER_DID_SHOW_NEW_HOME_PAGE" object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(drawerDidHiddenNewHomePage) name:@"DRAWER_CONTROLLER_DID_DISAPPEAR_NEW_HOME_PAGE" object:nil];
}
-(void)drawerDidHiddenNewHomePage{
    NSLog(@"viewDisappearAction.....................");
}
-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];

    //清空抽屉左侧内容
    [self.tabBarController.mm_drawerController setLeftDrawerViewController:nil];
    //移除抽屉手势
    self.tabBarController.mm_drawerController.openDrawerGestureModeMask = MMOpenDrawerGestureModeNone ;
    self.tabBarController.mm_drawerController.closeDrawerGestureModeMask = MMCloseDrawerGestureModeNone ;

   ......
}

Appdelegate.m

//tabBarVC
        XPBaseTabBarController * vc = [[XPBaseTabBarController alloc]init];
        XPDrawerController *drawer = [[XPDrawerController alloc]initWithCenterViewController:vc leftDrawerViewController:nil];
        [drawer setShowsShadow:NO];//显示抽屉边缘阴影
        [drawer setRestorationIdentifier:@"MMDrawer"];
        [drawer setMaximumLeftDrawerWidth:ScreenWidth];//设置抽屉展开宽度
        [drawer setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];//手势
        [drawer setCloseDrawerGestureModeMask:MMCloseDrawerGestureModeAll];//手势
        //完成手势的回调,主要是用于界面伪生命周期控制。
        [drawer
            setGestureCompletionBlock:^(MMDrawerController *drawerController, UIGestureRecognizer *gesture) {
                NSLog(@"%@",[gesture class]);
                if (drawerController.openSide == 0) {//中心界面显示
                    NSLog(@"首页界面显示,需要检测是否视频页,是,继续播放操作");
                    [[NSNotificationCenter defaultCenter] postNotificationName:@"DRAWER_CONTROLLER_DID_SHOW_NEW_HOME_PAGE" object:nil];
                }else{
                    NSLog(@"侧边栏显示,需要停止视频播放");
                    [[NSNotificationCenter defaultCenter] postNotificationName:@"DRAWER_CONTROLLER_DID_DISAPPEAR_NEW_HOME_PAGE" object:nil];
                }
        }];
        self.window.rootViewController = drawer;

在首页控制器中,viewAppear时候添加左侧抽屉和手势,disAppear时候删除左侧抽屉和手势,这样就能确保只有在首页才能进行抽屉滑动。

存在一个问题:播放推荐页面左划手势被屏蔽了。

解决方案:重写一个XPDrawerController继承MMDrawerController,重写手势识别。

#import "XPDrawerController.h"

@interface XPDrawerController ()

@end

@implementation XPDrawerController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    if ([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        UIPanGestureRecognizer* pan = (UIPanGestureRecognizer*)gestureRecognizer;
        CGPoint p = [pan translationInView:pan.view];

        NSLog(@"%f",p.y);
         NSLog(@"%f",p.x);

        if(fabs(p.y)<fabs(p.x) && p.x > 0)//判断滑屏方向为横向向左
        {
            return NO;
        }
        return fabs(p.y)<fabs(p.x);
    }
    return YES;
}

@end

相关文章

网友评论

    本文标题:2019-01-15 仿抖音首页

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