iOS: Table-style TextField for Login Screen?

Question

I wanna make a login screen like the one from Facebook's app. The part I wanna replicate is the two text fields that when stacked look like a table group. I can't figure out how they did it though.

Who knows the trick?

I can't post a picture because I am new to stackoverflow. It's an effect that they seem like one rounded oval but with 2 text fields inside. One for username, one for password.

Solution 1

you can use the below code.

//in .h file

UITextField *loginId; 
UITextField *password ;

//in .m file

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return 2;
    }
    - (UITableViewCell *)tableView:(UITableView *)table cellForRowAtIndexPath:(NSIndexPath *)indexPath {

        UITableViewCell *cell = [table dequeueReusableCellWithIdentifier:@"Cell"];
        if( cell == nil)
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"] autorelease];   

        if (indexPath.row == 0) {
            loginId = [[UITextField alloc] initWithFrame:CGRectMake(5, 0, 280, 21)];
            loginId .placeholder = @"loginid";
            loginId .autocorrectionType = UITextAutocorrectionTypeNo;
            [loginId setClearButtonMode:UITextFieldViewModeWhileEditing];
            cell.accessoryView = loginId ;
        }
        if (indexPath.row == 1) {
            password = [[UITextField alloc] initWithFrame:CGRectMake(5, 0, 280, 21)];
            password.placeholder = @"Password";
            password.secureTextEntry = YES;
            password.autocorrectionType = UITextAutocorrectionTypeNo;
            [password setClearButtonMode:UITextFieldViewModeWhileEditing];
            cell.accessoryView = password;
        }
        loginId.delegate = self;
        password.delegate = self;


        [tableView1 addSubview:loginId];
        [tableView1 addSubview:password];
        [loginId release];
        [password release];

        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        return cell;  
    }
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

        return 1;
    }

Solution 2

Take the code from here: https://github.com/c99koder/lastfm-iphone

if you download the code and look into the FirstRunView.xib you will see the same implementation as desired.

Solution 3

Ah! I got the answer. It's just art. It's an UIImage that looks like a 2 cell tableview with borderless UITextFields. Why do I never guess it's art?

Solution 4

Just use a UIVIew with rounded corners for the background and add the two text fields as sub views.

View more solutions

Comments

[JustSid]

Please use the comment option for comments.

[Jake Almer]

Just a heads up for anyone taking a look at the lastfm code, it uses images to achieve the grouped TableView affect.

[BlueMeanie]

Great answer, one question though. Is there a way to move the position of the 2 grouped cells or will they have to stay at the top of the screen?