I'm wondering how did Twitter implement it's profile screen. At first I thought it is a table view with a header (profile info) and section header (segmented control to choose tweets/media/favorites). It would make sense for me as the profile info goes away while user scrolls down, but segmented control stays, and that's exactly behavior of plain UITableView header view and section header. There is also an image view at the top, under navigation bar, but that's not what's important for me. Here's a visualization of what I think it is:
I tried to recreate it in Interface Builder and that's what I got. The slider drew my attention: it's different than in Twitter app, it starts at the top of table view header, not at the top of cells.
So… how did they achieve it? Did they put a UITableView in a UIScrollView and handled touch/scroll events themselves? I don't think so, since it's discouraged, but I can't think of another explanation.
I'm not sure about the slider, but here they did pretty good job with mimic twitter profile view. So take a closer look, maybe you'll find this helpful.
You can adjust the height of the scroll indicator to sit below your header using
tableView.scrollIndicatorInsets = UIEdgeInsetsMake(yOffset, 0, 0, 0)
yOffset would be the current on screen height of your header. If you adjust this as the user scrolls down using the scrollViewDidScroll method from UIScrollViewDelegate, it will achieve the smoothly changing effect that twitter uses.
This page goes into more detail on creating the twitter profile effect, building on the method described in the link supplied by njuri above including changing the scrollbar to be correctly positioned.
Related
Im am relatively new to Swift/iOS and i have a quite complex task to Accomplish, and i want to know the best way for doing that.
I need to have a Custom View. This View displays some content, e.g. a news-article. If the user taps on the View, it expands and shows a more detailed version of the news article. Also, the user cann scroll horizontally (in the expanded or collapsed state) to get to the next article.
A Visual explanation
I searched for each problem individually. For scrolling, i found that i can use a scrollview with paging enabled, so that each swipe will lead to the next article. But im not sure if that is the best solution for my problem.
For expanding/Collapsing a view, i only have the idea to programmatically set the size of the view to fill the screen, so that auto layout would no longer display everything that is located beneath our custom view. Would that be possible? And is there any better solution?
I've been searching for a way to pin views/images to the top of a UIScrollView when scrolling. However the posts/articles I came across are not in swift 3. I'm not sure if I'm typing my question in the web correctly. So my question is how can we achieve the same behavior as a UITableView or UICollectionView. When you scroll, a section will stick to the top until another section pushes it up. I'm wondering would we be able to use views/image and pin them at the top of the UIScrollView. Down below is a screenshot of a UIScrollView that has 4 views.
So when scrolling I would like to pin the first view/image to the top until another view/image pushes it. Also would it be possible to determine which view sticks to the top. So lets say I only want the red views to stick until another red view pushes it. Been looking for a way to achieve this type of behavior for a while now.
Please help, would really appreciate any help provided at this point. Thanks.
A few ways to do this, but you can use the scrollView delegate’s scrollViewDidScroll to capture the contentOffset and use a combination of the target view’s origin/center/transform properties to keep the view where you want it.
There’s a neat video explaining how to do this that Apple released during WWDC 2010, called something like “Advanced Scroll View Behavior”, if I remember correctly. It’s definitely worth a watch.
I have the following scenario...
When I initially load a UICollectionView, I need it to slide up from the bottom of the screen without a header. This is pretty easy.
There is an "Add" cell that takes the user through the process of adding an item. At the end of this process, we display the list again, but this time with a header. The header needs to fade in and, at the same time, the updated list slides up from the bottom.
The requirement is that the header scroll with the list after both are in place, which is pretty much the default behavior.
The problem I'm having is coming up with a workable method for animating the list slide while the header is displayed.
One thought is simply animating the height of the header. Basically, start it with a height equal to the view height, then animate it to its final size. This would automatically draw the rest of the list up, making it look as though it were sliding in.
I've tried several variations of this method with no success. I can set the height without a problem, but I haven't been able to animate it.
I had thought just returning the appropriate height from referenceSizeForHeaderInSection and reloading the data would handle it. At least that's what I gather from SO messages. I've also tried invalidating the layout and performBatchUpdates.
Would this be simpler if I placed the contents of my header in the first row of the collection view and then try animating the height of row 0?
I'm not sure which is the best strategy.
OK, I found the following which was easily adapted to my scenario...
iOS Animating UITableView Header
Here's a Wayback Machine link to the original post. It may take a little while to load. Be patient.
Wayback Machine: iOS Animating UITableView Header
And here's a GitHub link with sample code...
GitHub: MichiganLabs / AnimatingTableViewHeader
I have used the separate banner image and scroll view for category sections and tableview for records.
Need to make all things scrollable to topside and when the scroll position reached the top position category section would fixed at top position and the table view records would continue scrolling and once the scroll down all the object would displayed to their original position back to back well which is normally happen in android apps and whatsapp profile page.
Please share your answer if you have done like this.
Here is the link for DTParallaxTableView
QMBParallaxScrollViewController
This Library same you want MXSegmentedPager
May this helps lot.
I'm developing a iPad app which is just a series of pictures, and I'm stuck. I've managed to link up a Tab Bar Contoller to the 6 View Controllers and all seems to work well. But I'd like to be able swipe to the next View Controller once the user has selected the button. How do I do this? The swipe gestures don't work for me. Here's a snapshot:
I think you are looking for UIPageController. This is the control that is used in the iPhone Weather app to allow you to swipe from city to city. Go here to see the full documentation on the control.
That's not usually how Tab Bars work in iOS, but…
What it sounds like you're after is either a UIScrollView with paging enabled (keep in mind you'll have to set the scroll view's ContentSize) or a UIPageViewController (if you don't want to deal with sizing explicitly and you're OK making a new UIViewController to house each image). I'd recommend the first option. The process would go something like:
Add the UIScrollView as a subview of your main view (remember, ensure to set pagingEnabled to YES
Add each image to the scroll view
Set the scroll view's content size to the total width of all images
Thanks for the clarification!