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"];
}
Related
I have a question - how to add a view as a subview of UITableViewCell but on top of all other views?
Here is an example of what I'm trying to achieve:
The image should scroll with the cell - save it's position relatively to scroll view (table view in this case).
If the cell is to small in height then the emojis overlay will be cut by the cell on top of current one, so how can I add this emojis overlay as a subview but at the same time display it on top of every cell? I've tried bunch of variants for now and nothing is working for me.
Just adding as a subview of the current window is not working for me because this overlay should scroll with the cell.
Tried code:
view.layer.zPosition = 5
cell.contentView.insertSubview(view, aboveSubview: cell.contentView)
cell.contentView.bringSubview(toFront: view)
UIApplication.shared.keyWindow?.addSubview(view)
Try to set cliptobouds = false for your cell.contentview and cell itself.
Otherwise if it is single overlay which you want to be on top of every cell then better implement UISrollViewDelegate and position the overlay accordingly.
How to insert an imageView to a tableView, so that the image view scrolls as I scroll the tableview?
I added a imageview to tableview using the method tableview.addsubview, but when I scroll the tableview, the image view is floating. It will not move as I scroll these cells. Otherwise, the image is created by UIGraphics.
let image = UIGraphicsGetImageFromCurrentImageContext()
tableview.addSubview(UIImageView(image: image))
enter image description here
The image is about all cells. There are some lines in the image. Each line is from the point of last label in cell to the point of next label in next cell. So, I hope that the image is cover all cells.
You need to add the image to a cell, not to the tableview. If you add it to the tableview it will float because you are actually scrolling the Cells and not the tableview itself.
So in your tableView delegate method where you are constructing your cells you should add the imageview.
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.
Below is how I have structure.
UITableView (304px)
- UIImageView (as seperator line) (I want this to be 288px) but it stretched to 304 px.
- UITableViewCell (304 px)
- UIImageView (background for cell) (288px)
- Label 1 for text display
- Label 2 for text display
I am stretching UITableView just to take scrollbar at the end of yellow part as shown in image.
Everything works perfect except the separator line.
Even if I put width as 288 and click on somewhere else and come back to see width of UIImageView, it get changed to 304 (which is UITableView width) automatically.
Any idea why this is happening and how to make separator line of 288 px only.
Note
The separator line is above UITableViewCell. Not inside UITableViewCell
The separator line that I am talking about is the first line in above image.
Edit 1
I also tried with below code, but still its stretched to 304px.
UIImageView *mySep = (UIImageView*)[mainTableView viewWithTag:56565656];
[mySep setFrame:CGRectMake(0,0,288,2)];
Edit 2
I have uploaded sample project at dropbox.
Please remove the line [mySep release]; from - (void)scrollingFinish {. Else app gets crashed...
I solved your problem. In table view you can add only 2 sub views like footer and header. one is above cell another is below. these views width are equal to UITableview width. So when you do something like that. Not just add the UIImageview first add UIView and set its frame then add your UIImage view here is the fixed sample project given by -Fahim Parkar
Fixed Project
Can you check your cell size?
Do you create your cell object with code or using Storyboard?
Try to resize your imageview in
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
UIImageView *seperator = (UIImageView*)[cell viewWithTag:_sepTag];
[seperator setFrame:CGRectMake(8,seperator.frame.origin.y,288,seperator.frame.size.height)];
This is how I fixed.
Nice cheat I can say. I added UIView and put separator line inside UIView. Set UIView background color to clearColor and let UIView stretch as much as he want.
UITableView (304px)
- UIView (have width as 304px OR 288px, but background color will be clearColor. This is very important).
- UIImageView (as seperator line) (This will be 288px).
- UITableViewCell (304 px)
- UIImageView (background for cell) (288px)
- Label 1 for text display
- Label 2 for text display
So what will happen is UIView will get stretch, but image will be of 288px only. As we have UIView background color as clearColor, we cannot see the stretched view.
I know its very old post and i was having same problem too but i rectified it by fixing the height of image view in auto layout.
hope that helps.
I have a custom UITableViewCell subclass with width of 300.
Since the cell is 20pt shorter than the table view, When the cells get loaded, its placed on the left most position, is there a way to center this custom cell to the tableview's center?
I tried cell.center = self.tableView.center in cellForRowAtIndexPath, but it wont work. any idea?
You can pad your custom cell with 10px to the left so it will only appear to be centered, so you just make the width 310 and move everything else inside by 10 px.
a) Resize your UITableView to 300 and center it.
or
b) Make your cell's width same as UITableView's width. Make your custom cell's background color clearColor. Add one more view to your custom cell subclass that will contain every other view and add every view in that view. Think of this like an illusion where the cell is actually wider but it's contents are centered in a fake view.