2019-01-15 仿抖音首页
2019-01-15 本文已影响2人
zxh123456
最近app仿抖音改版。功能需求:
- 首页是个segment,三个选项卡:关注、推荐、附近。
- 首页右划进入搜索页面。
- 首页的推荐页左划进入个人中心。
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