iOS Question How to add eye symbol for TextField

[Nitin Joshi]

In my project TextField is used for password by enabling Password Mode. How can is add eye icon at corner of text field to view the password.

 

[jkhazraji]

Place a textfield (txtPassword) and a small label (Label1) on the right side

'Code module
#Region  Project Attributes
    #ApplicationLabel: B4i Example
    #Version: 1.0.0
    'Orientation possible values: Portrait, LandscapeLeft, LandscapeRight and PortraitUpsideDown
    #iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight
    #iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
    #Target: iPhone, iPad
    #ATSEnabled: True
    #MinVersion: 8
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'Public variables can be accessed from all modules.
    Public App As Application
    Public NavControl As NavigationController
    Private Page1 As Page
    Private xui As XUI
    Private txtPassword As TextField
    Private Label1 As Label
End Sub

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page1.RootPanel.LoadLayout("Page1")
    NavControl.ShowPage(Page1)
     Label1.Text=Chr(0xF06E) ' open
End Sub

Sub Button1_Click
    xui.MsgboxAsync("Hello world!", "B4X")
End Sub

Private Sub Page1_Resize(Width As Int, Height As Int)
    
End Sub




Private Sub Label1_Click
    txtPassword.PasswordMode=Not(txtPassword.PasswordMode)
    If  txtPassword.PasswordMode Then
        Label1.Text=Chr(0xF06E) ' open
    Else
        Label1.Text=Chr(0xF070)  ' closed
    End If
    
End Sub

 

[Alexander Stolte]

i don't think the native text field supports this, but you can use the following 2 alternatives:

[B4X] [XUI] AS TextFieldAdvanced - Title, Information, Counter, Password, Button, Prefix, Suffix, Icons, Multiline

With this view you can quickly and easily add good looking text fields, with title and or bottom text. Additionally you can make the TextField a button, so that you can open menus, but still keep the design of the text fields. The view speeds up development because you don't have to worry about...

www.b4x.com

or B4XFloatTextField

[B4X] XUI Views - Cross platform views and dialogs

XUI Views is a b4x library (https://www.b4x.com/android/forum/threads/100383/#content). The same b4xlib library is compatible with B4A, B4i and B4J It is a collection of custom views and dialogs. Everything is written in B4X. The source code is included inside the b4xlib file, which is a zip...

www.b4x.com

 

[jkhazraji]

Using OBJC:

#if OBJC

#import <UIKit/UIKit.h>
@interface UITextField (B4iPasswordToggle)
- (void)addPasswordToggleButtonWithEyeOpen:(NSString *)eyeOpen eyeClosed:(NSString *)eyeClosed;
@end

@implementation UITextField (B4iPasswordToggle)

- (void)addPasswordToggleButtonWithEyeOpen:(NSString *)eyeOpen eyeClosed:(NSString *)eyeClosed {
    UIButton *toggleButton = [UIButton buttonWithType:UIButtonTypeCustom];
    
    // Set images for normal (closed eye) and selected (open eye) states
    [toggleButton setImage:[UIImage imageNamed:eyeClosed] forState:UIControlStateNormal];
    [toggleButton setImage:[UIImage imageNamed:eyeOpen] forState:UIControlStateSelected];
    
    toggleButton.frame = CGRectMake(0, 0, 16, 16);
    [toggleButton addTarget:self action:@selector(b4i_togglePasswordVisibility:) forControlEvents:UIControlEventTouchUpInside];
    
    self.rightView = toggleButton;
    self.rightViewMode = UITextFieldViewModeAlways;
    self.secureTextEntry = YES; // Start with password hidden
}

- (void)b4i_togglePasswordVisibility:(UIButton *)sender {
    self.secureTextEntry = !self.secureTextEntry;
    sender.selected = !sender.selected;
}

@end
#End If

 

[Nitin Joshi]

@jkhazraji @Alexander Stolte Thank you very much for the solution. I bit busy right now. I will check in some time.