项目实战 网易彩票2

一 竞技场栏目实现

  • 自定义控制器的view
- (void)loadView
{
    UIImageView *bgV = [[UIImageView alloc] initWithFrame:XMGKeyWindow.bounds];

    bgV.image = [UIImage imageNamed:@"NLArenaBackground"];

    // 一定要运行用户交互
    bgV.userInteractionEnabled = YES;

    self.view = bgV;
}
  • 导航条背景图片XMGArenaNavController
+ (void)initialize
{
    // 设置导航条背景图片
    UINavigationBar *bar = [UINavigationBar appearanceWhenContainedIn:self, nil];

    UIImage *image =  [UIImage imageNamed:@"NLArenaNavBar64"];
    image =[image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];

    [bar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}
  • 设置XMGArenaViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置导航条的titleView内容
    UISegmentedControl *segContontrol = [[UISegmentedControl alloc] initWithItems:@[@"足球",@"篮球"]];

    // 设置UISegmentedControl选中的图片
    [segContontrol setBackgroundImage:[UIImage imageNamed:@"CPArenaSegmentSelectedBG"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

    // 正常的图片
    [segContontrol setBackgroundImage:[UIImage imageNamed:@"CPArenaSegmentBG"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [segContontrol setTintColor:[UIColor colorWithRed:0 green:142/255.0 blue:143/255.0 alpha:1]];

    // 设置选中的文字颜色
    [segContontrol setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]} forState:UIControlStateSelected];
   // 默认选中第一个 
    segContontrol.selectedSegmentIndex = 0;

    self.navigationItem.titleView = segContontrol;    
}

二 我的彩票栏目实现

- (void)viewDidLoad {  // 控制器 view 加载完
    [super viewDidLoad];
    // 获取按钮的背景图片
    UIImage *image =  _loginBtn.currentBackgroundImage;
    image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
    [_loginBtn setBackgroundImage:image forState:UIControlStateNormal];
}
// 设置导航条的左边按钮
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setTitle:@"客服" forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"FBMM_Barbutton"] forState:UIControlStateNormal];

    // 根据按钮的文字和图片,自动计算按钮尺寸,
    [btn sizeToFit];

    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:btn];

    // 设置导航条右边的按钮
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageWithOriginRenderingName:@"Mylottery_config"] style:UIBarButtonItemStyleBordered target:self action:@selector(setting)];

三 发现栏目实现

  • tableviewcell

    • 设置 Style:Grouped
    • 设置 Content:Staic Cells (静态 cell)
  • cell 动画设置

// 当一个cell即将显示的时候就会调用这个方法
// 通常这个方法,用来做cell的动画
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.transform = CGAffineTransformMakeTranslation(self.view.width, 0);

    [UIView animateWithDuration:0.5 animations:^{
        cell.transform = CGAffineTransformIdentity;
    }];
}
  • 每次进入页面都能执行动画
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    [self.tableView reloadData];
}
  • 点击 cell 跳转控制器XMGBuyViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *titleBtn = [XMGTitleButton buttonWithType:UIButtonTypeCustom];
    _titleBtn = titleBtn;
    [titleBtn setTitle:@"全部采种" forState:UIControlStateNormal];

    [titleBtn setImage:[UIImage imageNamed:@"YellowDownArrow"] forState:UIControlStateNormal];

    [titleBtn sizeToFit];

    self.navigationItem.titleView = titleBtn;
}
  • 点击修改文字
    • 重写 title 方法
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 [_titleBtn setImage:nil forState:UIControlStateNormal];

//    [_titleBtn setTitle:@"全部彩种全部彩种" forState:UIControlStateNormal];
//    [_titleBtn sizeToFit];
}
  • 修改子控件的位置(文字和图片换位置)

    • 方法1

      // 设置按钮UIImageView的位置
      - (CGRect)imageRectForContentRect:(CGRect)contentRect
      
      // 设置按钮内部UILabel的位置
      - (CGRect)titleRectForContentRect:(CGRect)contentRect
      
    • 方法2

// 布局子控件
- (void)layoutSubviews
{
    [super layoutSubviews];

    if (self.titleLabel.x > self.imageView.x) {
        // 交换两个子控件的位置
        self.titleLabel.x = self.imageView.x;

        NSLog(@"titleLabel-%f",self.titleLabel.x);

        self.imageView.x = CGRectGetMaxX(self.titleLabel.frame);

        NSLog(@"imageView-%f",self.imageView.x);

    }   
}
  • 重写方法,添加额外功能
// 思想:如果以后系统自带的功能不满足需求,就重写这个方法,添加额外的功能,一定要记得还原之前的功能
- (void)setTitle:(NSString *)title forState:(UIControlState)state
{
    [super setTitle:title forState:state];  
    [self sizeToFit];
}

- (void)setImage:(UIImage *)image forState:(UIControlState)state
{
    [super setImage:image forState:state];
    [self sizeToFit];
}
  • 隐藏底部条

    • 只能隐藏系统的底部条,不能隐藏自定义条
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated]; 
    // 移除系统tabBar上自带的按钮
    for (UIView *childView in self.tabBar.subviews) {

        if (![childView isKindOfClass:[XMGTabBar class]]) {
            [childView removeFromSuperview];
        }     
    }
}

四 设置返回按钮

  • 统一设置返回 XMGNavigationController
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    // viewController:栈顶控制器,导航条的内容是由栈顶控制器

    // 设置导航条左边按钮,非根控制器才需要
    if (self.childViewControllers.count != 0) { // 非根控制器 
       viewController.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageWithOriginRenderingName:@"NavBack"] style:UIBarButtonItemStyleBordered target:self action:@selector(back)];
    }

    [super pushViewController:viewController animated:animated];
}
- (void)back
{
    [self popViewControllerAnimated:YES];
}
  • 滑动手势,有滑动返回功能
    • 清掉代理可以清除滑动返回功能
- (void)viewDidLoad {
    [super viewDidLoad];
    // 前提条件,覆盖了系统的返回按钮,就不会有滑动返回功能。 
    _popDelegate = self.interactivePopGestureRecognizer.delegate; // 记录代理

    self.delegate = self; 
}
#pragma mark - UINavigationControllerDelegate
// 监听什么时候回到跟控制器
- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    if (viewController == self.childViewControllers[0]) { // 根控制器
        self.interactivePopGestureRecognizer.delegate = _popDelegate;
    }else{
        // 实现导航控制器的滑动返回
        self.interactivePopGestureRecognizer.delegate = nil;
    }
    NSLog(@"%@",viewController);
}
  • 简单实现滑动返回功能(不常用)
+ (void)initialize
{
     …… ……
 // 统一设置导航条按钮的颜色
    [bar setTintColor:[UIColor whiteColor]];

    // 获取UIBarButtonItem
    UIBarButtonItem *item = [UIBarButtonItem appearanceWhenContainedIn:self, nil];

    // 设置导航条返回按钮的文字的位置
    [item setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -64) forBarMetrics:UIBarMetricsDefault];    
}

五 滑动返回全屏实现

  • 默认系统滑动功能只能滑动左边边缘

  • 获取成员变量,知道属性名,怎么通过运行时机制获取属性值?

    • 首先得要获取属性的名,通过KVC获取值
    • 获取target,需要使用运行时机制,遍历出类里面所有属性名
    • 利用运行时获取属性名,只能获取当前类下的所有属性名,并不能获取它的子类或者父类。
    • class_copyIvarList(<__unsafe_unretained Class cls>, <unsigned int *outCount>)
      • copyIvarList:获取成员属性列表
      • Class:获取哪个类下面的属性
      • outCount:这个类有多少个成员属性,成员属性的总数
- (void)viewDidLoad {
    [super viewDidLoad];

    // 系统的滑动手势触发的时候,会调用Target的action,去做滑动返回的事情(action), 
    // 获取系统滑动返回的target和action
    UIScreenEdgePanGestureRecognizer *gesture = self.interactivePopGestureRecognizer;

 NSArray *targets  =  [gesture valueForKeyPath:@"_targets"];

    id gestureRecognizer = targets[0];

    id target = [gestureRecognizer valueForKeyPath:@"_target"];

    self.interactivePopGestureRecognizer.enabled = NO;

    // 借用系统的滑动手势的功能,当触发自己的滑动手势的时候,调用系统的滑动返回功能
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:target action:@selector(handleNavigationTransition:)];

    pan.delegate = self;

    [self.view addGestureRecognizer:pan];
}
// 如果返回no,表示不触发这个手势
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    // 只有非根控制器才能拥有滑动返回功能
    return self.childViewControllers.count != 1;
}

六 引导页设置

  • 新特性业务
    • 先判断当前有没有最新版本,有就进入引导页提示
 // 最新的版本保存到info.plist文件
    NSString *curVersion = [NSBundle mainBundle].infoDictionary[@"CFBundleShortVersionString"];

    // 获取上一次保存的最新版本号
    NSString *lastVersion = [[NSUserDefaults standardUserDefaults] objectForKey:"version"];

    UIViewController *rootVc;

    if ([curVersion isEqualToString:lastVersion]) { // 相等
        // 没新版本,进入主框架界面
        // 创建tabBarVc
        rootVc  = [[XMGTabBarController alloc] init];

    }else{ // 表示有最新的版本号,进入新特性界面

        rootVc = [[UIViewController alloc] init];
        rootVc.view.backgroundColor = [UIColor greenColor];

        // 保存当前的最新的版本号
        [[NSUserDefaults standardUserDefaults] setObject:curVersion forKey:"version"];     
    }
  • UICollectionView实现新特性页面

    • 1.必须要设置布局参数
    • 2.注册cell
    • 3.自定义cell
  • 重写 init 方法

- (instancetype)init
{   
    // 创建一个流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    // 设置cell的尺寸
      layout.itemSize = [UIScreen mainScreen].bounds.size;

    // 设置滚动的方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    // 行间距
    layout.minimumLineSpacing = 0;

    // 设置cell之间的间距
    layout.minimumInteritemSpacing = 0;

   // 组间距
// layout.sectionInset = UIEdgeInsetsMake(100, 20, 0, 30);

    return [super initWithCollectionViewLayout:layout];
}
static NSString *ID = @"cell";
- (void)viewDidLoad {
    [super viewDidLoad];

    // 在UICollectionViewController中self.view != self.collectionView

    // 注册cell
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
}
  • Items对应cell
// 返回有多少个cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 12;
}
// 返回每一个cell长什么样
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{  
    // 从缓存池里取
    // UICollectionViewCell 没有UIImageView
    XMGNewFeatureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];

    NSString *imageName = [NSString stringWithFormat:@"guide%ldBackground",indexPath.item + 1];
    cell.image = [UIImage imageNamed:imageName];

    return cell;
}
  • 初始化
- (void)setUp
{
    self.collectionView.bounces = NO;

    self.collectionView.showsHorizontalScrollIndicator = NO;

    self.collectionView.pagingEnabled = YES;

    self.collectionView.delegate = self;
}
  • 减速完成的时候调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{   
    // 移动子控件的位置,并且做动画
    NSLog(@"%f",scrollView.contentOffset.x);

    // 获取scrollView滚动的X
    CGFloat offsetX = scrollView.contentOffset.x;

    // 计算偏移量的差值
    CGFloat delta = offsetX - _lastOffsetX;

    // 平移子控件
    _guide.x += 2 * delta;

    [UIView animateWithDuration:0.25 animations:^{
        _guide.x -= delta;
    }];
    // 计算页数
    int page = offsetX / scrollView.width + 1;
    // 切换子控件的显示
    NSString *imageName = [NSString stringWithFormat:@"guide%d",page];
    _guide.image = [UIImage imageNamed:imageName];

    _lastOffsetX = offsetX;
}
  • 添加子控件
- (void)setUpChildViewLayout
{
    // guide
    UIImageView *guide = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guide1"]];
    _guide = guide;
    guide.x += 50;
    [self.collectionView addSubview:guide];

    // largerText
    UIImageView *largerText = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideLargeText1"]];
    largerText.center = CGPointMake(self.view.width * 0.5, self.view.height * 0.7);
    [self.collectionView addSubview:largerText];

    // smallText
    UIImageView *smallText = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideSmallText1"]];
    smallText.center = CGPointMake(self.view.width * 0.5, self.view.height * 0.8);
    [self.collectionView addSubview:smallText];

    // guideLine
    UIImageView *guideLine = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"guideLine"]];
    guideLine.x -= 150;
    [self.collectionView addSubview:guideLine];
}
  • 自定义 cell样式
- (void)setImage:(UIImage *)image
{
    _image = image;

    self.imageView.image = image;
}
- (UIImageView *)imageView
{
    if (_imageView == nil) {
        UIImageView *imageV = [[UIImageView alloc] initWithFrame:self.bounds];

        [self.contentView addSubview:imageV];

        _imageView = imageV;
    }
    return _imageView;
}

你可能感兴趣的:(Collection,导航条,返回功能)