Where to begin? - iOS "excel- like" view - ios

I'm new to iOS development. I have finished the "console" part of my app (it does what I need it to do in a Mac app without a UI), but now I have no idea on where to start for my (iOS) UI part.
Basically, I need something like a simple grid of cells (like Excel); my code reads a file, creates a dynamic (varies per file content) 2D array, and I want to show this on my UI, making each cell selectable by the user (each cell would correspond to a position in my 2D array).
Could someone point me in the right direction (even if its only the name of the classes I need to look up in apple's doc.)? I have been trying to find answers online, but it seems I'm not looking for it right.
In case I didn't explain myself correctly, I want something like this:

UICollectionView is the correct class to use for this. It allows you to create layouts with multiple rows and columns in a similar style to UITableView. You can also create your own custom layouts if the default one does not do what you need.

Related

How are complex iOS screens made?

I'm trying my first steps in iOS development, and so far my app is going well. However, I've reached the point where simple UITableViews are just not cutting it.
For starters, I have a table view with two sections. I've implemented the method providing each section's title. But when I compare it to, for example, iOS's Settings screen, Apple's style (which I've seen implemented in other apps) looks much better, with better styling in the "section titles" and complex controls in the "table cells":
Now in my app, in some screens I would like to implement something similar to WhatsApp's settings screen. In this case, each "cell" does not have anything very noteworthy layout-wise, but I like the spacing between the different sections:
My last question is: when I am composing a cell, it is very clear to me how to implement a layout, its constraints, etc. Now imagine that I want to show a Table View showing a list of teams, and for each team I want to show the team players underneath, one player by line. It is not yet clear to me how I define layout contraints with an arbitrary number of elements. How would I approach doing this? Grid inside cell?
To sum it all up, my question is: are these screens TableViews with fancy styles and cells and more complex implementations? Or a different View that I am not aware of? Or even an empty canvas that they then compose "by hand"?
For context, I am developing with XCode 9, Swift, on a project with storyboards.
They are custom UITableViewCell cells (like the volume and profile avatar) or standard cell prototypes (WhatsApp settings are UITableViewCellStyleDefault with cell.imageView.image set.

iOS Swift - Efficient way to design HTML-like Table

I am fairly new to iOS Swift Development and I am currently designing UI for my mobile application and the goal is to produce something similar to HTML Table with header on the left and content on the right like follows:
Currently I have achieved it by using multiple Stack Views and stacking it against one another in the following manners:
However this has caused my Xcode to be very slow (I assume it is caused by stacking too many things and it uses memory).
Therefore I would like to know whether there are other more efficient ways to achieve the same result (produce the same design).
Thanks in advance.
Why don't you use tableview? Add two labels in each cell on left size and right side. Set the style of cell to right detail if you want to use the default configuration.

TVOS about App layout (Like in iTunes and similar)

I have played a lot with my app and I do not understand how to make layout like in for example iTunes (also many apps uses it).
How it is made? It is one big CollectionView, but with special Flow or it is TableView with many CollectionView?
Collection headers. In iTunes App if I select item (with adjustImageWhenFocused) under the header then the header will jump up and the item will not overlap the header. It is special magic or it is system behavior and I just do know how to use it?
Below is two screenshots about what I am trying to tell you and example with my app.
In iTunes there are movie preview page. With what type of View it is made? TableView,CollectionView or just ViewController with ScrollView?
I have read many sources and looked up demo projects, but nowhere I have found answers for this questions.
1) I think it would be a stackTemplate containing a couple collectionLists.
2) AFAIK the headers "jump up" on their own, no need to prepare anything special.
3) productTemplate?
For examples, see https://github.com/iBaa/PlexConnectApp, /TVMLTemplates/Default/Movie_OnDeck.xml (1) or Movie_PrePlay.xml (3).
Or check the gold source: https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/StackTemplate.html, plus other Templates.
If you want to use native Swift way it can be achieved in following ways:
You can use table view and have collection view within each cell. I am using same approach to achieve this.
We have focus update delegate from there you can find the focused frame of image view. With the help of focused frame and label frame you can check if they are intersecting or not. Based on that you can move label up and down.
This is native TVML template, in order to achieve in swift you need to create view using tableview and collection view.

XCode autocomplete

I'm new to IOS development, I have a few questions.
1) What's the purpose of property rowheight on table view cell, I mean it does nothing even if I change its value, it always takes the value from its parent view i.e a tableview property rowheight? It visually changes in the IB but nothing happens when I run the app.
2) What's the purpose of Content View why is it even there? Let's say If I have to make some image equal to the height of the cell it restricts me. Or is there any way a content view can be changed to be equal to the cell height & width? I have to put constraints on the image in relation with the cell which is not the immediate parent of the image and I don't know if this is the correct way to do it.
3)How does Xcode Autocomplete works? like if I want to write a function tableview(_:tableview didselectrowwithindex:IndexPath) and I type tableview it shows a list, what to do next? I mean I can't type the whole fucntion with params or find the func in the huge list.
The height of the cell set at the IB is primarily used for simulation, the views described at IB are normally resized when actually used. E.g. you can set rows height to be 100 for the table view, 30 for some of the cells and keep the whole controller simulating a nice screen of iPhone 6. The same view will be used for all devices and will be scaled accordingly as well as the cells with the help of your delegate.
The content view is there for the reasons directly related to your additional requests. It holds all the content while there other views that accompany your content and are part of the cell like separators, accessory views, slide action views. Without a content view the responsibility of managing all the additional parts would most likely fall on you as a developer and while you might think that that is fine at the simple layouts, a simple enhancement to it would make a huge impact.
Fuzzy autocompletion at Xcode seems to be something Apple is working on now. If you can't wait and find it too difficult to navigate through the list, there are Xcode plugins available that provide fuzzy autocompletion.
Answering the question in the topic:
example: tableview(_:tableview didselectrowwithindex:IndexPath)
if you write tableview it will show all the symbols that start with tableview. For functions, it will show all the functions sorted by the second parameter name (didSelectRowWithIndex).
[EDIT]
it will autocomplete as far as the answer is unique and then show you a list full of options. I don't know any tricks to skip looking through the massive list. But after a while you'll know what you're looking for and it gets faster.
[\EDIT]
when you press tab, it
by the way: the delegate functions names start with the name of the object they're related to.
So UITableViewDelegate functions start with tableview.
as for your first two questions there are tons of answers for those questions on SO. This one seems closely related to yours.

Objective C: How to implement a datagrid view (tables with multiple columns)

I am currently working on an iPad application that uses a table view to present data, I was inspired by the iTunes application in iPad that present it's data in multiple columns in a very nice and neat manner, and the most interesting thing is that during the portrait mode the itunes application displays data in 2 columns but when the user switches to landscape mode, it switches the display to 3 columns (since there are plenty of space to display data horizontally).
This is what i'm talking about:
but i found out that iOS SDK only supports single column for tableview (it would be nice to utilize the entire space provided on iPad screen to present data), i did some research and i found out that the best way to present data in multiple columns yet like spreadsheet style is to use datagridview instead, but iOS SDK did not provide any data grid view controls for iOS developers.
I found out over the internet some customized tables like:
AQGridView.
DTGridView.
and also the one from this:
http://usxue.is-programmer.com/posts/14176.html
and the one from this:
http://xebee.xebia.in/2011/04/14/building-editable-gridview-for-iphone-apps/
But sadly none of these ever met the requirements of the application i was working on.
Could you guys provide me some ideas or share some sample codes or links on how to display data in somehow-data grid view, to achieve similar effect used in iTunes application (as shown above).. Any form of help would be pretty much appreciated. Thank you guys!
The summary answer is, place multiple data "views" across in a single cell.
The more detailed answer:
Create custom views that represent the single cells you want. You can for this purpose make them resizable enough to work two across or three across (they will get loaded into 1/2 or 1/3 of the cells bounds).
Then make a custom UITableView cell, that can take two or three data items - load up an instance of the custom view previously created in the cell for each data item you have, placing them next to each other. You can have the cell do the view layout when groups of data items are added.
In the cellForRow code in the table delegate/datasource, you use your data source in groups of two or three (and report the row count accordingly) to pass along to the custom cell.
Sorry I can't share code, but I have used this technique before in other applications.
What's wrong with creating a UIView class to represent a single cell, and another that lays out an array of those cells in a grid? Put your grid view in a UIScrollView and you're about done.
UITableView is obviously a pretty complex class. Much of that is to make it very general, very reusable, and able to support a huge number of rows. Your class doesn't necessarily need to be that complicated -- if you have a fairly small number of cells, your "grid" could really just be a UIView in which you lay out cells in rows and columns. UITableView removes cells that aren't seen in order to save memory; you might need to do something similar if you have hundreds of cells, especially if they're large, but a few dozen probably won't require that.
In short, since you need a grid view for a particular use, you don't need to do all the extra work that would be required for a general, reusable solution.

Resources