IOS common news, micro-blog home page to achieve – video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

First effect diagram

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

Preface

More than a month before, under the boss’s despotic power, has been doing pure H5 version of app, to finally get rid of his claws, can do what you love. So he hurried to forget the iOS picked up a small goal, write a small demo
I iPhone6, 10.1 system testing, fast sliding FPS maintained at 59~60, enjoying the silky. GIF is recorded with a computer, the simulator configuration is low, so the FPS is less than 30

Basic module implementation

Data is the sister of the home page, similar to the news home page layout, including video, long chart, moving pictures, text, etc.. I will split them into several basic modules, each one takes what he needs is convenient

1, long text display, UILable highly dynamic computing

The basic properties of the UILable will no longer be introduced, the students need to own Baidu

Lable.text= @ "string"; Lable.font= [UIFontfontWithName:@ "Arial" size:16]; NSDictionary*attrs [email protected]{NSFontAttributeName:Lable.font}; CGSizemaxSize =CGSizeMake (Width-35, MAXFLOAT); CGSizesize = [Lable.text boundingRectWithSize: maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrscontext:nil].size NSLog (@%f; ->%f, size.height, size.width);

2, the length of the interception, click to enlarge view

Intercept:

Tried a variety of ways, such as the following context interception, cut, set the imageView contentMode

- (UIImage *) compressImage: (* UIImage) sourceImage toTargetScale: (CGFloat) scale imageSize CGFloat {CGSize = sourceImage.size; width = imageSize.width; CGFloat = height imageSize.height; UIGraphicsBeginImageContext (CGSizeMake (width * scale, height * scale)); [sourceImage drawInRect:CGRectMake (0, 0, width * scale, height * scale)]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext (UIGraphicsEndImageContext); (return); newImage;}

This is the effect of the following figure, obviously not what I want, to intercept the head of the long graph display

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

Using this method, you can cut the head of the long cut, and then loaded to imageView

UIImage*resultImage = [UIImage imageWithCGImage:CGImageCreateWithImageInRect ([imageCGImage], CGRectMake (0,0, Height, Height))] myself.contentImageView.image= resultImage;

The difference between UIImage, CIImage, CGImage three

  • CIImage contains all the necessary data to create a picture, but it does not render itself into a picture, it represents the image data or the process of generating image data (such as filters)
  • CGImage is based on the pixel matrix, each point corresponds to the picture of the midpoint of the pixel information
  • UIImage management of image data, mainly used to show, such as UIImageView, control medium, can also be used directly in the view or other context draw
Click to enlarge view:

Enlarge the pictures of third common libraries is MWPhotoBrowser, but the MWPhotoBrowser library has a big pain point is when a larger view is in the form of a PUSH jump past, and not our common animated pop-up way from the basic position of the original amplifier to the full screen, shown below. I have to give up the obsessive-compulsive disorder of the library, I want to package a?

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

But because of limited capacity, can only have little talent and less learning, standing on the shoulders of giants, like YYKit demo to achieve a similar function, and then to go pick source. Usage is as follows:
first of the above two classes into their project

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

The following code is then executed in the imageView click event

YYPhotoGroupItem*item = [YYPhotoGroupItemnew]; item.thumbView =_contentImageView; item.largeImageURL= [NSURLURLWithString:imageURL]; YYPhotoGroupView*view = [[YYPhotoGroupViewalloc]initWithGroupItems:@[item]]; UIView*toView= [UIApplicationsharedApplication].keyWindow.rootViewController.view [viewpresentFromImageView toContainer: toView: _contentImageView; Animated: YEScompletion:nil];

Note:
1, I demo interface only one picture, so here is a single map view, multi picture pass an array of item
2, YYPhotoGroupView class did not achieve long press to choose to keep the picture album function, code methods need to change such long press gestures trigger (probably in 760)

UIActivityViewController *activityViewController = [[UIActivityViewController alloc] initWithActivityItems:@[imageItem] applicationActivities:nil]; UIActivityViewControllerCompletionWithItemsHandler = myblock ^ (NSString *activityType, BOOL completed, NSArray *returnedItems, NSError *activityError if ([activityType) {isEqualToString:@ "com.apple.UIKit.activity.SaveToCameraRoll"]) {MBProgressHUD *hub = [MBProgressHUD showHUDAddedTo:toVC.view animated:YES]; hub.mode = MBProgressHUDModeCustomView; if (completed) {hub.labelText = @ "save success"; hub.labelText = @}else{"failed to save" hub.removeFromSuperViewOnHide = YES;}; [hub hide:YES afterDelay:1.0];}}; activityViewController.completionWithItemsHandler = myblock;

So far, the picture view function basically completed.

3, based on the realization of AVPlayer video playback

Before doing the video playback is basically the following figure this way, using AVPlayer to achieve a simple player, observers monitor the state of the video for a series of operations, etc.. But in the cell video player with a single page of the play is not the same, the former should take into account the cell multiplexing, create a player at what time, and create multiple low-end models of memory will burst.

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

Try using the method is firstly to determine the videoUrl field background interface data if there is value, a value will put a button in the picture (shown below), write a callback method in block click on the button, the block in the tableview cellForRowAtIndexPath: agent method. Create player.

IOS common news, micro-blog home page to achieve - video playback, long graph interception display, click to enlarge the view, dynamic map, text, etc.

Recommend a thief AVPlayer third party library ZFPlayer, callback method code as follows

__weak typeof (self) myself = self; __block = MainTableCell *weakcell _tableCell; __block NSIndexPath *weakIndexPath = indexPath; _tableCell.cellBlock = (if) ^ {([weakcell.modelList.videouri! "" isEqualToString:@ ") {ZFPlayerModel * playerModle = [[ZFPlayerModel alloc] init]; //playerModle.title = @" this is my title "; playerModle.videoURL [NSURL = URLWithString:weakcell.modelList.videouri]; playerModle.placeholderImageURLString = weakcell.modelList.image0; playerModle.tableView = myself; playerModle.indexPath = weakIndexPath; playerModle.fatherView = weakcell.contentImageView; [myself.playerView playerControlView:nil playerModel:playerModle]; [myse Lf.playerView autoPlayTheVideo];}};

PlayerView used inside the lazy loading method to create

- (ZFPlayerView * playerView) {if (! _playerView) {_playerView sharedPlayerView] = [ZFPlayerView; //_playerView.delegate = self; / / when cell play video by full screen into a small screen, not to return to the middle position of _playerView.cellPlayerOnCenter = NO; / / when cell out of the screen to stop playing the //_playerView.stopPlayWhileCellNotVisable = YES; / / (optional setting mode) can fill the video, by default (such as the proportion of filling a dimension until it reaches the boundary) / / _playerView.playerLayerGravity = ZFPlayerLayerGravityResizeAspect; / / mute / / _playerView.mute = YES;} return _playerView;}

This three basic functions basically completed, there are several small problems to be optimized, hope to have the experience of pointing brother one or two

  • The height of the cell I use is the height of the contentLable + picture of the value of a high degree of restraint + head time and other lable height, the basic can meet my needs but certainly not the best way
  • Custom cell class in a large number of if judgment, according to the type of interface data, no picture of the hidden image imageView, there are pictures based on the size of the image dynamically change the value of imageView constraints

Basically is so much time, technology is limited, please correct me.

Painting focuses on Demo