Dota2APP--第二天

一、今天的任务

1）自定义标签栏控制器

2）自定义导航栏控制器

3）在新特性界面播放音频

1、第一个任务：自定义标签栏控制器

原因：默认的TabbarViewController不能满足项目的需求。

1）自定义TabBarButton

button的内部构造是由一个label和imageView组成，所以自定义TabBarButton就是自定义label和ImageView的位置。

代码如下：

#pragma mark - 覆盖父类的2个方法
#pragma mark - 设置按钮标题的frame
- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGFloat titleY = contentRect.size.height * FZHTabBarImageRatio;
    CGFloat titleH = contentRect.size.height - titleY;
    CGFloat titleW = contentRect.size.width;
    return CGRectMake(, titleY, titleW,  titleH);
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageH = contentRect.size.height * FZHTabBarImageRatio;
    CGFloat imageW = contentRect.size.width;
    return CGRectMake(, , imageW,  imageH);
}

因为使我们自定义的button所以他并没有系统的点击方法，所以我们要给button添加观察者来监听他的点击事件来做切换视图的操作。

代码如下：

- (void)setItem:(UITabBarItem *)item
{
    _item = item;
    //1.利用kvo监听item属性的改变
    [item addObserver:self forKeyPath:@"title" options: context:nil];
    [item addObserver:self forKeyPath:@"image" options: context:nil];
    [item addObserver:self forKeyPath:@"selectedImage" options: context:nil];
    //2.属性赋值
    [self observeValueForKeyPath:nil ofObject:nil change:nil context:nil];
}

KVO监听必须在监听器释放的时候，移除监听操作， 通知也得在释放的时候移除监听

代码如下：

-(void)dealloc
{
    [self.item removeObserver:self forKeyPath:@"title"];
    [self.item removeObserver:self forKeyPath:@"image"];
    [self.item removeObserver:self forKeyPath:@"selectedImage"];
}

监听方法如下：

/**
 *  监听item的属性值改变
 *
 *  @param keyPath 哪个属性改变了
 *  @param object  哪个对象的属性改变了
 */
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    //1.设置文字
    [self setTitle:self.item.title forState:UIControlStateSelected];
    [self setTitle:self.item.title forState:UIControlStateNormal];
    //2.设置图片
    [self setImage:self.item.image forState:UIControlStateNormal];
    [self setImage:self.item.selectedImage forState:UIControlStateSelected];

}

至此完成自定义TabBarButton。

2）自定义tabbar

因为tabbar是添加在controller上面的，我们的点击事件也是发生在controller上面，那我们如何知道点击了那个按钮呢？我们可以通过代理模式来完成这一功能，让控制器做tabbar的代理，当用户点击控制器的tabbar上面的按钮时，它会通过代理的方式来告诉tabbar点击了那个按钮，这样我们就可以做相应的操作了。

.h文件代码如下：

 #import <UIKit/UIKit.h>
 #import "FZHTabbarButton.h"
 @class FZHTabbar;
 @protocol FZHTabbarDelegate <NSObject>

 @optional
 - (void)tabBar:(FZHTabbar *)tabBar didSelectedButtonFrom:(int)from to:(int)to;
 - (void)tabBardidPlusButton:(FZHTabbar *)tabBar;

 @end
 @interface FZHTabbar : UIView
 @property (nonatomic,strong)NSMutableArray * tabbarButtons;
 @property (weak,nonatomic)FZHTabbarButton * selectedButton;
 - (void)addTabbarButtonWithItem:(UITabBarItem *)item;
 @property (nonatomic,weak)id<FZHTabbarDelegate>delegate;
 @end

.m文件代码如下：

 #import "FZHTabbar.h"
 #import "FZHTabbarButton.h"
 @implementation FZHTabbar

 - (NSMutableArray *)tabbarButtons
 {
     if (_tabbarButtons == nil) {
         _tabbarButtons = [NSMutableArray array];
     }
     return _tabbarButtons;

 }
 - (id)initWithFrame:(CGRect)frame
 {
     self = [super initWithFrame:frame];
     if (self) {

     }
     return self;
 }
 - (void)addTabbarButtonWithItem:(UITabBarItem *)item
 {
     //1.创建按钮
     FZHTabbarButton * button=[[FZHTabbarButton alloc]init];
     [self.tabbarButtons addObject:button];
     //2.设置数据
     button.item=item;

     //3.添加按钮
     [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
     [self addSubview:button];
     //4.默认选中
     if (self.tabbarButtons.count==) {

         [self buttonClick:button];
     }
 }
 -(void)buttonClick:(FZHTabbarButton *)button
 {
     //1.通知代理
     if ([self.delegate respondsToSelector:@selector(tabBar:didSelectedButtonFrom:to:)]) {
         [self.delegate tabBar:self didSelectedButtonFrom:(int)self.selectedButton.tag to:(int)button.tag];
     }
     //2.控制器选中按钮
     self.selectedButton.selected=NO;
     button.selected=YES;
     self.selectedButton=button;
 }
 - (void)layoutSubviews
 {
     [super layoutSubviews];

     //1. 3个按钮
     CGFloat buttonW=self.frame.size.width/self.subviews.count;
     CGFloat buttonH=self.frame.size.height;
     CGFloat buttonY = ;

     for (int index=; index<self.tabbarButtons.count; index++) {

         //1.取出按钮
         FZHTabbarButton * button=self.tabbarButtons[index];
         //2.设置按钮的frame
         CGFloat buttonX=index * buttonW;

         button.frame=CGRectMake(buttonX, buttonY, buttonW, buttonH);
         //3.绑定tag
         button.tag=index;
     }

 }

至此，自定义tabbar部分完成，做到这自定义TabBarViewController也已完成，只剩下在控制器中的初始化操作。

代码如下：

 /**
  *  初始化tabbar
  */
 - (void)setupTabbar
 {
     FZHTabbar * customTabBar = [[FZHTabbar alloc] init];
     customTabBar.frame = self.tabBar.bounds;
     customTabBar.delegate = self;
     [self.tabBar addSubview:customTabBar];
     self.customTabBar = customTabBar;
 }
 /**
  *  监听tabbar按钮的改变
  *  @param from   原来选中的位置
  *  @param to     最新选中的位置
  */
 - (void)tabBar:(FZHTabbar *)tabBar didSelectedButtonFrom:(int)from to:(int)to
 {
     self.selectedIndex = to;
 }

 -(void)initSubVC
 {
     FZHHomeViewController * home=[[FZHHomeViewController alloc]init];
     [self setupChildVC:home Title:@"英雄" imageName:@"hero" selectedImageName:@"hero_selected"];

     FZHVideoViewController * video=[[FZHVideoViewController alloc]init];
     [self setupChildVC:video Title:@"视频" imageName:@"video" selectedImageName:@"video_selected"];

     FZHAboutMeViewController * aboutMe = [[FZHAboutMeViewController alloc]init];
     [self setupChildVC:aboutMe Title:@"个人" imageName:@"me"  selectedImageName:@"me_selected"];

 }
 //初始化所有子控制器
 -(void)setupChildVC:(UIViewController *)childVC Title:(NSString *)title imageName:(NSString *)imageName selectedImageName:(NSString *)selectedImageName
 {
     //1.设置标题
     childVC.title=title;
     //2.设置图片
     childVC.tabBarItem.image=[UIImage imageNamed:imageName];
     //3.设置选中图片
     childVC.tabBarItem.selectedImage=[UIImage imageNamed:selectedImageName];
     //不在渲染图片
     childVC.tabBarItem.selectedImage=[[UIImage imageNamed:selectedImageName]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
     //4.添加导航控制器
     FZHNaviViewController * Nav=[[FZHNaviViewController alloc]initWithRootViewController:childVC];
     [self addChildViewController:Nav];
     //5.添加tabbar内部的按钮
     [self.customTabBar addTabbarButtonWithItem:childVC.tabBarItem];
 }

注意点：一定要先删除系统自带的tabbar代码如下：

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    //删除系统自动生成的UITabBarButton
    for (UIView * child in self.tabBar.subviews) {
        if ([child isKindOfClass:[UIControl class]]) {
            [child removeFromSuperview];
        }
    }
}

2、自定义导航栏控制器

代码如下：

 + (void)initialize
 {
     //1.设置导航栏主题
     [self setupNavBarTheme];

     //2.设置导航栏按钮的主题
     [self setupBarButtonItemTheme];
 }
 /**
  *  设置导航栏按钮主题
  */
 +(void)setupBarButtonItemTheme
 {
     UIBarButtonItem * item=[UIBarButtonItem appearance];
     //设置文字属性
     NSMutableDictionary * textAttrs=[NSMutableDictionary dictionary];

     //字体颜色
     textAttrs[NSForegroundColorAttributeName] = [UIColor blackColor];
     //阴影大小
     // textAttrs[NSShadowAttributeName] = [NSValue valueWithUIOffset:UIOffsetZero];
     textAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:];
     //不能点击的状态
     NSMutableDictionary * DisableTextAttrs=[NSMutableDictionary dictionary];
     DisableTextAttrs[NSForegroundColorAttributeName] = [UIColor blackColor];
     [item setTitleTextAttributes:DisableTextAttrs forState:UIControlStateDisabled];
     //普通和高亮的状态
     [item setTitleTextAttributes:textAttrs forState:UIControlStateNormal];
     [item setTitleTextAttributes:DisableTextAttrs forState:UIControlStateHighlighted];

 }
 /**
  *  设置导航栏主题
  */
 +(void)setupNavBarTheme
 {
     //取出appearance对象
     UINavigationBar * navBar=[UINavigationBar appearance];
     navBar.tintColor = [UIColor blackColor];
     // 设置标题属性
     NSMutableDictionary *textAttrs = [NSMutableDictionary dictionary];
     //字体颜色
     textAttrs[NSForegroundColorAttributeName] = [UIColor blackColor];
     //阴影大小
 #warning 设置阴影
     //textAttrs[NSShadowAttributeName] = [NSValue valueWithUIOffset:UIOffsetZero];
     textAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:];
     [navBar setTitleTextAttributes:textAttrs];

 }
 -(void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
 {
     if (self.viewControllers.count>) {
         viewController.hidesBottomBarWhenPushed = YES;
     }
     [super pushViewController:viewController animated:animated];
 }

至此完成了自定义导航栏和标签栏。

3、播放音频

1）导入AVFoundation/AVFoundation框架

2）编写代码如下：

    NSURL * mp3Url = [[NSBundle mainBundle] URLForResource:@"Dota2.mp3" withExtension:nil];
    AVAudioPlayer * player = [[AVAudioPlayer alloc]initWithContentsOfURL:mp3Url error:nil];

    [player prepareToPlay];

    player.delegate = self;

    self.player = player;

    [self.player play];

到这，以上的三个部分全部实现。

代码下载地址：https://github.com/fengzhihao123/FZHDota2