13

I am making a profile view on iOS which has three tabs like twitter app. I am using one table view and when user taps on these tabs I am reloading it from other data sources. But I want to keep the section header to be on the top independent of these data source models.Is there is any way to achieve it?

Sometimes when user taps on button of section header to switch the table view data source and reload again, but section header view either gets hide or misplaced from its original top position, Its a weird kind of bug, Any hint what's going on here?

Edit : - One important thing is I am having pull to refresh also here.

enter image description here

enter image description here

kidsid49
  • 1,358
  • 3
  • 18
  • 37
  • 1
    Would you please show some code? Are you using custom view controller? have you tried reloadSections method? – Amir Dec 15 '15 at 20:37
  • I'm not quite sure what this layout looks like. Could you provide a screenshot? – WolfLink Dec 15 '15 at 22:03
  • @WolfLink added the required screenshots. – kidsid49 Dec 16 '15 at 07:28
  • @Amir reload section is leading to weird animations. Even AnimationNone is also not helping. – kidsid49 Dec 16 '15 at 07:29
  • @kidsid49 so that header bit (name, reviews, follows, etc.) is in a tableview along with the reviews/shows/watchlist selector and the other pictures/text? Are you using any custom libraries? Is there any reason you don't want the header bit to be a separate view above the tableview? – WolfLink Dec 16 '15 at 10:34
  • @WolfLink The top part which is not visible in 2nd screenshot is a another UIView which is added as tableviewheader view while the selector part which sticks always on the top is UIsection header view. Both are different views – kidsid49 Dec 16 '15 at 11:04
  • Why not just add it above the table view (that is, outside of it, with your header view's bottom border touching your table view's top border)? Another possible solution is adding a UIView on your table view (which is, in fact, just a scroll view), 'sticking it' to the top by implementing the scroll view did scroll delegate method and setting the header view's `y` coordinate to `scrollView.contentOffset.y`. This will require adjusting your table view's content inset `top` with the height of your header view. It will also allow for any custom behavior of your header view, should you need one. – Daniil Korotin Dec 16 '15 at 11:50
  • (that is, outside of it, with your header view's bottom border touching your table view's top border) ? - I didn't get that line @DaniilKorotin And adding it's on a uitableview than how to achieve that initial first state - Shown in first screenshot. Can you post some sample code? – kidsid49 Dec 16 '15 at 12:06
  • @kidsid49: 1. My suggestion was to add your header view to your view controller's view like that (let's use iPhone 5 size for reference, it's a pseudo-code just to clarify my thoughts): `headerView.frame = CGRectMake(0.0, 0.0, 320.0, 100.0);` and your table view like `tableView.frame = CGRectMake(0.0, 100.0, 320.0, 468.0);`. Get the idea? 2. To achieve the initial state you just set `tableView.contentInset = UIEdgeInsetsMake(100.0, 0.0, 0.0, 0.0);`. P.S. Code not checked for correctness, typed it all here directly on SO :D – Daniil Korotin Dec 16 '15 at 12:14
  • @DaniilKorotin yeah got it. But still here are two header views, One is Tableviewheader and one is section header. Selector section header comes after table view header as you can see in screenshots. – kidsid49 Dec 16 '15 at 12:39
  • @DaniilKorotin any comments? – kidsid49 Dec 16 '15 at 17:12
  • @kidsid49: Mate, I might be not getting your idea. Please explain how should the elements of your interface behave when scrolled? – Daniil Korotin Dec 17 '15 at 11:04
  • The top part (bio, Stats, Image) will scrolls as usual but the selector part three button will stick on the top @DaniilKorotin – kidsid49 Dec 17 '15 at 11:25
  • Ah, now I see the problem. Here's a pretty straightforward solution: make your current header view another cell and use it as your first cell. Remove all table view and section headers. Leave some space (enough to fit your selector) at the bottom of your header cell (if it requires 200 pt of height and your selector requires 50 — make it's total height 250). Then you add your selector view as a subview to your table view at the appropriate position (top left corner at `0.0, 200.0` in my example) . This will allow for it being scrolled. I'm running out of letters here, see the rest below. – Daniil Korotin Dec 17 '15 at 11:50
  • 1
    And here's the trick: you need to track the table view's offset in scroll view did scroll delegate method and set your selector `y` position with the following rule: `tableView.contentOffset.y > 200.0 ? tableView.contentOffset.y : 200.0`. That will do the trick. – Daniil Korotin Dec 17 '15 at 11:52
  • Can you show some code? – Adela Toderici Dec 18 '15 at 10:48
  • You can use tableHeader instead of sectionHeader. for reference http://blog.matthewcheok.com/design-teardown-stretchy-headers/ this blog shows some cool stuffs you can do with tableHeader – Abhi Dec 18 '15 at 12:16

4 Answers4

3

you can make a unique view to store your section Header,then put the view head of the controller. That can achieve your goal.

pAn zHou
  • 31
  • 1
3

But I want to keep the section header to be on the top independent of these data source models.Is there is any way to achieve it?

If I understand you correctly you maybe better served by using the table header view property. Why? because would give you the independence you want from the data source reloading, but maintain your ability to fire the data source reload from your three controls.

You could also follow @WolfLink's advise and put a view above your table view to achieve the same thing.

This is course dependent of how you use your table sections. See this SO question for adding a header view to your table view.

EDIT

If you want the current section view to always be at the top of it's super view then you should re-arrange you view controller's view hierarchy so that your section header view is implemented out side of the table view.

ViewController's subviews

        ---> view containing your three buttons(Current section header view)
        ---> table view
        ---> toolbar

This way even when the user scrolls the table view, the three button view will still stay at the top of the screen.

Community
  • 1
  • 1
Peter Hornsby
  • 4,208
  • 1
  • 25
  • 44
  • I want selection header to stick on the top all the time, That's why avoiding to use it as the tableviewheader. – kidsid49 Dec 16 '15 at 17:11
  • What about the tableviewheader(containing bio, image and other stats) it will be added as usual to tableview only? Then How will achieve my initial state as shown in the first screenshot? – kidsid49 Dec 16 '15 at 17:27
  • @kidsid49 you need to identify the main subviews used to build the complete view, it is not clear from your screen shots how you have chosen to implement your view. I personally would move the bio/stats view to the up into the section view(3 buttons) and expand it to include the bio/stats view when called for ,other wise you need to look at some more complex view arrangement with animation – Peter Hornsby Dec 16 '15 at 18:05
  • @kidsid49 Any chance you can post a picture of the bug in action? – Peter Hornsby Dec 16 '15 at 18:07
  • Bug is the section header is misplaced randomly sometimes it appears on middle top of UItableview. BTW I just want to avoid such big view(As you suggesting) to stick on my UITableview all the time. – kidsid49 Dec 16 '15 at 18:12
  • Have you reviewed your cell height methods and section header height methods? - tableView:heightForRowAtIndexPath: - tableView:heightForHeaderInSection: – Peter Hornsby Dec 16 '15 at 18:47
  • Yeah, Everything is correct and the bug doesn't appear all the time, its happens randomly when switch from one selection to another multiple times – kidsid49 Dec 16 '15 at 18:49
  • @kidsid49 I would have to see code to help you any further. – Peter Hornsby Dec 16 '15 at 18:57
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98157/discussion-between-kidsid49-and-fragilecat). – kidsid49 Dec 16 '15 at 18:58
3

I think it is a scrolling issue, i have had similar issue before, UITableView is built on top of UIScrollView, and scroll view has setContentOffset method, call this after reload and set offset to (0,0)

Karthik
  • 1,386
  • 12
  • 7
3

You can use this library: https://github.com/toandk/DTTableView

In the example, there is a table view DTParallaxTableView initiated with a header view: DTParallaxHeaderView and a UIVIew (which can be a tab bar like in this sample).

You can disable the parallax effect if not useful and use it to launch the pull to refresh.

Or search here and find the one that match with your use case! https://www.cocoacontrols.com/search?q=pull

Alban
  • 1,624
  • 11
  • 21