仿新浪微博学习笔记02

上次基本完成了tabbar上的按钮和图片的适配了，接下来是接着完善，自定义tabbar，其实这几天在做的过程中，我充分发现封装的好处，不仅能够让你的思维更加紧密，具有统一性，而且在调用创建过程中十分方便，效率很高，当然这是对于有一定使用量的工具类来说。

由于博客是我在做完一个阶段后的再回过来写的，所以我还是决定重新再创建一个工程，将今天做的在巩固一下，同时也记录下来，以后看看也能方便不少。

上周做了关于图片适配的代码实现，这次主要是做TabBar的自定义以及按钮的封装。看一下上次做的效果图：

那么下面就开始做吧。

现在需要自定义tabbar，所以我们要创建一个QLDTabBar，继承自UIView,就放在Main文件夹里的View文件夹里面。

在QLDTabBarViewController.m中进行tabbar的初始化。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 初始化所有的子控制器
    [self setupAllChildViewControllers];

	//初始化自定义tabbar
    [self setupTabbar];

}

/**
 *  初始化所有子控制器
 */
- (void)setupTabbar
{
}

建完之后需要开始进行tabbar自定义了，具体就是在setupTabbar里面实现。

- (void)setupTabbar
{
    QLDTabBar *customTabBar = [[QLDTabBar alloc] init];  //变量名最好不要叫tabBar，因为UITabBar里面本身就存在一个tabBar，所以变量名为customTabBar
    customTabBar.backgroundColor = [UIColor redColor];  //为了和原来的tabbar区分
    
    //将customTabBar加载到系统的tabBar上面，这样的好处是以后在页面上点击跳转到其他界面后customTabBar能够移除
    customTabBar.frame = self.tabBar.bounds;
    [self.tabBar addSubview:customTabBar];
}

将customTabBar加载到系统的tabBar上而不是加载到self.view上，主要是因为界面挑战时系统会自动移除tabBar，而不会移除self.view。

因为有4个按钮，最好是能够有一种方法进行调用，而不是一次性全部加载出来，可以写一个方法，每个按钮上需要的就是图标、选中的图标、以及标题，而这3项恰好就是item，所以参数就可以直接用item进行传值。

所以在QLDTabBar.h中申明：

@interface QLDTabBar : UIView
/**
 *  用item进行传值，每调用一次就可以创建一个tabbar
 */
- (void) addTabBarButtomWithItem: (UITabBarItem *)item;

@end

@implementation QLDTabBar

- (void) addTabBarButtomWithItem: (UITabBarItem *)item
{
    //1.创建按钮，将button加载到QLDTabBar上
    UIButton *button = [[UIButton alloc] init];
    [self addSubview:button];
    
    //2.设置按钮的数据
    [button setTitle:item.title forState:UIControlStateNormal];
    [button setImage:item.image forState:UIControlStateNormal];
    [button setImage:item.selectedImage forState:UIControlStateSelected];
}

@end

但是这样按钮是显示不出来的，原因是button没有定义frame，所以需要重写layoutSubviews方法

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    CGFloat buttonW = self.frame.size.width / self.subviews.count;
    CGFloat buttonH = self.frame.size.height;
    CGFloat buttonY = 0;
    for (int index = 0; index < self.subviews.count; index++) {
        UIButton *button = self.subviews[index];
        
        CGFloat buttonX = index * buttonW;
        
        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
    }
}

然后在QLDTabBarViewController.m里的- (void) setupChildViewController: (UIViewController *)childVc title:(NSString *)title imageName: (NSString *)imageName selectedImageName: (NSString *)方法中加入下面的代码实行调用：

    //3.添加自定义tabbar内部的按钮
    [self.customTabBar addTabBarButtomWithItem:childVc.tabBarItem];

运行之后得到下面的效果图：

这里有一点错误，因为通常来说，自定义的tabbar加载后，图片应该是在左边的，但是这个却这么整齐，原因应该是QLDTabBarViewController.m里的viewDidLoad，因为它里面是先加载[self setupAllChildViewControllers];这里的方法进去后在执行：[self.customTabBar addTabBarButtomWithItem:childVc.tabBarItem];的时候self.customTabBar为nil，所以它显示的一直是原先的tabbar。只需要将调用方法的顺序修改下就行：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //初始化自定义tabbar
    [self setupTabbar];
    
    // 初始化所有的子控制器
    [self setupAllChildViewControllers];
}

其运行结果如下：

两个tabbar效果重叠了，需要将系统的tabbar移除掉。

但是移除系统的tabbar有点困难，因为如果在viewDidLoad里面移除的话，其实是没有效果，所以需要在创建完tabbar之后就马上移除掉，需要在viewDidAppear里面实现：

/**
 *  移除系统自带的tabbar
 */
-(void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    for (UIView *child in self.tabBar.subviews) {
        if ([child isKindOfClass:[UIControl class]]) {
            [child removeFromSuperview];
        }
    }
}

运行结果如下：

这样，就只剩下自定义的tabbar了，但是这个tabbar还需要改，例如标题应该在图片下方，字体的大小也要改，还有提醒数字也需要加上去。