How to adjust the table view layout?

Question

I am trying to create a table section look like this.

As you may see, it is a single table cell that contains two input text fields plus one ui control.

I am able to do something like this

My question is how am I supposed to do to draw a line between the text fields and how to remove the border of the text field.

Thanks

Answer 1

Try using custom cells by subclassing UITableViewCell it will be easier for you to design and make the layout exactly like you want.

If you do not want to subclass the UITableViewCell then too you can achieve this by removing the table border.

tableView.layer.borderWidth = 0;
tableView.layer.borderColor = [UIColor clearColor];

You will need to add QuartzCore Framework for this. Then will need to write the below line in the .h file

#import <QuartzCore/QuartzCore.h>

For that line between you 2 cells you can just add an image. Before that you should change the separator style of tableview to none.

Answer 2

Assuming you are using a custom cell via subclassing UITableView, specify the additional view customizations programmatically like:

//borderless UITextField
[textField setBorderStyle:UITextBorderStyleNone];

And for the line between the text fields, there's a bunch of options on how to do that. One quick easy way would be to specify a 1 pixel tall UIView of the desired width, with a grey background color

UIView *line = [[UIView alloc] initWithFrame:CGRectMake(startingX, startingY, desiredWidth, 1)];
line.backgroundColor = [UIColor grayColor];
[cell addSubview:line];