primers

Floating layer views are part of every iOS project. They are often used to guide, display, or interact with the user, and clicking blank removes these views.

The implementation of these floating layer views is so simple that it shouldn’t be worth mentioning. But I also found a problem, is that everyone’s implementation methods are really varied, and there are actually VC touchesBegan:withEvent: to remove the floating layer of code, code and VC coupling is very serious.

So, I feel it is necessary to give a unified implementation that serves two purposes:

  • Code reuse.
  • Reduce coupling.

I made a simple wrapper around the pop-up float based on decorator pattern, unifying the float view of the project. It felt like the world was clean.

implementation

Project address: PopupViewWrapper

The specific implementation code is very simple, using the decorator mode, background view KKPopupViewWrapper and content view KKPopupView are implemented KKPopupViewProtocol. The header file looks like this:

@protocol KKPopupViewProtocol <NSObject> - (UIView *)show:(UIView *)parentView; - (void)hide; @end // Add a clickable background to the content view, click the background view to hide @interface KKPopupViewWrapper: UIButton <KKPopupViewProtocol> - (instancetype)initWithView:(id<KKPopupViewProtocol>)popupView; @property (nonatomic, strong) UIColor * _Nullable bgColor; @property (nonatomic, copy) void (^ _Nullable hideHandler) (void); @interface KKPopupView: UIView <KKPopupViewProtocol> @endCopy the code

The source code is just two files, so you can just drag the.h and.m files directly into your project.

example

Simple floating layer

To display a simple float of content, create a KKPopupView object directly and add a content subview to it, which is then passed to the KKPopupViewWrapper object for display.

KKPopupView *popupView = [[KKPopupView alloc] initWithFrame:CGRectMake(0, 0, 200, 160)];
popupView.backgroundColor = [UIColor whiteColor];
popupView.center = self.view.center;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 60, 100, 40)];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"Demo 1"; [popupView addSubview:label]; KKPopupViewWrapper *wrapper = [[KKPopupViewWrapper alloc] initWithView:popupView]; // Set the background color wrapper. BgColor = [UIColor colorWithWhite:0 alpha:0.5]; // Handle the float layer removal event wrapper.hideHandler = ^{NSLog(@"Popup View is removed.");
};
[wrapper show:self.view];
Copy the code

Background view can be set background color, default is transparent; Floating layer removal events can also be handled through the hideHandler.

Complex floating layer

More complex or interactive floats can be inherited from KKPopupView.

@interface DemoPopupView: kkPOPupView@endCopy the code
DemoPopupView *popupView = [[DemoPopupView alloc] initWithFrame:CGRectMake(0, 0, 200, 180)];
popupView.backgroundColor = [UIColor whiteColor];
popupView.center = self.view.center;

KKPopupViewWrapper *wrapper = [[KKPopupViewWrapper alloc] initWithView:popupView];
wrapper.bgColor = [UIColor colorWithWhite:0 alpha:0.5];
[wrapper show:self.view];
Copy the code

Eject and remove animations

There are floating layers to pop and remove animations, and the animation code needs to be added to the overridden show and hide methods.

@interface DemoPopupView2 : KKPopupView
@end

@implementation DemoPopupView2

#pragma mark - override- (UIView *)show:(UIView *)parentView { [parentView addSubview:self]; UIView animateWithDuration:0.25 animations:^{CGRect frame = self.frame;  frame.origin.y = parentView.frame.size.height - frame.size.height; self.frame = frame; }];returnself; } - (void)hide {[UIView animateWithDuration:0.25 animations:^{CGRect frame = self.frame;  frame.origin.y = self.superview.frame.size.height; self.frame = frame; } completion:^(BOOL finished) { [super hide]; }]; } @endCopy the code

conclusion

As you can see from the calling code, all the user needs to do is create the Wrapper object and the Popup content view object and call the display method. The code to remove the floating layer is wrapped and executed automatically. This reduces coupling and reuse with the calling code.