Good evening,
I would like to position my custom tableview cell the same as the next picture:
Currently i've got this:
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!
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
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)
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:
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:
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.
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.
Related
The Collection view cell would need to show and hide additional tools for the device being controlled. The button that collapses would be at the bottom of the UICollectionViewCell. Whenever the button is pressed it would animate downwards revealing the fan or lights extra features or animate upwards when hiding the extra features. I only need help with expanding and collapsing by using the button at the bottom of the cell. An image is attached showing an example.
Add a height constraint for your high/med/low selector.
Connect that constraint to var in your cell class like this:
#IBOutlet weak var checker1HeightConstraint: NSLayoutConstraint!
set that constraint to a value you want (either 0, for hidden, or 50 or 60 if not hidden)
have a method where you set the value:
func toggleControls(visible: Bool)) {
checker1HeightConstraint = visible? 50 : 0
setNeedsLayout()
}
If you are not sure how to set the outlet, just ctrl-drag from the constraint in you storyboard or xib to your custom cellView class. It will give you options to create it.
I'm trying to push down the section header in my tableview to make it overlap the first cell in the section, similar to the way profile pictures appear in the linkedin app on the left:
So, if the white view the profile picture is overlapping is the first row in the section, and the profile picture is the section header.
I've tried changing the x coordinate of the frame to a negative value and messing around with the size of the header, all to no avail.
I was just looking at the profile view in the LinkedIn App, and I think if I were to build something similar, I would put all the profile information in the tableHeaderView. So the header would consist of the following:
UIImageView (background image)
UIView (containing profile
information)
UIImageView (users profile image)
Since a UITableView is a subclass of the UIScrollView, you can animate the background image using the delegate method scrollViewDidScroll. You can then adjust the position of the background image while the tableview scrolls
#property (weak, nonatomic) IBOutlet UIImageView *backgroundImage;
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 64 is the height of the navigation bar.
// 110 is the maximum distance I want to move the image down before it starts to move with the table.
CGFloat offset = MIN(scrollView.contentOffset.y + 64, 110);
self.backgroundImage.transform = CGAffineTransformMakeTranslation(0, offset);
}
Create a custom view inviewForHeaderInSection() where you can define whatever shaped your header needs to be. In your case, circle in the bottom center of a rectangle. And set content to that view.
Change alpha value of the view which you want transparent to be 0 in that custom view. So the undesired portion of header will not be shown on screen.
How can I customize my UITableViewCell to get this appearance ?
I don't want to use a custom UIView for my UITableViewCell?
You will need to create a UITableViewCell subclass for this.
The spacing between the cells isn't really spacing. It is fake.
Each cell has a shadow image that has some of the background around it.
You'll need to add a UIView that then has a shadow around it and is inset from the edge of the actual cell. Then add the contents of the cell to that.
Add this inside UITableViewCell subclass :
override func layoutSubviews() {
contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}
Create a subclass of UITableViewCell.
Add a View and place required UIElements to its contentView.
Make UIEgdeInset to how much you want.
Custom view color should be lighter than the cell then it will be look like what you want.
It's all about how you set up your UITableViewCell's XIB really.
Add a UIView as a child view of the contentView in the UITableViewCell. Set the trailing, leading, top and bottom spacing of this UIView to it's parent view (contentView) to 5 or whatever value you desire. Set the background colour of the contentView as Clear Colour. Set the backgroundColour of your UITableView to the desired colour with the background colour of the contentView being white.
You can set the cornerRadius of the layer of the UIView to 5.0 to achieve the cornered effect as in your image
I am looking for a way to enter a label within a table cell that also has a disclosure indicator. The problem i'm having at the moment is that it seems like the disclosure indicator is being ignored when calculating the label's positions
Heres a picture:
So as you can see the label is centred in the area between the left side of the cell and the left side of the indicator, if it was centred in the cell it would sit below the nav bar heading.
Any help is appreciated thankyou
From within the storyboard
Okay, first an explanation for your issue. It has to do with the anatomy of a UITableViewCell. With anatomy, I mean the fact that the UITableViewCell for you is just a container for another container, which is the contentView (you can also see this one in your storyboard).
When you are operating in Storyboards, you are solely operating on the contentView, not on the actual UITableViewCell. So, when you setup your UILabel to be centered on the X-axis with AutoLayout, AutoLayout will always try to center it within the contentView, not in the outer container (i.e. the UITableViewCell). Then, when you add a disclosure indicator to the UITableViewCell, the contentView automatically gets shrinked in its width because the cell makes space for the disclosure indicator and wants to prevent you from adding UI elements in the right area that is reserved for the disclosure indicator.
Now, you have a few options around this:
you can edit the constraint directly and add a constant to it (which has to be the same value that the label gets shifted when you'd remove the indicator)
don't use the default disclosure indicator (i.e. don't tick the checkbox in Storyboards) and just add a UIImageView with an image that looks identical.
To not be bound to any constants you can calculate the difference in widths of frame and contentView.frame. So first create an outlet collection like so:
#property (strong, nonatomic) IBOutletCollection(NSLayoutConstraint) NSArray *centerConstraintsToOffset;
Then add the center constraints that you want to be centered horizontally in cell to that outlet collection:
And finally add this code to your cell:
override func layoutSubviews() {
super.layoutSubviews()
for constraint in centerConstraintsToOffset {
constraint.constant = (frame.size.width - contentView.frame.size.width) / 2.0
}
}
This also gives you flexibility of adding or removing cell accessories on the go, and your views will always be perfectly center aligned. Even if you remove the accessory at all.
Pavel's answer fixed the issue for me. After creating the IBOutlet collection as his answer demonstrates, here is his code example edited for Swift 3:
override func layoutSubviews() {
super.layoutSubviews()
for constraint: NSLayoutConstraint in self.centerConstraintsToOffset {
constraint.constant = (frame.size.width - contentView.frame.size.width) / 2.0
}
}
As you've already noticed, adding a 'UITableViewCellAccessoryDisclosureIndicator' will shrink the space allotted for your cell's contentView. Another solution that doesn't require a custom indicator or guessing at an offset would be to programmatically add a UILabel to the root view of the cell, not the contentView. For example:
#property UILabel *label;
// ...
- (void)layoutSubviews
{
[super layoutSubviews];
[self.label removeFromSuperview];
self.label = [[UILabel alloc] init];
self.label.text = #"Motorsport";
[self.label sizeToFit];
label.center = CGPointMake(self.center.x, self.size.height/2);
[self addSubview:self.label];
}
I am creating the table with the custom UITableViewCells represented on this image:
In the left part of the cell there are a gray UIImageView, three labels and an UIImageView with a line. Cells can have different height, based on their content. If i insert one image as a background, this image will be stretched. So i have created two UIImageViews: top (from the top of the cell to the bottom of the first semicircle) and bottom (from the bottom of the last semicircle to the bottom of the cell) and the UIView with a pattern image background color. Pattern image in this view is repeated in order to fill UIView completely. I also calculate height of the cell in order to UIView join bottom UIImageView correctly.
My problem is: when the cell is selected my imageViews are not selected. Only middle UIView becomes selected. You can see this in the pictures below:
I want all imageViews(top, bottom ad gray) to become selected with the cell. How can i do this?
You have to override the method in your UITableViewCell subclass.
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
self.imageView.image = [UImage imageNamed:#"some_other_image.png"];
}