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(0, titleY, titleW,  titleH);
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageH = contentRect.size.height * FZHTabBarImageRatio;
    CGFloat imageW = contentRect.size.width;
    return CGRectMake(0, 2, imageW,  imageH);
}

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

代码如下：

- (void)setItem:(UITabBarItem *)item
{
    _item = item;
    //1.利用kvo监听item属性的改变
    [item addObserver:self forKeyPath:@"title" options:0 context:nil];
    [item addObserver:self forKeyPath:@"image" options:0 context:nil];
    [item addObserver:self forKeyPath:@"selectedImage" options:0 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==1) {
        
        [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 = 0;
    
    for (int index=0; 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:17];
    //不能点击的状态
    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:19];
    [navBar setTitleTextAttributes:textAttrs];
    
}
-(void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    if (self.viewControllers.count>0) {
        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