I have a chat on a web site that looks like this.
I am now building an iPhone app for this and have some problems creating the same layout. I hope you can point me in the right direction. Is subviews or webviews the best choice?
If using UIView, UILabel and UIImage, what is the best way to make rounded corners and the little arrow. The gradient background should not scroll with the table view. What's the easiest way to calculate the hight of each message? What is the best way to async load the images over http?
If using a webview, what is the best way to populate it with data? Building string? Having a template and populate the image, username, time and message thru JavaScript? How can I resize the UITableCell and UIWebView to fit the contests?
Will a table full of UIWebView be much slower than using labels? Will I need to create it twice to return the height of the cell in heightForCellAtIndexPath and add it in cellForRowAtIndexPath?
Thanks for your help!
If you wish to see it live, visit www.aktieguiden.com
This is really a lot more than two questions, and I'll answer several of them.
I would use a table view with a resizable UIImage and a UITextView for each bubble. Use an image of the bubble in png with a transparent background, and make it resizable. Import it with UIImage's -(UIImage*)resizableImageWithCapInsets:(UIEdgeInsets)capInsets. To determine a height, UITextView has a contentSize property which will tell you the size of the view that can be scrolled. For asynchronous loading, use one of the many tutorials or frameworks for that purpose. Here is one:
http://developers.enormego.com/view/what_if_images_on_the_iphone_were_as_easy_as_html
Related
I want to implement an horizontal collection view displaying images that increases the size of the images with a smooth animation as they approach the center and reduces their size as they move away.
I have been studying the UICollectionView potentials but so far I have not been able to understand if such behaviour is possible to be implemented using UICollectionView or what would be the best alternative. For instance using UIScrollView instead (with a lot more work probably).
Some guidance or sample code would be most welcome. Thank you.
I am trying to achieve a certain layout that looks like twitter and many other apps. Some people do it in UIVIewLayouts but I want to achieve it using this way (if possible ). As you see in the attached image. I have Header, and cells in the collectionview.
While scrolling up I want to minimize the imagview avatar inside the headerview. -> ( ViewForSupplementaryEelementHeader )
while scrolling down, I want to make the top UIImageview to be fixed to the top and stretchy
Thank you all in advance
*ps I am doing all of this in code nothing with storyboard and I dont want to use it at all.
Please advise me how to access these imageview while scrolling up and down.
I think this is the example you are looking for
https://github.com/sunlubo/StretchyHeaderView
This will add only tableview in storyboard...other all the work is done through coding
I'm trying to develop something like CSStickyHeaderFlowLayout but customized for my table, but I'm not sure how can I achieve this goal. The idea is
Someone can give me a hint how achieve this objective?
To add to Vollan's answer, to make the title stay still you could use a view that contains two subviews: the first is the scrollview (with the image and table as Vollan suggests) and then add another view (like a UILabel) for the title. Thus, while the image and table scroll in the scrollview, the title will stay still.
Best solution would be to wrap everything inside an UIScrollView. That will allow you to scroll to bottom of the screen and then only scroll the tableview. That way it will appear like the tableview will overlay the image.
While using a tableview within a scrollview would likely work, your tableview would have to always be it's full size (without some annoying constant re-sizing), so you'll lose the value of the enqueuing/dequeueing that makes tableViews work so well.
The CSStickyHeaderFlowLayout has example pretty similar to what you want to do, did you look at their examples? You may be able to play with it and get it to do what you want If your problem is simply having a constant title, you can just add a view above the table or use the NavBar and adjust the contentInsets
You might also consider using a collectionView instead. It's much more flexible as far as layout goes.
I have a UIView then I put small UIImageViews with an image but I would like to replace this with a UICollectionView. I am not sure how to make the cells go in a upside down U shape like this.
Any help would be appreciated.
This is what UICollectionView is for, however, this is an advanced subclass of UICollectionViewFlowLayout
and really not something to "ask" for a solution here on SO, however, Google and you will find some tutorials regarding custom layouts, for example.
If you have no dynamic updates or movement of the UIImageViews, and they will always be visible on the UI (not move out of the screen) you really don't need a UICollectionView for this, but rather a customized UIView with your custom UIImageViews on it.
You could do this in a XIB subclassed UIView and with AutoLayout for example. (You can still customize it to dynamically update and move of course if needed)
Sidenote:
If the UIImages loaded into the UIImageViews are big sized, they will soak your memory and you will probably run into memory problems, make sure your UIImage are thumbnails and according to the displayed UIView size.
I'm playing around with UICollectionView interactive transitions.
The very basic implementation is here.
Now I'm a bit stuck with Cells transitioning.
The idea is to change content of cells simultaneously with interactive layout transition.
Here is how it looks now.
The first layout
And the second layout
When transitioning is finished, I want to change content of cells on second layout.
1) Text label "Some label" should disappear from every cells
2) Text label "Another label" should appear on the right corner of each cell.
Key issue is I want this changes fade in/out according to UICollectionViewTransitionLayout.transitionProgress value during transitioning.
Something very similar implemented in Facebook Paper App.
Take look how content of cells is changing below (click on it).
Is anybody know an elegant way to replicate this effect?
This library will help you achieve what you are trying. If you are interested in custom animations I would suggest you use FB pop library
Well.
The solution is to subclass UICollectionViewCell.
Subclass should contain two UIView. One for big layout & one for small.
Initially UICollectionViewCell shows only small one.
Once we starting to update UICollectionViewTransitionLayout.transitionProgress for example from small to big we should do following steps:
Make an UIImage from big UIView
Put this image above small UIView
Set alpha of the image to 0
Continuously change alpha of UIImage to UICollectionViewTransitionLayout.transitionProgress value
Once transition is done just switch this to UIView
When you transitioning back you should switch big with small.
Done :-)