Swift 3 CollectionView or UITableView with fixed left column - ios

I am using Swift 3. I am currently using a UITableView to display a list of items - specifically a list of athlete results from a race and it has about 10 columns (e.g swim time, bike time, run time, place). I am currently using a UITableView and it works OK, but I am finding it difficult/not possible to do what I want. I found a few other solutions out here that are similar but they are using HTML/Web front ends vs swift 3 / native iOS.
I would like fixed width columns, and column headers. I want to be able to scroll left and right and up and down. I want the far left column to be fixed. This is the column with the athlete name. I want all the other columns to scroll left and right while this remains fixed.
I use an app called PowerSchool for my kids' school that illustrates the concept perfectly. Attached are two screen shots with names and grades brushed out.
Scroll View One
Scroll View Two
I am thinking that UITableView will not do this and I need to use UICollectionView or something else.
Any info to help me get started on this would be greatly appreciated. I plan to make this work on iPad and iPhone in both portrait and landscape.

Hi for this you need to two components.
Either a UIScrollView with a UITableView
or UITableViewCell inside a UICollectionView
or a UICollectionView inside a UICollectionView
This can be achieved by mixing two components or you can use some sort of library:
https://github.com/fullc0de/HKKScrollableGridView
https://github.com/kanaishinichi/TAXHeaderSheet

Related

Horizontally Scrolling UICollectionView with Vertically Scrolling Sections

I'm trying to implement the following:
At the top is a segment control that, based on the user's selection (either tapping or scrolling), moves to the relevant CollectionView section.
I've been playing around for a couple of days with CollectionViews and maybe I've just confused myself with LayoutFlows and CompositionalLayouts or is that over complicating it?
I have a diffable datasource that is made up of [Sections, CellItems] but I'm struggling with how to structure it.
What is the recommended programmatic (rather than using interface builder) to do the above? I was just going to originally do 5 horizontal cells, each with a tableView but based on some other comments I've seen from Apple on the Apple forums and the move away from TableView to CollectionView at this year's WWDC, I thought I should be trying to do this properly.
Any direction would be appreciated. All my research seems to point to using orthogonalScrollingBehavior but that layouts out the sections vertically with each section scrolling horizontally.
So my question is should I be trying to do what I'm doing using a CompositionalLayout?
Well first off your segmented control idea makes this sound like you could just use a page control for the horizontal aspect and remove a lot of the collection view complexity. Something to consider anyway.
As for the data source, I think all you need is an array of arrays. Eg. [[CellItems]]. So CellItems[0] would be the first column. Then CellItems[0][0] would be the first cell. CellItems[1][2]... 2nd column 3rd cell. I do apologize as your current solution may be related to diffable datasources and I haven't had time yet to dig into those.
Start with the horizontal axis first and ignore the vertical axis. Get that working as needed. Once you have that up and running... implement another collection view into the first one's cells.
Sorry if I misunderstood the question if it was more about HOW to implement a collection view.

Is it possible to create an UI with a table View with two columns?

I‘m an absolute beginner! I want to program an app in iOS. The UI of the main screen should have two columns. The left column should have a static width. The right column should be much wider than all iOS displays. When I swipe over the left column up or down the content of the right column should follow this reaction. The same reaction should be the other way around. When I swipe over the right display left or right, the content should move left or right and should be pulled out of the screen on the right or left side. Is it possible to realize this with two table view or two scroll views?
There are many ways you can achieve this, the best one would be with a UICollectionView, you can even use a UICollectionView within a UITableView's cell.
I think you are looking for something like kishikawakatsumi's SpreadsheetView, if you are a beginner, give it a shot.

UICollectionView sticky supplementary view

Assuming I'm on a chat scenario, I want user images to move along with scroll until the other user's messages appear. Some visual example:
I'm using a subclass of UICollectionViewFlowLayout to display the messages and provide that initial left offset for the messages (the sectionInset property is not working on iOS 9 for some reason) and I assumed handling a custom supplementary view to do what's shown above should not be that hard, but apparently it is :)
Some info:
I'm not using standard header/footers for flowLayout since it add a space between sections that I don't want
Found this link which is pretty interesting from performance perspective but the example is somehow incomplete (great post though)
I'm trying to avoid shouldInvalidateLayoutForBoundsChange: to return true and recreate attributes every time since chat cells can be complex in terms of size calculation.
I believe this is not a weird scenario, have anyone accomplish something like this successfully? If so, I would appreciate some pointers.
Thank you in advance.
you can use sections for each cell groups. When using sections they have to be a clear background and be customized. So message cells can be scrolled below sections and circle images on section will be on top of its cells.
As a second way, you can use circle images apart from all collection items. For this, you have to create circle images that how many required. While scrolling up/down, they have to be moved as they will be anchored on top of message cells group.
I hope it helps for you :)

UI Buttons with tableview

I am trying to code a tableview with words on the left and buttons on the right for each row. Is that possible to do?
I have got the words coded for each row however I am struggling with putting the buttons on the right side and spaced evenly as well as following the screen when scrolling up and down the tableview.
At the moment I have just been adjusting the button's y axis numbers from the right side controls in the x code to make sure the buttons are evenly spaced but it is not following the scroll. Is there is an easier or more efficient way of doing this? Any help would be great.
Thanks!
You should create your own UITableViewCell. Apple has a tutorial in their documentation how to do that. It's written for Objective-c, but you can easily change it to swift. Also there are tutorials like this tutorial on YouTube.
Basically, what you need to do is creating a UITableViewCell and use it instead of the normal UITableViewCell in the cellForRowAtIndexPath. After that, you can add whatever elements you'd like to have.

UITableView or Collection View?

I have an iPad app which always stays in landscape mode. It is more of a data centered app with 5 columns and couple of hundreds of rows.
In current implementation, I have used UITableView. The rows' height could be anything depending on the data that comes in from server and all the columns can have different size.
The question is, can I use UICollectionView instead of UITableView? Will there be any performance issues? If yes, which is better in grid like layout? I understand UICollectionView is to be used in iOS pictures app like layout but how it behaves for grid like layout?
Thanks,
Pruthvid
What you describe is exactly what UICollectionView is designed for, it's the perfect solution. The limitation is only to the version of iOS you will be able to support (if you need to go back that far).
The choice really comes down to the visuals you want. Of you want each row to have a height defined by the maximum height of any column value in that row and the row appears as a single row item and the last row of the table should be full width then you may prefer to use a table view.
The collection view gives you more options for accessory views (as opposed to just the headers and footers of the table view).

Resources