Change the Color of a UITextView with a Button Click in iOS

Understanding the Problem and Objective

The problem at hand is to change the font color and background color of a UITextView upon button click, and then revert them back to their original colors when the button is clicked again. This process should be repeated indefinitely.

Introduction to UIKit Basics

Before we dive into solving this problem, it’s essential to understand some fundamental concepts in UIKit.

Properties of UITextView

A UITextView has several properties that affect its appearance:

  • textColor: The color used for the text.
  • backgroundColor: The background color of the text view.

Delegates and Target-Action Pattern

The target-action pattern is a mechanism in iOS development where an object can respond to events, such as button clicks. In this case, we’ll use the delegate pattern to handle the events related to our UITextView.

Creating and Initializing a TextView

To create a UITextView, you need to initialize it with some properties.

// Importing necessary frameworks
#import <UIKit/UIKit.h>

// Defining the view controller's main interface
@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UITextView *txtView;

@end

Understanding the Edit Section of the Answer

The provided edit section shows an example implementation for handling button clicks and changing the UITextView colors.

// Implementation of viewDidLoad method
- (void)viewDidLoad {
    [super viewDidLoad];
    // Setting up initial colors for textView
    [txtView setBackgroundColor:[UIColor lightGrayColor]];
    [txtView setTextColor:[UIColor blackColor]];
    str = @"first"; // some variable to keep track of the state
}

// Implementation of the IBAction method bt:(id)sender
- (IBAction)bt:(id)sender {
    if([str isEqualToString:@"first"]) { // checking current state of str
        // Changing colors when button is clicked for first time
        [txtView setBackgroundColor:[UIColor blackColor]];
        [txtView setTextColor:[UIColor greenColor]];
        str = @"second"; // updating the variable to keep track of the state
    } else {
        // Reverting back to original colors when button is clicked again
        [txtView setBackgroundColor:[UIColor lightGrayColor]];
        [txtView setTextColor:[UIColor blackColor]];
        str = @"first"; // resetting the variable
    }
}

Explanation and Simplification

The code provided earlier shows how you can change the UITextView’s colors upon button click. However, there’s an important point to consider here - it only works as long as str maintains a specific value.

// Example of why using a variable to track state is required
- (IBAction)bt:(id)sender {
    if(str == @"first") { // This won't work because str will be "second"
        [txtView setBackgroundColor:[UIColor blackColor]];
        [txtView setTextColor:[UIColor greenColor]];
        str = @"second";
    } else {
        [txtView setBackgroundColor:[UIColor lightGrayColor]];
        [txtView setTextColor:[UIColor blackColor]];
        str = @"first"; // reset the variable
    }
}

To solve this problem, we need to introduce an additional mechanism to keep track of the state - such as a boolean or enum value.

Introducing State Mechanism

We can replace str with two separate variables: one for storing the current color state and another for determining whether it’s time to change back to original colors.

// Variables for state management
NSString *currentState;
int currentStateIndex;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Setting up initial colors for textView
    currentState = @"first";
    currentStateIndex = 0;
    [txtView setBackgroundColor:[UIColor lightGrayColor]];
    [txtView setTextColor:[UIColor blackColor]];
}

// Implementation of the IBAction method bt:(id)sender
- (IBAction)bt:(id)sender {
    // Changing states when button is clicked
    if([currentState isEqualToString:@"first"]) {
        currentState = @"second";
        [txtView setBackgroundColor:[UIColor blackColor]];
        [txtView setTextColor:[UIColor greenColor]];
    } else if ([currentState isEqualToString:@"second"]) {
        currentState = @"first";
        [txtView setBackgroundColor:[UIColor lightGrayColor]];
        [txtView setTextColor:[UIColor blackColor]];
    }
}

Explanation and Simplification

The code now keeps track of the current state by using currentState to store the text view’s color state.

// Before changing colors
- (IBAction)bt:(id)sender {
    // Change states when button is clicked
    if([currentState isEqualToString:@"first"]) { 
        currentState = @"second";
        [txtView setBackgroundColor:[UIColor blackColor]];
        [txtView setTextColor:[UIColor greenColor]];
    } else if ([currentState isEqualToString:@"second"]) {
        currentState = @"first";
        [txtView setBackgroundColor:[UIColor lightGrayColor]];
        [txtView setTextColor:[UIColor blackColor]];
    }
}

The Final Solution

To implement the solution to this problem, follow these steps:

  1. Create a UITextView and initialize it with some colors.
  2. Add an action method for button click events and introduce state management using variables such as currentState and currentStateIndex.
  3. Use a boolean or enum value in your state management mechanism to keep track of the color change states.

Here’s how the final solution might look like:

// Implementation
- (void)viewDidLoad {
    [super viewDidLoad];
    // Setting up initial colors for textView
    currentState = @"first";
    currentStateIndex = 0;
    [txtView setBackgroundColor:[UIColor lightGrayColor]];
    [txtView setTextColor:[UIColor blackColor]];
}

// Implementation of the IBAction method bt:(id)sender
- (IBAction)bt:(id)sender {
    // Change states when button is clicked
    if([currentState isEqualToString:@"first"]) {
        currentState = @"second";
        [txtView setBackgroundColor:[UIColor blackColor]];
        [txtView setTextColor:[UIColor greenColor]];
    } else if ([currentState isEqualToString:@"second"]) {
        currentState = @"first";
        [txtView setBackgroundColor:[UIColor lightGrayColor]];
        [txtView setTextColor:[UIColor blackColor]];
    }
}

By implementing the steps outlined above, you can successfully change the UITextView’s colors upon button click and revert back to original colors as needed.


Last modified on 2024-08-15