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

Question

I want to add a green line below UIButton for selected state, like following image.

I have set content offset for image and title in storyboard but i am facing issue while using auto layouts. Also selected state has image below text and un-selected state has no image below. What is the best way to handle this?

Answer 1

Here is a subclass that I have created for our App.

Header file:

#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

Implementation file:

#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

To use it, select your UIButton on Interface builder, then change the class name of it from UIButton to CMTabButton and then you can set the properties from the Interface builder directly