Animate Line under one button to another - swift

Question

In Swift, I was trying to replicate the animated underline from this App. When a user taps "local" or "world", the underline bar slides across the screen and positions under the button selected.
How is the animation done? Is the bar an imageview that moves?

Answer 1

You ask:
How is the animation done? Is the bar an imageview that moves?
More than likely it's just a UIView whose background color is that light blue, and whose frame (or whose constraints that define the frame) are changed within a [UIView animateWithDuration:] block.
For example, in Objective-C, you might have these properties:
#property (nonatomic, weak) UIView *underlineView;
#property (nonatomic, strong) NSArray *underlineConstraints;
#property (nonatomic, weak) IBOutlet UIButton *button1;
and this code:
- (void)addUnderline {
UIView *underlineView = [[UIView alloc] init];
underlineView.translatesAutoresizingMaskIntoConstraints = NO;
underlineView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:underlineView];
self.underlineView = underlineView;
[self updateConstraintsForUnderlineView:underlineView underButton:self.button1];
}
- (IBAction)didTapButton:(UIButton *)sender {
[self updateConstraintsForUnderlineView:self.underlineView underButton:sender];
[UIView animateWithDuration:0.25 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self.view layoutIfNeeded];
} completion:nil];
}
- (void)updateConstraintsForUnderlineView:(UIView *)underlineView underButton:(UIButton *)button {
if (self.underlineConstraints) {
[self.view removeConstraints:self.underlineConstraints];
}
NSDictionary *views = NSDictionaryOfVariableBindings(underlineView, button);
self.underlineConstraints = [NSLayoutConstraint constraintsWithVisualFormat:#"V:[button]-[underlineView(5)]" options:NSLayoutFormatAlignAllLeading | NSLayoutFormatAlignAllTrailing metrics:nil views:views];
[self.view addConstraints:self.underlineConstraints];
}
Or in Swift:
weak var underlineView: UIView!
var underlineConstraints: [AnyObject]!
#IBOutlet weak var button1: UIButton!
func addUnderline() {
let underlineView = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
underlineView.backgroundColor = UIColor.lightGrayColor()
view.addSubview(underlineView)
self.underlineView = underlineView
updateConstraintsForUnderlineView(underlineView, underButton:button1)
}
#IBAction func didTapButton(sender: UIButton) {
updateConstraintsForUnderlineView(underlineView, underButton:sender)
UIView.animateWithDuration(0.25, delay: 0.0, options: .CurveEaseOut, animations: { () -> Void in
self.view.layoutIfNeeded()
}, completion: nil)
}
func updateConstraintsForUnderlineView(underlineView: UIView, underButton button: UIButton) {
if underlineConstraints != nil {
view.removeConstraints(underlineConstraints)
}
let views = ["underlineView": underlineView, "button": button]
underlineConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:[button]-[underlineView(5)]", options: .AlignAllLeading | .AlignAllTrailing, metrics: nil, views: views)
view.addConstraints(underlineConstraints)
}