IOS UI Development--drop-down zoom in

1. To achieve the effect, the left image is a drop-down before the picture on the right is a drop-down

2. The easiest thing to think about first is to go to Tableheaderview and put a picture on it.

However, the width of the tableheaderview is fixed, which means that it is not easy to do the scaling effect;

The upper boundary of the top is always next to the upper boundary of the TableView, which means that only a portion of the image is displayed before the drop-down, which is not easy to implement.

3. Final Solution: Add a picture to TableView as a child view, and the picture should be below the cell, and the first picture will only show a part

4. Example code 4.1 in the Viewdidload method:

UIImage *a = [UIImage imagenamed:@ "Image"]

Uiimageview *imagev = [[Uiimageview alloc] init];

[Imagev setimage:[uiimage imagenamed:@ "Image.jpg"];

4.2 Set the frame of the picture

Imagev.frame = CGRectMake (0,-150, 320, 300); 300 is arbitrarily set, the value of Y is set to half of 300, convenient calculation

[Self.tableview Addsubview:imagev]; Try Addsubview first.

4.3 Now the picture is to block the cell, you can set the TableView Contentinset: The left is set contentinset before the image is set

Self.tableView.contentInset = Uiedgeinsetsmake (150, 0, 0, 0);

4.4 In order to let the picture start, only the part, it is necessary to change the Y-value of the picture, so that the effect of the pull-down does not scale, see right figure

Imagev.frame = CGRectMake (0,-300, 320, 300);

　　

4.5 to ship TableView rolling, with ScrollView proxy Method-(void) Scrollviewdidscroll: (Uiscrollview *) ScrollView;

The 1th idea: 1> in the Agent method, calculate the distance of the scroll

Height of 2>imageview = original height + scrolling distance

3> the width of the image from the original length-width ratio according to the new calculated height

The Y value of the 4>imageview is not counted, but the X value is calculated based on the width of the x value, so that the picture is centered horizontally

In short, it is cumbersome.

The 2nd idea: 1> in the Agent method, calculate the distance of the scroll

Height of 2>imageview = original height + scrolling distance

3> set the content mode of the picture, set to Scaleaspectfill = zoom + proportional + fill

Imagev.contentmode = Uiviewcontentmodescaleaspectfill; In the Viewdidload.

In the Proxy method:

float distance =-self.tableview.contentoffset.y-150;

Self.imageV.height = + distance;

4.6 Fix the problem of the distance between the bottom boundary and the cell when you pull up the picture

float distance =-self.tableview.contentoffset.y-150;

if (distance < 0) return;

Self.imageV.height = + distance;

4.7 Fix down, the image will block the cell when zoomed in

[Self.tableview Insertsubview:imagev atindex:0];

　　　　

IOS UI Development--drop-down zoom in