Implementing chat layout with UICollectionView with AutoLayout - ios

Is what I'm trying to accomplish here even possible? I've been searching for hours for sample code and/or SO answers that demonstrate this simply enough to follow, but so far no luck.
Goal: implement something that looks roughly like this mock:
Yes, I know this is easy with a tableview, but the full design includes custom interactions, multiple columns, UIKit dynamics, and custom animations when adding/deleting cells, so UICollectionView is the better candidate. Until I can get this core layout to work, though, the rest of it is just a pipe dream.
So far I've started with a subclass of UICollectionViewCell that has a single label with constraints to all 4 sides of the content view. At which point I run into these issues:
It's unclear how I can calculate collectionViewContentSize() when the cells don't exist yet, esp. given that the majority of cells are actually offscreen most of the time!
If I just throw in an arbitrary content size (e.g., 320x1000), my views show up, but their heights don't adjust to the label content…I can't seem to read the cell height from within my UICollectionViewLayout subclass.
Seen or done anything like this? I'd include code, but after hours of futzing with it. I'm just looking for a clearer tutorial or sample code that fits this scenario.

There's a project you might want to look at. It's fairly involved and probably has a lot of code for situations that don't quite match yours, but does indeed create a chat view using a UICollectionView.
It can be found here:
https://github.com/jessesquires/JSQMessagesViewController
For item 1 - with regards to calculating collectionViewContentSize, I think you'll find you may not need to calculate that, at least as long as you're using a UICollectionViewFlowLayout subclass for the layout.
And for item 2 - rather than set a fixed 320x1000 take a look at the JSQMessagesCollectionViewFlowLayout.m for sizeItemAtIndexPath.
Sorry, this probably should have been a comment, but I lack the reputation to comment & so I made it an answer (doesn't that seem backwards? Ah well.)

Related

Best way to display tabular data like the attached screenshot in Swift?

I am looking at the lower portion of this screenshot. If I had something similar to this in my design, what would be the best way to set this up in Swift?
I have looked into UITableView, but that doesn't seem to be quite what I need. Most of the tutorials & articles I've read regarding the UITableView only focus on 1 or 2 columns max, and don't really expand on how to go much beyond that.
I briefly considered just doing a bunch of statically placed labels, but realized that I will not always know exactly how many items are going to be in the table, so I need a more dynamic way of going about it.
Does anybody else have any advice on how I might go about achieving this sort of layout in Swift?
There are several ways...
UITableViewCell subsclass. It's perfect for your purposue, and you can design it's contents following your needs. (No matter if 2, 3 or 4 columns)
Combination of StackView Vertical with StackView Horizontal inside. Each horizaontal view will contains one of your row.
Generate a HTML page and injec it in a SFSafariViewController or WebView.
Static content. A plenty of UILabel. One for each piece of information
In my opinion the best aproach is the UITableViewCell subsclass.

Horizontal scrolling in section of UICollectionView in iOS, Swift

I develop an app for online shop that should has some design features that I don't know how to implement. Lurking for it second day, but no profit. I suggest, that it should be the simple CV with some custom cells for different needs (banners, products).
Problem - design has scrollable horizontally content in each section and I see no simple way to implement it instead of writing custom flow layout.
I tried to make a tableView with collection view in its rows, but its not working correctly.
May be you know some examples of implementation of same thing in swift or a good way to make such feature without flow layout?
Refer mention link May be help you from this link:- https://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell-in-swift/

How do I make a 'card stack' kind of UICollectionView?

I'd really like to do something similar to Tinder's "pile of cards" interface, but with a UICollectionView.
I would assume that if you need the other cells to dynamically move given the cell you are interacting with, one would be in Edit Mode on a UICollectionView, but I'm not sure.
Please don't reply with specific Cocoapods that do this and "why don't I just use those?"; it goes beyond just that. I have all sorts of content, and this is just one of the layouts / presentation types I need. Sometimes it's a grid. A lot of the controller actions are the same; just the display and interaction is different.
That said, please DO refer me to any code that may already do this, that I could use as a starting point.
Otherwise, I would be grateful to know where I would get started. I'm thinking maybe one of those projects that re-creates Springboard with a collection view??
EDIT: I was looking for something like a card stack, but not like Tinder in that you can interact with the top card before swiping or letting it return. In the end what I was trying to accomplish was similar to the old iPod-style 'Cover Flow' view.
I'll try to answer my own post. I made a few incorrect assumptions. In the end it was a lot less complex than I thought.
To get a collection view whose layout isn't just 'static within a scrollview' but changes dynamically with the contentOffset property, you need to subclass UICollectionViewLayout and make sure first of all you return YES for - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
from there, most of your heavy lifting will be done in the - (void)prepareLayout method.
I basically used the following tutorial as a starting point and kind of followed what they were trying to do (or just downloaded the final project and saw how they did it, and mimicked the same effect), but obviously had a different prepareLayout method:
Ray Wenderlich

iOS Design implementation recommandations

I would like to know how to handle, for my iOS app, the following situation:
I have to deal with something like this (basicly this is an article with comments, received from a server):
=- Text and Images -=
=- UIWebView -=
=- List of Comments -=
Now, I came up with two solutions:
Have the content above the list of comments wrapped in a UIScrollView, and create Views for each and everyone of the comments (don't know many of them could be), and
Make the list of comments a UITableView, and the above content its Header.
Which of these (or possibly another if you have any recommandations) should I choose? It may look not very important, but I would like to know this, so I could use the idea in further developing.
I would use a UITableView with a custom UITableViewCell wich holds the comments.
It will definitely have a better performance the UITableView than the UIScrollView since the UITableView re-uses the cells.
Using a UITableView you will just have to worry about customising the cells for the comments.
Otherwise if you want to use the UIScrollView in case you have a lot of comments you will have to create manually a way to reuse them which is what the UITableView does.
If you want something like facebook, so that the context + comments both are movable,then go with option 2.
But, if you want content always at the top, go with option 1.
Indeed, UITableView is a subclass of UIScrollView.
And If you think you might have many comments like (50+),
If you use scrollView, then you should have to supply scrollView with those number of UIView objects.
But, if you use tableView, it perfectly reused already created views.So evenhough you have 1000+ comments, it just uses 5 UIView objects

UITableViewController inside UIScrollView with Horizontal Paging

this is the situation:
I need horizontal scrolling, and table views inside every page. This is something like news app, it should display news from different categories, when scrolled in one horizontal direction, and inside one category it should display about 30 news, vertically scrollable, of course.
I have successfully done what i need, but...
I have following scenario:
UINavigationController
|__ UIViewController, which contains ScrollView and PageControl
|__ UITableViewController, which holds data in rows, and is displayed inside parent, which is actually ScollView
I know that this is not an ideal solution, but at least it works. As a base, i used Apple's code and tutorial for PageScroll found on this link. Instead of simple viewController to add to ScrollView, i used TableViewController, so basically i add tableController.tableView to the ScrollView.
I know, also, that adding tableViews inside scrollview is sort of adding a car inside a truck and driving that car, but i couldn't find more reasonable way of doing same thing.
So, i need your thoughts about how this can be accomplished using some other approach. I use storyboarding and iOS 5 for this, and everything seems (and looks) messy right now.
Thanks in advance, a lot.
I did something similar a few months ago, and it was like this:
UINavigationController
UIViewController with a UIScrollView
UIViewController with a UITableView inside (I use this because I simply hate UITablewViewController)
I followed the Apple's documentation about creating custom containers. There is a great video about that in the WWDC 2011 video's section if I am not mistaken. I can proudly say that the code is really clean and simple to understand.
Answer 1.0
The one thing is, did you managed to get proper orientation handling of the tableView, without any hack, or you don't use it?
No, in this case I didn't, but I am sure I would have been able to do it without any problem. You see, most of the problems come when you just [self.view addSubView:newViewController.view];. You just add the UIView, all the logic of the rotation is handled by the newViewController and not in the controller where the UIView will be.
The other thing is, if i'm gonna try to implement, say, GridView or something like that, for iPad, orientation handling and animations become very ugly.
I implemented this in another project and it was quite easy to implement once you understand what's going on:
I used a UIViewController with a UITableView so I could get all the goodies from the dequeueReusableCellWithIdentifier:, creation of section's titles, table's headers and footers, etc. I just figure that no matter what I would do with a UIScrollView a UITableView is always going to be more optimized. As the UITableViewCell's I just used an holder with 3 squares, each one being a picture. (my application was a showcase of pictures)
http://www.raywenderlich.com/4680/how-to-make-an-interface-with-horizontal-tables-like-the-pulse-news-app-part-1
Chk out above link

Resources