Creating a Floating Number Text Field in iOS with Swipe Gestures

===========================================================

In this article, we will explore how to create a text field that resembles a floating number, which can be increased or decreased by touching it and swiping your finger up (increase) or down (decrease). We will achieve this using Objective-C and the UIKit framework.

Introduction

The task at hand involves creating an interactive user interface element that responds to touch events. This will involve subclassing UILabel, handling gesture recognizers, and updating the text property of the label based on user input.

Step 1: Subclassing UILabel and Creating a New Class

To begin, we need to create a new class called DragLabel by subclassing UILabel. This class will inherit all the properties and methods of UILabel, but also add our own custom functionality.

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface DragLabel : UILabel

@property (assign) BOOL dragging;

@end

In the implementation file (DragLabel.m), we need to implement the custom property:

@implementation DragLabel

@synthesize dragging;

@end

This class will serve as the foundation for our floating number text field.

Step 2: Configuring Interface Builder

To create our floating number text field, we need to configure Interface Builder (IB). In IB, we will add three UILabel instances and change their classes to DragLabel. We will also connect these labels to our view controller using outlets.

#import <UIKit/UIKit.h>
#import "DragLabel.h"

@interface DragViewController : UIViewController {
    DragLabel *label1;
    DragLabel *label2;
    DragLabel *label3;

    NSArray *draglabels;        
}

@property (nonatomic, retain) IBOutlet DragLabel *label1;
@property (nonatomic, retain) IBOutlet DragLabel *label2;
@property (nonatomic, retain) IBOutlet DragLabel *label3;

In the implementation file (DragViewController.m), we need to connect these outlets:

@implementation DragViewController

@synthesize label1;
@synthesize label2;
@synthesize label3;

- (void)viewDidLoad {
    // ...
}

Step 3: Handling Gesture Recognizers and Updating Text

To handle touch events, we need to create gesture recognizers for our DragLabel instances. We will also update the text property of each label based on user input.

- (void)movedLabel:(DragLabel *)label touchloc:(CGPoint)touchloc {
    float val = (label.center.y - touchloc.y)/10;
    label.text = [NSString stringWithFormat:@"%g",val];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    CGPoint touchloc = [[touches anyObject] locationInView:self.view];
    for (DragLabel *label in draglabels) {
        if (CGRectContainsPoint(label.frame, touchloc)) {
            label.dragging = YES;
            [self movedLabel:label touchloc:touchloc];
        }
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    for (DragLabel *label in draglabels) {
        if (label.dragging) {
            CGPoint touchloc = [[touches anyObject] locationInView:self.view];
            [self movedLabel:label touchloc:touchloc];
        }
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    for (DragLabel *label in draglabels) {
        label.dragging = NO;
    }
}

Step 4: Adjusting the Scale

To adjust the scale so that it ranges from 0 to 1, only when the user drags above the label, we need to modify the movedLabel method.

- (void)movedLabel:(DragLabel *)label touchloc:(CGPoint)touchloc {
    float ydif = label.center.y-touchloc.y;
    float maxheight = 100;
    if (ydif > 0) {
        if (ydif <= maxheight) label.text = [NSString stringWithFormat:@"%g",ydiff/maxheight];
        else label.text = [NSString stringWithFormat:@"%g",maxheight];
    } else label.text = @"0.0";
}

Conclusion

In this article, we have created a floating number text field in iOS that responds to swipe gestures. We achieved this by subclassing UILabel, handling gesture recognizers, and updating the text property of each label based on user input.

With these steps, you should now be able to create your own interactive floating number text fields using Objective-C and the UIKit framework.

Example Use Case

This floating number text field can be used in various scenarios such as:

• Temperature displays
• Volume controls
• Energy consumption monitors
• Any other application that requires an interactive numerical display

Last modified on 2025-03-04