Graphical Bugs while programmatically creating UILabel, UITextField, etc...

Question

I programmatically created a login view and a table view.

Under certain circumstances which i cannot reproduce there occur some strange visual bugs:

• Text with some letters having a different font size than others
• A button where the border is not initially shown but only if you click on it. In the same case, the border of the button can be shown in a UITextField instead of the place holder ( see screenshot )
• A label showing up not in the right place, but in the above mentioned textfield, upside down ( i did not manage to screenshot this one yet )

Below, i added two screenshots with most of the app blacked out, only showing the bugs:

  

Here you can see that text gets mixed with different font sizes.

This errors occur not regularly or reproduce-able.

I added the code of the login screen below:

 // Implement loadView to create a view hierarchy programmatically, without 
 // using a nib.
     - (void)loadView {
     UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
     UIFont* font = [UIFont systemFontOfSize:14];

 float midLine = 100.0;
 float height = 30.0;
 float borderY = 70.0;
 float borderX = 10.0;
 float width = 320.0 - borderX * 2.0;
 float paddingX = 10.0;
 float paddingY = 5.0;

 CGRect usernameLabelRect = CGRectMake(borderX, borderY, midLine, height);
 CGRect usernameFieldRect = CGRectMake(borderX + midLine + paddingX, borderY, 
                               width - midLine - paddingX - 40 , height);

 CGRect passwordLabelRect = CGRectMake(borderX, borderY + height + paddingY,
                               midLine, height);
 CGRect passwordFieldRect = CGRectMake(borderX + midLine + paddingX, 
                               borderY + height + paddingY, 
                               width - midLine - paddingX - 40, height);

 CGRect loginButtonRect = CGRectMake(borderX + 40, 
                               borderY + height*2 + paddingY*2, width - 80, 
                               height);

 //CGRect warningRect =  CGRectMake(borderX,
 //                         borderY * height * 3.0 + paddingY *3.0, 
 //                         width, height);
 CGRect warningRect =  CGRectMake(borderX, 175, width, 40);

 UILabel* usernameLabel = [[UILabel alloc] initWithFrame:usernameLabelRect];

 usernameLabel.textAlignment = UITextAlignmentRight;
 usernameLabel.font = font;
 usernameLabel.text = @"Username:";

 UILabel* passwordLabel = [[UILabel alloc] initWithFrame:passwordLabelRect];
 passwordLabel.textAlignment = UITextAlignmentRight;
 passwordLabel.font = font;
 passwordLabel.text = @"Password:";


 usernameField = [[UITextField alloc] initWithFrame:usernameFieldRect];
 [usernameField setBorderStyle:UITextBorderStyleRoundedRect];
 //[usernameField setPlaceholder:@"<Username>"];
 usernameField.font = font;
 usernameField.autocapitalizationType = UITextAutocapitalizationTypeNone;
 usernameField.autocorrectionType = UITextAutocorrectionTypeNo;

 passwordField = [[UITextField alloc] initWithFrame:passwordFieldRect];
 passwordField.font = font;
 [passwordField setBorderStyle:UITextBorderStyleRoundedRect];
 //[passwordField setPlaceholder:@"<Password>"];
 passwordField.autocapitalizationType = UITextAutocapitalizationTypeNone;
 passwordField.autocorrectionType = UITextAutocorrectionTypeNo;
 passwordField.secureTextEntry = YES;

 loginButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 loginButton.frame = loginButtonRect;
 [loginButton setTitle: @"Einloggen" forState:UIControlStateNormal];
 [loginButton setTitleColor:[UIColor blackColor]
                                    forState:UIControlEventTouchDown];
 loginButton.contentVerticalAlignment =
                                    UIControlContentVerticalAlignmentCenter;
 loginButton.contentHorizontalAlignment =
                                    UIControlContentHorizontalAlignmentCenter;
 [loginButton addTarget:self action:@selector(OnLoginClicked:)
                          forControlEvents:UIControlEventTouchUpInside];
 [loginButton setBackgroundColor:[UIColor clearColor]];

 warningLabel = [[UILabel alloc] initWithFrame:warningRect];
 warningLabel.font = font;
 warningLabel.numberOfLines = 3;
 warningLabel.text =
 @"Wenn Sie die Applikation jetzt schließen, so werden Ihre Logindaten verworfen.";

 [myView addSubview:usernameLabel];
 [myView addSubview:passwordLabel];
 [myView addSubview:usernameField];
 [myView addSubview:passwordField];
 [myView addSubview:loginButton];
 [myView addSubview:warningLabel];
 /*
 [usernameLabel release];
 [passwordLabel release];
 [usernameField release];
 [passwordField release];
 [loginButton release];
 [warningLabel release];
 */
 self.view = myView;
 [myView release];
}

Any help is greatly appreciated =)

Thank you!

Answer 1

I can't work all of your screen positioning in my head, but it looks to me like many of your fields overlap : is this intentional ? Maybe that is the cause ? I normally create views in code, but this might be one case for IB!

You haven't shown any code for the table view, however I've seem similar issues before where you add subviews to a cell, then next time the cell is deQueued with DequeueReusableCell you add subviews again without checking if they are there or clearing them. This results in all sorts of overlaps just like the first screenshot.

Answer 2

The problem was that i called UIKit messages from Not-The-Main-Thread, which causes all kinds of graphical problems. Solved it by using performSelectorOnMainThread: in several places in my code =)