I have added a UICollectionView which will have 5 cells, scrolling horizontally. I would like the user to be able to scroll between the cells, where each cell will snap to the centre. Here is a my UICollectionFlowLayout code used with the cell sizes etc.
-(UICollectionViewFlowLayout*)collectionLayout{
if (!_collectionLayout) {
_collectionLayout = [[UICollectionViewFlowLayout alloc]init];
_collectionLayout.minimumInteritemSpacing = 0;
_collectionLayout.minimumLineSpacing = 30;
_collectionLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
_collectionLayout.itemSize = CGSizeMake(200, 165);
_collectionLayout.sectionInset = UIEdgeInsetsMake(0, 65, 0, 55);
_collectionLayout.collectionView.pagingEnabled = YES;
}
return _collectionLayout;
}
I have added insets so the first and last cell stops in the middle, though any of the three cells in between don't. Please see attached screen-shots to illustrate -[2 screen shots below]
I can easily achieve centralised paging of the cells if they are the width of the screen or I simply make 5 sections, however if I do this, then the user does not see the other cells left or right, which I need so they know there is more to scroll to, if you know what I mean.
I have read similar answers about disabling paging and using scrollViewWillEndDragging methods, but I could not get these to work either.
If anyone can offer any clear way to do this that would be great,
Thanks in advance
Jim
This likely won't be the solution you're ideally looking for, though it's an option you can use, as I have used for the set up you describe.
Increase your Uicollectionviewcell size to the width of the screen, with your purple square as view centralised within the cell. Remove your section inset code and change line spacing to =0.
At the left and right sides of the cell place arrow images (or as button), or a swipe gesture icon so app user knows there's more. As you've only got 5 cells, have cell at IndexPath.row==0 and IndexPath.row==4 to hide their left and right 'more' arrows respectively.
Related
I want to animate the top and bottom most cells in a UICollectionView as they enter and leave the screen. I don't just want to animate using scrollview delegates and a one time animation. I want the animations to be progress driven.
Example: Top most cell gradually fades away as cell scrolls farther offscreen.
I have scoured the internet for a way to do this, but the solutions are either way outdated or don't achieve this effect. Thanks in advance.
You could try to use NSCollectionLayoutSectionVisibleItemsInvalidationHandler
let section = NSCollectionLayoutSection(group: group)
section.visibleItemsInvalidationHandler = { visibleItems, scrollOffset, layoutEnvironment in
// perform animations on the visible items
}
If you know height of cells, you could track with scrollOffset when top cells will be scrolled away and add animations.
When a new item is added to visibleItems, you could apply to it animations too. Also if a new item is added, than the top one will be replaced, so you could work just with visibleItems for both cases.
Is there an easy way do determine if you have enough TableViewCells to cover the whole screen? Like the whole screen space reserved for the TableView is covered in cells.
I know you can add up the height of each cell and the height of group headers and the StatusBar and any other elements in the screen and see if the sum if less than the height of the screen of the used device. But is there a more elegant and easier way to know?
You can count it by something like,
let tableViewLastPoint = self.yourTableView.tableFooterView!.frame.origin.y + self.yourTableView.tableFooterView!.frame.size.height
then compare that if tableViewLastPoint is greater than your screen's height then you have cell that requires more height then screen, else cells are not required full screen!
In this case you should initialize your tableview's footerview with zero frame like,
self.yourTableView.tableFooterView = UIView.init(frame: CGRectZero)
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)
I have a grouped tableView in my iPad-app, and I've been trying to set cell.imageView.center = cell.center to center the image instead of putting it to the leftmost position. This is apparently not possible without a subclass of the UITableviewCell(If someone could explain why, that'd also be appreciated.. For now I just assume they are 'private' variables as a Java-developer would call them).
So, I created a custom tableViewCell, but I only want to use this cell in ONE of the rows in this tableView. So in cellForRowAtIndexPath I basically write
cell = [[UITableViewCell alloc]initWith//blahblah
if(indexPath.row == 0)
cell = [[CustomCell alloc]initWith//blahblah
This is of course not exactly what I'm writing, but that's the idea of it.
Now, when I do this, it works, but the first cell in this GROUPED tableView turns out wider than the rest of them without me doing anything in the custom cell. The customCell class hasn't been altered yet. It still has rounded corners though, so it seems it knows it's a grouped tableView.
Also, I've been struggling with programmatically getting the size of a cell, in cellForRowAtIndexPath, I've tried logging out cell.frame.size.width and cell.contentView.frame.size.width, both of them returning 320, when I know they are a lot wider.. Like, all the rows are about 400 wide, and the first cell is 420 or something. It still writes out 320 for all the cells..
This code will not work for a couple of reasons:
cell.imageView.center = cell.center;
Firstly, the center is relative to its superview. I believe the cells superview is the tableView. The imageView's superview will be the content view of the cell. Therefore the coordinate systems are different so the centens will be offset. E.g. the 3rd cell down will have a center of 0.5 widths + 3.5 heights. You should be able to ge around this issue by doing:
cell.imageView.center = CGPointMake( width / 2 , height / 2 );
The second issue is related to how the table view works. The table view manages its cells view's. The width of a cell is defined by the table view's width and the height is defined by the table view's row height property. This means the cell itself has no control over its size.
You can however size its subviews, but you must do this after the cells size has been set (otherwise you can get strange results). You can do this in layout subviews (of the custom UITableViewCell class). See this answer.
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.frame = ....
}
When layoutSubviews is called the cells frame has been set, so do your view logging here instead of cellForRowAtIndexpath.
As for the GROUPED style. Im not sure if this is designed to work with custom views. I suspect it sets the size of its cells to its own width minus a 20 pixel margin on each size, then applies a mask to the top and bottom cells in a section to get the rounded effect. If you are using custom view try to stick with a standard table view style.