I just want to know what exactly should I use in storyboard UI so that I can create multiple views which can replace one view with the after a click of button:-
Replacing first view with second in this way
And not this way
You can use a CollectionView as the Header of a TableView if you want a UI shown in first image.
TableView will be having Chat options and the Collection View will be having images as you have in the given picture.
Quick Overview :- TableView only supports Vertical scrolling which is best in your use case.
Collection can support both vertical as well as horizontal scrolling. So basically what you can do is have a collection view of height as much as you want as a header of your tableview. So when the user scrolls through your tableview your scrollview will also move up just like we have in facebook and instagram stories.
Even if you have more images in collection view then your predefine height set the scroll mode as you prefer horizontal or Vertical so that user can have a look at everything you have in there.
Edit :- After editing your question this can be done for what you're looking :-
You need a Navigation Controller. Here's the Navigation Controller Push and Present of the answer which shows in detail how you can achieve that.
By doing Push you can achieve what you want (first image) and by doing present you'll achieve the second image result.
Related
I would like to construct a view controller where one section of the view controller would be still and one section scrollable.
Both sections have headers where as well, one is still and one is moving along with the content in the section.
I do not want the cells in the section to be scrolled separately. All cells should move at the same time along with the header.
I have added an image to make my point little more clearer.
Use UICollection View for both view and disable scrolling for one view and enable scrolling for another view
you can probably add to your UIViewController view a UITableView on the left with fixed size (for example 150px) and vertical scroll disabled and a UICollectionView with horizontal flow and ,if needed a, with custom UICollectionViewLayout (but i think that you just need the classic UICollectionViewFlowLayout) for the right part that fits the remaining space.
Here you can find the component's documentation:
https://developer.apple.com/reference/uikit/uicollectionview
https://developer.apple.com/reference/uikit/uitableview
I am new to iOS and trying to implement something exactly like the scrollable bar with the various sports show here.
I want the user to be able to scroll horizontally through the various options and be able to select one. It can be very simple like the one linked, as long as it is clear what is selected.
I'm not sure where exactly to start. Should I be using a CollectionView?
You are right - UICollectionView is the best option for you. Do set the collectionView's layout to UICollectionViewFlowLayout with horizontal direction.
Setup the UIViewController to be the collectionView's data source and delegate. The selection with tapping will be available immediately provided by default UICollectionView behaviour. The collectionView's delegate will allow you to intercept the event when collection is scrolled to new item so you would be able to determine the new selected item.
I am making an app that use table View Controller and static cell.
I want to make first cell don't scrolling while other can. This is a picture of what i am talking about.(Sorry for my bad English)
For example as in this picture, I want to make 9gag tab stay when scroll. If you play instragram you will see that when you scrolling the name of user will stay until you scroll into another one. However I want it to stay not changing when it encounter second cell.
Any suggestion?
Using UITableViewController would not help here. You can use these steps to get what you want:
1. Create a UIViewController.
2. Add UITableView as its subview.
3. Add another UIView as UIViewController's view's subview.
4. Using auto layout constraints, you can put UIView above UITableView
This way, you will get a sticky view at the top.
Ok, not exactly sure what you're after but i'll take a stab.
Firstly, if you want the section to remain in place until a new section of items is present, you just need have a look at sections. This is an automatic feature. You may not see it occur until you have plenty of items in the sections.
UITableView With Multiple Sections
There's plenty of stuff about it & not too hard to implement.
My other guess of what you want:
If you want it to remain static regardless of anything, perhaps you could just create a view and place it above the table view. why does it need to be a part of it if it doesn't change?
I'm having a hard time finding the best way to structure this design.
The top view has a minimum height and becomes sticky when it reaches this height. The bottom view hosts a paging controller with three views within. Each of these views hosts either a collection view or table view with vertical scrolling.
I'm really at a loss on how to approach this. Is the entire view scrollable and I should prevent scrolling on the second view until the top view has reached it's sticky height? Or are each of these views separate uitableviews and the pagingcontroller is just one cell? Should I even be using a pagingcontroller or should I use a scrollview with paging enabled? (the latter was a little rough interaction-wise)
Thank you!
Take a look at the Advanced User Interfaces using Collection View from WWDC this year. This view is very very very similar to the iTunes Connect app interface. The entire session video explains how they created that interface.
I used a similar method to this to create the keyboard in the Emojicate app.
I think what I'd do is actually fake the sticky header. So something like this...
Use only one collection view.
Create a "segmented data source" that contains three data sources. (See the video from WWDC about this)
When the segmented control is changed then update the collection view by changing its layout and (if you want) dataSource.
Make the entire top section a header on the collection view.
When the collection view scrolls past a certain point (when you want to sticky the header) then have a second view that is the compressed header and make it visible at the top of the screen. This is not attached to the collection view at all.
When the segmented control changes you can update the collection view by changing the "selected datasource". The datasource can also contain a UICollectionViewLayout that will update it.
Essentially, the tableview you are talking about is just a collection view where the cell width is equal to the screen width. i.e. fake a table view.
The sticky header isn't sticky at all. Just when it starts to go off screen you can put a fake header there instead.
It will require a duplicate (ish) view and some thinking about how to structure the data but I think this will be easier and less resource hungry than having multiple collection views and page controller and stuff.
If you want me to go through it in more detail let me know but it's a complex subject. Watch the video first.
I would make this part a navigation bar. Should be relatively easy. Just have to customize the back button with a barButtonItem and do a couple of labels in the titleView.
I would make the next part a Table View.
The tableView has 2 sections. The first section doesn't have a section header and the second section doesn't have any cells but just a section header.
First and only cell in this section:
And the rest would be the second section header's view:
This gives you the stickiness that you want because the section header will remain there even if you scroll past it and since the collection has only 2 sections the controls will always remain on top.
I think the collection/table paging part is the hardest part and I don't know clearly how it can be done. But I was thinking it could perhaps be a ContainerView. Each view of the container view would be either a tableview or a collectionview. You would have to add some code to handle the movement of the containerview relative to the second section header (possibly an autolayout constraint that attaches the containerview to the buttom of the first tableview that you implemented above).
I don't think having your tables/collections in a scrollview would be a good implementation. I think I have even read in documentation that developers should stay away from that (but I might be remembering it incorrectly).
I would have:
A "header view" with three subviews:
Fixed height top and bottom views (they stay visible at any size).
A middle view that appears/disappears as the superview grows/shrinks.
A scroll view (table or collection view are subclasses) on that partially covers the header view with a top inset set enough to reveal the underlying header view (the same way pull to refresh views are revealed).
The paging buttons could be set as table/collection view section header views.
Finally track the scroll view's scroll position to keep manually adjusting the header view height.
Another way to see this solution.
Two completely separated parts, a header view and a table view.
A simple header view (blue) that adjusts its subviews as its height changes. More precisely hides its middle subview (light blue) when it shrinks.
A table view that a) partially covers the header view in Interface builder but b) has a top inset as to avoid hiding the header view in the actual device (tableView.contentInset = UIEdgeInsetsMake(60.0f, 0.0f, 0.0f, 0.0f);).
The two parts are only "connected" by resizing the header view height as the table view scrolls up/down.
I want to use a collection view thats horizontally scrollable along the bottom 25% of my screen full of pictures and then use the top 75% of the screen to display information about the selected cell (zoomed in picture, caption, people in it, etc.) of the collection view. My question is how to go about implementing view controllers in this situation.
Will I need a UIViewController to handle the whole screen and UICollectionViewController to handle the collection view (how do I get them to work together?) Or could I implement the whole screen with just one view controller? (if so, which one?) Should I use a custom CollectionViewController with one section being my main info, and another section being the bottom scrollable part?
No, just have one UIViewController and add the UICollectionView as a subview. Then set the dataSource and delegate and tell it to reloadData. If it seems too easy, you're overthinking it.