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.
Related
I am developing an app in which i am showing a image view.There are some red dots on image which are UIButton.When user tap on button then image should zoom.For that i have added a scroll view with constraints as below
Inside scroll view i have imageview
Now i when my screen size changes then image size also changes.I have added a UIButton as red dot.I have given it's constraints horizontal & vertical line.
Now when device size change then button position on image also change.
What i want the button position should also be same on all device even if the image size grows.Please tell me how can i do that.
Add the button on top of the UIImage View
then add constraints by dragging from the button to the image.
first put two constraints for leading space from UIImageView and top
space from UIImageView to be a constant or standard depending on ur
needs.
It would look something like this as ur code..
button.top = image.top
button.leading = image.leading
adding these two constraints will do ur work.
If u want to fix the size of the button u need to add hieght and
width constraints.
ill attach an image on how it looks like
here the weather icon is the image and i m setting constraints on the button
(remove the constraints for trailing and bottom)
To place the button according to the image
set the image to a known size say 100 x 100
and then place the button at the required place.
now check the distance from the top of the image to the button.
ex. if it is say 12 then ur ratio will be 12:100
now set a constant (button.top) to 12.
so now if the height changes to say 200 multiply it by the ratio
i.e image.height* 12/100
in the given example constant = 200(new image hieght) *(12/100)(ratio) = 24
so the new distance of the button.top = 24
Like a view, you can drag and drop the constraints into the viewController.m file:
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *myLayoutConstraint;
where you can manipulate programmatically:
[UIView animateWithDuration:1.0 animations:^{
self.myLayoutConstraint.constant = 10;
} completion:^(BOOL finished) {
//handle completion
}];
I'm using a table and image in my program.
I placed the image on top and table just below that.
Now I need to keep the Image static and On scrolling I want the table to go above the image according to the scroll height.
Use the contentInset of your UITableView to adjust the initial offset of the content. Make sure your tableView is front of your UIImageView.
[self.tableView setContentInset:UIEdgeInsetsMake(viewHeight, 0, 0, 0)];
contentInset will only adjust the initial content position, so when scrolling, the whole frame of your UITableView is used.
Update: UIView is UIImageView in your case
You can use it by Placing both the UIImageView and UITableView in UIScrollView
And set UIScrollView contentSize() according to need like
1.) scrollView.scontentSize = CGSizeMake(scrollView.frame.size.width, imageView.frame.size.height + tableView.frame.size.height + 10);
2.) Set UITableView scrolling to NO
This would help you.ThankYou
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.
I have two questions related to UITableViews.
1) The first one is, what is the gap at the top of the UITableView? My app always starts with the top cell not flush with the top of the tableview (as shown in the second image), it starts about one cell lower, i.e. where that gap is in the interface builder. I can't find where that is coming from, or why.
2) I can't seem to resize the uitableview programmatically, I'm trying to reduce the height after a popup appears. I've shown an example of it not working in the second picture.
Here is (an example of) what I am trying at the moment:
- (void)viewDidLoad
{
[super viewDidLoad];
self.table_view.delegate = self;
CGRect tableBounds = self.table_view.bounds;
tableBounds.size.height -= 100;
self.table_view.bounds = tableBounds;
CGRect tableFrame = self.table_view.frame;
tableBounds.size.height -= 100;
self.table_view.frame = tableFrame;
}
Thanks!
UITableView Selected:
Simulation:
In your xib (or storyboard) put your UITableView at position (0,0). ( the same position as the navigation bar).
The first image shows that your table view has problems even in Interface Builder. It looks as if you've set the top inset incorrectly; check your edge insets.
The reason your resizing code is not working is probably that it is too early (viewDidLoad); put it in viewDidAppear: and see if that works, and if it does, try moving it back to viewWillAppear: so the user doesn't see the resizing. If it doesn't work, it might be because you're using auto layout; you can't manually alter the frame of something whose frame is dictated by auto layout. (Your resizing code is also silly; you want to set the frame, not the bounds.) But it might also be because you're using a UITableViewController in a UINavigationController; if you do that, the table view is under the navigation controller's direct control and its size is not up to you.
I want to show links between two cells of uiTableView.
For Ex:
To show links between cells 1 and 5, it could be shown like:
Does any one has any idea how this can be achieved. Also when table scrolls, these links should be scrolled with it.
This looks like you want to build hierarchical view. Your implementation might be rejected by Apple due to not taking HIG into account.
Also what will be in case when lower part is not seen to user? Arrow with no end and need to scroll down for the user?
You might want to do a tree like structure (anything hierarchical) instead of ugly (sorry for that) arrows.
If you want arrow between two cell then make a separate UIView class for the Tablecell, in that UIView add one UILabel for text and one UIImageView for arrow, adjust there position as per your requirement.
Now pass this UIView to cell.
Hope this will help you.
UITableViewCell is just a subclass of UIView and UITableView is a subclass of UIScrollView. The only fanciness that UITableView provides is creating/reusing the cells and laying them out in the scroll view. (That's a gross over-simplification but for this It'll do the trick.)
So if I have a UIView subclass that draws an arrow, then it's just a matter of getting the frame for the cells I want to point to. CGRect frame1 = [[self.tableView cellForRowAtIndexPath:indexPath] frame];
Some pseudocode...
topCellFrame = get top cell frame;
bottomCellFrame = get bottom cell frame;
arrow = new arrow view;
arrow set frame = frame with origin of top cell frame origin, and height of distance from topCellFrame to bottomCellFrame;
tableView add subview = arrow;
There are edge cases to think about, If the top cell or bottom cell are offscreen the cellForRowAtIndexPath: will return nil and frame will be CGRectZero.
But I'll leave that as an exercise for you.
Edit: (I haven't done this exact thing, but I have done some similar things with the frames of cells)