如何在Facebook应用程序的顶部栏中添加UIButton文本下面的一行。

Question

我想在UIButton下面为选定状态添加绿线，如下图所示。

我在故事板中设置了图像和标题的内容偏移量，但是在使用自动布局时我遇到了问题。 同样选择状态的图像低于文本，未选择状态下面没有图像。 处理这个问题的最佳方法是什么？

Answer 1

这是我为我们的App创建的子类。

头文件：

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface CMTabButton : UIButton

/// The color for the bottom line of the button when it is selected
@property (nonatomic)IBInspectable UIColor *selectedColor;

/// The color for the bottom line of the button when it is not selected
@property (nonatomic)IBInspectable UIColor *defaultColor;

/// The height of the bottom line of the button (default 2 pixels)
@property(nonatomic,assign)IBInspectable CGFloat bottomLineHeight;

@end

实施文件：

#import "CMTabButton.h"

@interface CMTabButton() {
    UIView *bottomLine;
    NSLayoutConstraint *bottomLineHeightConstraint;
}

@end

    @implementation CMTabButton

    - (id)initWithCoder:(NSCoder *)aDecoder {
        self = [super initWithCoder:aDecoder];
        if (self) {
            [self setup];

        }
        return self;
    }

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

    - (void)didMoveToWindow {
        [super didMoveToWindow];
        [self uppdateUI];
    }

    - (void)setup {            
        //add the bottom line
        [self addBottomLine];
    }

    - (void)setSelected:(BOOL)selected {
        //if the unselected color is transparent, we animate the line in/out by changing the height of the line
        if (self.defaultColor==nil) {
            bottomLineHeightConstraint.constant = (selected) ? self.bottomLineHeight : 0;

            //we force the selected color for the animation so the animation is visible
            bottomLine.backgroundColor = self.selectedColor;

            [UIView animateWithDuration:0.15
                             animations:^{
                                 [self layoutIfNeeded];
                             }
                             completion:^(BOOL finished) {
                                 if (!selected)
                                     bottomLine.backgroundColor = self.defaultColor;
                                 [super setSelected:selected];
                             }
             ];
        }
        else {
            bottomLineHeightConstraint.constant = self.bottomLineHeight;

            //else, we animate the color change
            [UIView animateWithDuration:0.15
                             animations:^{
                                 bottomLine.backgroundColor = selected ? self.selectedColor : self.defaultColor;
                             }
                             completion:^(BOOL finished) {
                                 [super setSelected:selected];
                             }
             ];
        }
    }

    - (void)addBottomLine {
        bottomLine = [UIView new];
        bottomLine.translatesAutoresizingMaskIntoConstraints = NO;
        [self addSubview:bottomLine];

        bottomLineHeightConstraint =  [NSLayoutConstraint constraintWithItem:bottomLine attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:0];
        [self addConstraint:bottomLineHeightConstraint];

        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[bottomLine]|" options:0 metrics:nil views:@{@"bottomLine":bottomLine}]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bottomLine]|" options:0 metrics:nil views:@{@"bottomLine":bottomLine}]];
    }

    - (void)prepareForInterfaceBuilder {
        [self uppdateUI];
    }

    - (void)uppdateUI {

        bottomLine.backgroundColor = self.selected ? self.selectedColor : self.defaultColor;

        if (self.bottomLineHeight>0) {
            bottomLineHeightConstraint.constant = self.bottomLineHeight;
            [self layoutIfNeeded];
        }
    }


    @end

要使用它，请在“接口”构建器上选择UIButton，然后将其类名从UIButton更改为CMTabButton，然后可以直接从“接口”构建器设置属性。