CODEWITHSUNDEEP
iosxcodeswiftautolayout
Matt Dice
Matt Dice

Reputation: 357

Position UITableViewCell

Good evening,

I would like to position my custom tableview cell the same as the next picture: enter image description here

Currently i've got this: enter image description here

How can i add a margin on the tableviewcell? I've already tried to different things with separatorInsets and contentInsets, but i can't get the desired result.

Does anyone have a suggestion?

Thanks in advance!

Upvotes: 1

Views: 344

Answers (2)

Catalina T.
Catalina T.

Reputation: 3494

You could put all your content inside a UIView, instead of directly adding them to the contentView. Then you add some margin from this viewto the contentView (from your screenshot, should be left, right, top and bottom).

An easy way to embed all your view in a parent view, would be the following: Select all your subviews and go to Editor -> Embed In -> View

enter image description here

Make sure you set the background color for the contentView of the cell to clearColor.

This is how the storyboard should look like (you have more than just one label, of course)

enter image description here

There is no other way, using tableViews to have the cells smaller, in width, than the entire tableView.

Another option would be to use a collectionView instead. There you can specify both width and height for your cells, so obtaining that layout would be easier.

Let me know if you need more help :)

Implementing custom selection to take the padding into account

For this you will need the following:

You will need to add a UIImageView as subview as your view that has the padding, like this:

ImageView in storyboard

As you can see from the screenshot, you will need to set the image and the highlightedImage for the UIImageView. The image will be a simple white image, and the highlightedImage and image with the background color you want. For me my too pictures looked like this:

enter image description here enter image description here

Then, in your custom UITableViewCell class you do the following:

@interface MyTableViewCell()

@property (weak, nonatomic) IBOutlet UIImageView *highlightImageView;

@end

@implementation MyTableViewCell

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [self.highlightImageView setHighlighted:selected]; 
}

-(void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
    // this will change the color on your image
    [self.highlightImageView setHighlighted:highlighted];
}

Swift implementation

@IBOutlet weak var highlightedView: UIImageView!

override func setSelected(selected: Bool, animated: Bool) {
    highlightedView.highlighted = selected
}

override func setHighlighted(highlighted: Bool, animated: Bool) {
    highlightedView.highlighted = highlighted

}

Let me know if you have questions.

Upvotes: 3

Rory McKinnel
Rory McKinnel

Reputation: 8014

You want to use nested views:

View 1: Add a view to the content view of the cell which is pinned to the edges a 0 points. Make the background color grey. or make it transparent and set the table background to grey.

View 2: inside view 1

Pin this to the edges of view 1 with leading and trailing margins to match your grey border. Use top and bottom pins with size equal to half the grey margin between cells.

Make the background colour of this view the color of the left thin vertical color bar on your picture.

CTRL drag this view to create an IBOutlet in your code so you can change the color in the cell on a per cell basis.

View 3: inside view 2.

Make this white and pin it at 0 points on top, bottom and trailing edge to view 2.

Pin the leading edge to the thickness of the coloured vertical bar.

Finally put your text etc in view 3 and lay it out.

This will give you the layout you wish.

Upvotes: 0

Related Questions