MacOS realize Tencent video MAC card type preview small window

Almost a month of time did not update the article, today began work, ha ha. Recently, Tencent finally released the Tencent video MAC on May 12th, the opening of Tencent video members at last on Mac can be put in use. Usually use the web page to see members video is not used to, or like the client. Have to say, Tencent video MAC end personal feel good to do, detail is done in place.

Two days ago know Tencent video MAC side release, immediately download down, use the next. There is a feeling very fresh function: when the mouse moves in the video introduction, gently preview pop-up window and the function of Mac have not met before, very happy, feel creative, function as shown below the red box.

MacOS realize Tencent video MAC card type preview small window
QQ20170516-173448.png

So I tried to see how to achieve, and finally realized this function before work.

The first one:

MacOS realize Tencent video MAC card type preview small window
11.gif

Second:

MacOS realize Tencent video MAC card type preview small window
float.gif

Third:

MacOS realize Tencent video MAC card type preview small window
2.gif
Said my thoughts flashed in my mind, the first is through a single case to realize the function, and then create a inherit from the NSObject class, a single case method is realized by adding such a method to create custom NSMenu in the class, to achieve the pop-up box, through the custom NSMenu can pop up but the effect is poor. Thus, the custom NSMenu was replaced with NSWindow, and this function was finally realized.

1. create singleton

It’s a simple step, skip it.

2. create custom NSWindow

@interface (ShareMenu) @property (nonatomic, strong) NSWindow *subWindow @end @implementation ShareMenu static ShareMenu; *menu = nil; + (instancetype) share{static dispatch_once_t onceToken; dispatch_once (& onceToken, menu ^{= [[self alloc]init]; return menu;});} - (instancetype init) {self = [super (self init]; if {_edgeOffset}) = 10; return self;} - (void) setEdgeOffset: (CGFloat) edgeOffset{_edgeOffset = edgeOffset;} - (NSWindow *) subWindow{if (! _subWindow) {_subWindow [[NSWindow = alloc]init]; _subWindow.styleMask = NSWindowStyleMaskFullSizeContentView|NSWindowStyleMaskTitled; _subWindow.backingType = NSBackingStoreNonretained; _subWindow .titlebarAppearsTransparent = YES; _subWindow.titleVisibility = NSWindowTitleHidden;} return, _subWindow;}

Individuals prefer to add controls by lazy loading to prevent problems that have been created many times.

2. add object methods in ShareMenu

- (void) popOverMenuWithItem: (NSCollectionViewItem * item) {/ / conversion of item in contentView NSRect rect convertRect:item.view.frame left position = [item.view.window.contentView fromView:item.collectionView]; [self.subWindow setFrame:NSMakeRect (item.view.window.frame.origin.x + item.view.frame.origin.x + rect.origin.y - item.view.window.frame.origin.y - _edgeOffset, _edgeOffset, item.view.bounds.size.width + _edgeOffset * 2 , item.view.bounds.size.height + _edgeOffset * 2) display:YES]; //------------------------------------------------------------------- //------------------------- in here to create a contentView---------------------- / / 1 / / NSView *redView instance = [[NSView alloc]initWithFrame:NSMakeRect (0, 0, 0, 0]); / / redView.wantsLayer = YES; / / redView.layer.backgroundColor / / redColor].CGColor = [NSColor; redView.animator.alphaValue = 0.3; / / self.subWindow.contentView = redView; / / NSView = [[NSView * backgroundView 2 examples alloc]init]; backgroundView.wantsLayer = YES; backgroundView.layer.backgroundColor = [NSColor whiteColor].CGColor; NSView *tmpView = [[[NSStory Board storyboardWithName:@ "Main" bundle:nil]instantiateControllerWithIdentifier:@ "copyItem" view]; tmpView.animator.alphaValue = 0.3; tmpView.layer.cornerRadius = 5; self.subWindow.contentView = backgroundView; [backgroundView addSubview: tmpView]; [NSAnimationContext runAnimationGroup:^ //------------------------------------------------------------------- (NSAnimationContext * _Nonnull context) {context.duration = kDuration; context.timingFunction = [CAMediaTimingFunction / functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; redView.animator.alphaValue = 0.99; tmpView.animator.alphaValue = 0.8; [NSApp.keyWindow.animator addChildWindow:self.subWindow ordered:NSWindowAbove } completionHandler:nil]}

The core code is in this — (void) popOverMenuWithItem: (NSCollectionViewItem *) item.

3. to add a closing method is to remove the pop-up box

/ / close - (void) close{if (_subWindow) {[NSApp.keyWindow removeChildWindow:self.subWindow]; self.subWindow = nil;}}

4. ShareMenu usage

MacOS realize Tencent video MAC card type preview small window
QQ20170516-180208.png

Add NSTrackingArea in the custom NSCollectionViewItem, and in – (void) mouseEntered: (NSEvent *) event method calls as shown in the above method, because may be stretched to the window, add the notification window change in addition as shown in code.

When you slide, close the pop-up code, as shown in the following figure

MacOS realize Tencent video MAC card type preview small window
QQ20170516-180556.png
Finally, if you want to see the source code, please come to my GitHub to find it

Https://github.com/shibiao