[micro-blog] | personal page effect those who chase dry cargo


Due to the recent navigation controller in the content, so the update of the article, about the personal details page effect. Effect diagram:

[micro-blog] | personal page effect those who chase dry cargo

if you like my article, you can focus on me, you can also come to a small brother, to understand our iOS training courses. There will be updated ing..,

First, the analysis of the project structure

  • Effect: when the user moves up, the top appears gradually, it is clearly a navigation bar.
  • Conclusion: the project should consist of a navigation controller.
  • Effect: in addition to the navigation controller to display the micro-blog personal page, how to make the micro-blog interface to the outside.
  • Conclusion: follow the principle of a single controller interface, only need to customize the micro-blog personal page controller, the controller can become a navigation controller can be displayed on the outside.
  • Reason: because the navigation control will always display the top of the stack controller view, at the beginning of the root controller is the stack top controller.

Two, analysis of micro-blog personal controller hierarchy

1 look, first of all, there is a tableView, tableView above a head view and tab view.

TableView effect: penetrating navigation bar.

  • TableView size: tableView occupy the entire controller view, the content can penetrate the navigation bar. Otherwise, the content does not roll up.

Penetration effect:

[micro-blog] | personal page effect those who chase dry cargo
penetration navigation bar.Gif

Unable to penetrate effect:

[micro-blog] | personal page effect those who chase dry cargo
can’t penetrate demo.Gif

2 head view (background image + avatar) and tab view

Effect: the head view and tab view move along with the tableView drag, the tab view has a hover effect, and does not move to a certain location.


Scenario 1: head view and tab view become tableView’s head view (tableHeaderView), but drag up, tab view will disappear, so it can not hover effect. (pass out of the program)

Scenario 2: tab view becomes tableView’s group header view, tabs hover. However, when the user drags down, the head view should not move down, but the y value does not move. (pass out of the program)

Final scenario: the head view and tab view are added to the controller’s view and cover the tableView.

Question: tableView content display incomplete? How to show?
solution: set the top tableView extra space, it will squeeze the contents.
because the content needs to be displayed below the tab, set the top pitch to the head view + Tab view height, 244

#define headH 200 #define #define 44 _lastOffsetY = = (headH + tabBarH); self.tableView.contentInset = UIEdgeInsetsMake (headH + tabBarH, 0, 0, 0), tabBarH = headMinH;

Problem: the content of tableView is down a little bit, because after iOS7, all the top UIScrollView of the navigation controller will be added to the additional scroll area 64.

[micro-blog] | personal page effect those who chase dry cargo

solution: do not need to add additional scroll area, set the controller properties.

Self.automaticallyAdjustsScrollViewInsets = NO;

Three, build micro-blog personal page interface

1 inside the most storage tableView, occupy the entire controller view

2 and then add the top head view, height 200, the width of the automatic stretch, the upper left and right spacing of 0

2.1 top background picture, wide and high automatic drawing

2.2 head horizontal center, the distance from the bottom of the 64 height, width and height fixed.

3 tab below the head view, height of 44, the width of the automatic stretch, the upper left and right spacing of 0

3.1 tab with the top view, the use of automatic layout, you can make a control with reference to the changes in the control changes, you can move the head view, the tab followed by moving.

[micro-blog] | personal page effect those who chase dry cargo

Four, listen to the tableView scroll

  • The number of users to scroll, the number of head views and tabs to move, modify the head view, the tab view will follow.
  • Calculate the difference between the user’s rolling offset, the offset of the beginning of the record, and the current offset.
  • Note that the start of the offset difference contentOffset, -244, is compared with each time.
  • ContentOffset: the distance between the visual view and the start point of the scroll view. The y value of the starting point of the contentOffset is 0
  • Gets the offset difference, modify the head view level, will have poor visual effects, feeling the head quickly view mobile option card. Directly modify the y value of the head view, no visual difference effect.
  • When dragging up, Delta > 0, the head view needs to be reduced in height, so the height of the head view = original height – offset
  • Why drag up, delta> 0, because the drag on the top needs to look at the contents of the following, the visual range needs to move down, so the contentOffsetY continues to increase, larger than the beginning, so delta> 0
  • Need to make a judgment, the minimum height of the head view is 64, reduced to less than 64 will not be reduced, in the reduced options view to move to the navigation bar, can not see.
  • Drag down, delta< 0, head view height increase, it will stretch the picture, in order to prevent the image stretching ugly, need to set the picture content model for proportional tensile filled Aspect Fill, generally in the development is the use of the content model, the picture will not stretch very ugly.
[micro-blog] | personal page effect those who chase dry cargo
  • Note: beyond the picture control range of the picture will be displayed, you need to cut. Check the UIImageView attribute.
    [micro-blog] | personal page effect those who chase dry cargo
- (void) scrollViewDidScroll: (UIScrollView * scrollView) {CGFloat offsetY = scrollView.contentOffset.y; CGFloat = Delta offsetY _lastOffsetY; / / to reduce the drag on the height. CGFloat height = headH - Delta; if (height < headMinH) {height} = headMinH; _headHCons.constant = height; / / set the navigation of the background image CGFloat alpha = Delta / (headH - headMinH); / / when alpha is greater than 1, the navigation bar translucent, so do the processing, more than 1, direct =0.99 (if alpha > alpha = 1) {} = 0.99; _nameLabel.alpha = Alpha; / / set the navigation of the UIImage *image [UIImage imageWithColor:[UIColor background = colorWithWhite:1 alpha:alpha]]; setBackgroundImage:image forBarMetrics:UIBarMetricsDefault] self.navigationController.navigationBar;}

Five, navigation bar processing

  • Hide the navigation bar and the navigation bar title at the beginning
  • Fast navigation hiding method: / / to the navigation of the background image transfer, an empty picture of the UIImage setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault] [self.navigationController.navigationBar; / / hide the shadow at the bottom, pass an empty picture of the UIImage setShadowImage:[[UIImage alloc] init]] [self.navigationController.navigationBar;
  • Hide navigation title, title with UILabel, set alpha = 0;
  • When the user scrolls up the view, the navigation bar and the title slowly show that the transparency can be calculated. When the height of the head view is reduced to 64, all of which is displayed, alpha is 1
  • That is to say, when the offset is 136, alpha is 1, which forms a ratio.
  • Alpha = Delta / 136
  • For each move, set the background image of the navigation bar and the title of the navigation bar.
  • How to generate a navigation bar background image? The use of color to generate translucent images, passing a color, to generate a picture.
According to the color / / generate a size for the same color pictures of 1*1 + (UIImage *) imageWithColor: (UIColor * color) {/ / description of rectangular CGRect rect=CGRectMake (0.0F, 0.0F, 1.0F, 1.0F); / / open bitmap context UIGraphicsBeginImageContext (rect.size); / / get CGContextRef context = UIGraphicsGetCurrentContext (bitmap context); / / fill context CGContextSetFillColorWithColor the use of color (context, [color demo CGColor]); / / CGContextFillRect rendering context (context, rect); / / get the picture UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext (from below); / / UIGraphicsEndImageContext (return); end context theImage;}

Contact information

If you love this article, can continue to pay attention to me, a micro-blog: a Zheng, welcomed the exchange of.
click here to download the source code.

(PS: also our company small brother, invite the IT session of the dedication and ability, competitive and energetic Geluyinghao joining together entrepreneurs, small details can click on code code small brother, brother micro-blog or micro-blog official, private chat I)