Sina micro-blog personal home page

Design sketch

Sina micro-blog personal home page

Attention to detail:

  1. Three tableview scrolling can push the top picture and toggle the scroll bar.
  2. As long as the switch bar does not stick to the navigation bar, the 3 tableview are starting from the first cell display.
  3. When the bar is attached to the navigation bar, the display position of each tableview is maintained.
  4. The switch bar sticks to the navigation bar, and the finger drags on the current page to make the switch bar out of the navigation bar and then stick to the navigation bar, and the other 2 tableview display states are maintained.

Realization´╝Ü

structure

  1. Micro-blog personal home page is easy to find here using 3 tableview. I added 3 sub controllers in the main controller, each controller manages a tableview, then 3 tableview added to the main controller view, sub controller all inherited from BaseTableViewController, rolling back easy listening.
  2. The scroll bar on the right side of each tableview contains the top view (picture). In previous versions, I did not let tableview share a top view, but to set them the same tableHeaderView (contain the same imageView and the same will be a blank area covered by column switching). Although this structure is able to achieve the effect of micro-blog personal home page, but not easy to expand, such as tableview to increase sliding gestures to switch around to display the interface.
  3. In the latest version, I give each tableview set 240 height (picture height 200+ switch bar height 40) blank UIView as tableHeaerView, and let 3 tableview share (including a headerView to display the picture and switch bar).
    first headerView will be added to the current display on the tableview, followed by tableview scroll. When the offset can be achieved with a switch bar navigation bar, add headerView to the main controller view, fixed position; when the offset to make the switch from the navigation bar, and headerView will be added to the display of the tableview; to switch the current display tableview, also need to offset to determine the join which view.

Monitor

Here I use proxy to monitor the offset of each tableview on the Y axis, the main controller as the BaseTableViewController proxy. Protocol method:

@protocol TableViewScrollingProtocol < NSObject> - (void) tableViewScroll: (UITableView *) tableView offsetY: (CGFloat) offsetY; (void) - tableViewWillBeginDecelerating: (UITableView *) tableView offsetY: (CGFloat) offsetY; (void) - tableViewDidEndDecelerating: (UITableView *) tableView offsetY: (CGFloat) offsetY; @end

Calculation

- (void) tableViewScroll: (UITableView *) tableView offsetY: (CGFloat) offsetY{if (offsetY > headerImgHeight topBarHeight) {if ([_headerView.superview! IsEqual:self.view]) {[self.view insertSubview:_headerView} CGRect belowSubview: _navView]; rect = self.headerView.frame; rect.origin.y = topBarHeight - headerImgHeight; self.headerView.frame = rect;} else {if {for ([_headerView.superview isEqual:tableView]!) (UIView *view in tableView.subviews (view) {if [isKindOfClass:[UIImageView class]] [tableView insertSubview:_headerView belowSubview:view]) {break}}};; CGRect rect = self.headerView.frame; rect.origin.y = 0; self.headerView.frame = rect;}}

This code is mainly Y offset real-time monitoring tableview, if the current offsetY is greater than 136 (height 200 minus the navigation bar status bar height) 64) it will add headerView to the main controller view, switching to the navigation bar at this time. If less than, add headerView to the currently displayed tableView, follow the tableview slide.

When the switch bar does not stick to the navigation bar, the offset of the three tableview of the Y is the same. Offset I set up a dictionary in the main controller to store each tableview, key tableview’s controller (before I use the address is the address of the tableview, the problem is caused on the tableview drag and drop, will cause the other two controller view is loaded in advance once). So I can record and change each offset at any time, and then switch to the tableview to be displayed when the contentoffset.y is set directly to it.

- (void) tableViewDidEndDragging: (UITableView *) tableView offsetY: (CGFloat offsetY) {_segCtrl.userInteractionEnabled = YES; NSString = *addressStr [NSString stringWithFormat:@ "%p" _showingVC]; if (offsetY > headerImgHeight topBarHeight) {[self.offsetYDict enumerateKeysAndObjectsUsingBlock:^ (NSString *key, ID _Nonnull obj, BOOL * _Nonnull stop) {if ([key isEqualToString:addressStr]) {_offsetYDict[key] = @ (offsetY);} else if ([_offsetYDict[key] floatValue] < headerImgHeight = topBarHeight) {_offsetYDict[key] = @ (headerImgHeight - topBarHeight);}} {if (}]; else offsetY < headerImgHeight = topBarHeight) { [self.offsetYDict enumerateKeysAndObjectsUsingBlock:^ (NSString *key, ID _Nonnull obj, BOOL * _Nonnull stop) {_offsetYDict[key] = @ (offsetY);}];}}}

When the finger leaves the screen, if the current tableview no speed, it is necessary to get the tableview offset in the tableViewDidEndDragging:offsetY: method. If offsetY is greater than 136, save your own. While the other two tableview, if the offset them before the less than or equal to 136, it will be changed to 136 (switching the past, let them just to offset toggle bar stick navigation bar); if offsetY is less than or equal to 136, it will store the offset of three tableview for the same.
if the current tableview speed, it is necessary to set up in the tableViewDidEndDecelerating: offsetY: method, the same way.

- (void) segmentedControlChangedValue: (HMSegmentedControl*) sender removeFromSuperview] BaseTableViewController {[_showingVC.view; *newVC = self.childViewControllers[sender.selectedSegmentIndex]; if (! NewVC.view.superview) {[self.view addSubview:newVC.view]; newVC.view.frame = self.view.bounds;} NSString *nextAddressStr = [NSString stringWithFormat:@%p, newVC] CGFloat offsetY; floatValue] = [_offsetYDict[nextAddressStr]; newVC.tableView.contentOffset = CGPointMake (0, offsetY); [self.view (insertSubview:newVC.view belowSubview:self.navView]; if offsetY < topBarHeight) {[newVC.view = headerImgHeight - addSubview:_headerView]; for (UIView *view in newVC.view.subviews {if ([view) isKindOfClass:[UIImageView class]] [newVC.view insertSubview:_headerView belowSubview:view]) {break}}; CGRect; rect = self.headerView.frame; rect.origin.y = 0; self.headerView.frame = rect;} else {[self.view insertSubview:_headerView belowSubview:_navView]; CGRect rect = self.headerView.frame; rect.origin.y = topBarHeight - headerImgHeight; self.headerView.frame = rect; _showingVC = newVC}};

This code is to remove the previous tableview, add will be displayed. The only point of note is to judge whether the headerView will be added to the main controller view or tableview based on the offset.

Other

1 on the navigation bar color gradient processing, I used here is the system navigation bar is set to colorless.

- (void) viewWillAppear: (BOOL) animated [super [self.navigationController.navigationBar setBackgroundImage:[UIImage {viewWillAppear:animated]; new]forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage [UIImage = new];} - (void) viewWillDisappear: (BOOL) animated [super [self.navigationController.navigationBar setBackgroundImage:nil {viewWillDisappear:animated]; forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil;}

Then add a navView (UIView) on the navigation bar, and then scroll to listen to change its alpha like.

2 in order to record the correct offset, the same as micro-blog, took the first time in the rolling process to switch the bar to stop the tableView scroll, the second click switch bar before switching tableView practice. Because the tableView comes with a click to stop scrolling effect, so if the switch bar is not stuck to the navigation bar, its parent headerView as part of the tableView, click the switch bar you can make tableView stop. If you switch to stick bar navigation bar, part of it is the parent headerView control of the view controller, my approach is the response of headerView to shield the touch event, part tableView this column on the back of switch can respond to the click event. For details, please see the source code, see the http://www.jianshu.com/p/2f664e71c527

3 status bar color change has been added, GIF diagram is not reflected. For details, please see the source code, see the http://www.jianshu.com/p/ee1c9c91a477

4 studies found that Sina’s top view of the micro-blog did not pull down the effect of amplification, but the image hidden part of the drop-down will be displayed. Pull down to achieve a relatively easy to achieve, and I think it does not mean that this is not added.

Demo download address: https://github.com/wobangnidashui/WeiboHomepage