iOS, create custom popover style UIView

Question

I know there is alot of documentation on this topic, and from what i've read i've learned a lot. My issue here is that i began creating a custom UIView within a viewcontroller & now when i'm trying to make it the UIView its own class, so as to be called & used within a working app, i'm pretty confused as to what i need to do to achieve it.

The overall aim of the class is to be able to select a button one a view controller, which will instantiate the custom view, then display. The visual effect for the user is that they click the button, then a window will animate-appear from the bounds of the button (although the code below uses the positioning of top left currently), then display a combination of switches & labels, along with a back & save button.

You can see from my code that what i need to achieve this process, i've managed to implement into a single function (again, this was from creating it within a viewcontroller). What i'm after now, and can't quite fathom out is for the custom view to be imported, then on the action of the main view controller's button, add the view to self.view.

- (void)makeBox{
    //view bounds
    CGFloat viewWidth = CGRectGetWidth(self.view.frame);
    CGFloat viewHeight = CGRectGetHeight(self.view.frame);

    //red box x, y & size
    CGFloat startx = (viewWidth / 100) * 10;
    CGFloat starty = (viewHeight /100) * 20;
    CGFloat width = (viewWidth / 100) * 80;
    CGFloat height = (viewHeight /100) * 70;
    CGRect view1Frame = CGRectMake(startx, starty, width, height);

    //label & switch frame
    CGRect labelMR = CGRectMake(10, ((height / 100) * 12), ((width / 100) * 80) - 7.5, 25);
    CGRect switchMR = CGRectMake(((width / 100) * 80) + 7.5, ((height / 100) * 11), ((width / 100) * 10), 15);

   //this is repeated for 6 other labels & switches

    CGRect backButtonR = CGRectMake(5, 5,  50, 35);
    CGRect saveButtonR = CGRectMake((width - 50), 5, 50, 35);

    if (!self.view1) {
        self.switchM = [[UISwitch alloc] initWithFrame:switchMR];
        self.switchM.tag = 10;
        if(self.monday){ //self.monday refers to a BOOL property of the viewcontroller that this was originally made in
            self.switchM.on = true;
        } else{
            self.switchM.on = false;
        }
        [self.switchM addTarget:self action:@selector(switched:) forControlEvents:UIControlEventTouchUpInside];

        // this switch instantiation process is repeated 6 other times 

        self.backButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [self.backButton addTarget:self
                            action:@selector(hideBox)
                  forControlEvents:UIControlEventTouchUpInside];
        [self.backButton setTitle:@"Back" forState:UIControlStateNormal];
        self.backButton.frame = backButtonR;


        self.saveButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [self.saveButton addTarget:self
                            action:@selector(daysChanged)
                  forControlEvents:UIControlEventTouchUpInside];
        [self.saveButton setTitle:@"Save" forState:UIControlStateNormal];
        self.saveButton.frame = saveButtonR;


        self.labelM = [[UILabel alloc] initWithFrame:labelMR];
        self.labelM.layer.masksToBounds = YES;
        self.labelM.layer.cornerRadius = 5;
        self.labelM.layer.borderColor = [UIColor blackColor].CGColor;
        self.labelM.layer.borderWidth = .5;
        self.labelM.text = @" Monday";
        self.labelM.backgroundColor = [UIColor whiteColor];

        //again - repeated 6 times

        //use this starting frame to make the 'popover' appear small at first
        CGRect startFrame = CGRectMake(10, 10, 10, 10);

        self.view1 = [[UIView alloc] initWithFrame:startFrame];

        [self.view addSubview:self.view1];
        [UIView animateWithDuration:0.5 animations:^(void){

            self.view1.layer.cornerRadius = 10;
            self.view1.layer.borderColor = [UIColor blackColor].CGColor;
            self.view1.layer.borderWidth = .5;
            [self.view1 setBackgroundColor:[UIColor lightGrayColor]];


            self.view1.frame = view1Frame;

        } completion:^(BOOL finished){

            [self.view1 addSubview:self.labelM];
            [self.view1 addSubview:self.switchM];
            //repeat 6 times for other labels & switches
        }];

    }
    else {
        [UIView animateWithDuration:0.3 animations:^() {
            self.view1.frame = view1Frame;

        } completion:^(BOOL finished) {
            self.labelM.frame = labelMR;
            self.switchM.frame = switchMR;

           //repeated for the other 6

            self.backButton.frame = backButtonR;
            self.saveButton.frame = saveButtonR;
        }];
    }
}

-(void) hideBox{
    //back button was selected
    [UIView animateWithDuration:0.5 animations:^(void){
        [self.view1 removeFromSuperview];
        self.view1 = nil;
    }];
}

I understand that as i'm doing/calling this via code, i need to override either init or initWithFrame:. Do i pass the initWithFrame: the containing view controllers bounds, of which the custom view can be calculated on, and how do i handle the animation?

I've managed to set up the delegate protocol which will notify when the save button is pressed. that part i understand, its just the rest of the parts i'm unclear on.

Answer 1

I actually got it to work! (although i can't promise this is the cleanest or most resourceful way - we'll work on that).

Here's what i did:

Split the makeBox function into 3 function, initWithWidth:andHeight:forView, openBox & updateBoxWithWidth:andHeight. I used a saveButton delegate method that informs the parent that save button has been pressed.

.h

    @protocol BoxDelegate
    -(void) daysChanged;
    @end
    __weak id <BoxDelegate> delegate;
    @interface aBox : UIView
    @property (nonatomic) BOOL monday;
    @property (nonatomic, weak) id <BoxDelegate> delegate;
    //property values for the custom view

    -(id) initWithWidth: (CGFloat) width andHeight: (CGFloat) height withView: (UIView*) theView;
    -(void) updateViewWithWidth: (CGFloat) width andHeight: (CGFloat) height;
    -(void) openBox;

    @end

.m

    @synthesize delegate;
    -(id) initWithWidth:(CGFloat)inWidth andHeight:(CGFloat)inHeight withView: (UIView*) theView{
    self = [super init];

    self.mainView = theView;
    //super view bounds
    self.viewWidth = inWidth;
    self.viewHeight = inHeight;

    //red box x, y & size
    CGFloat startx = (self.viewWidth / 100) * 10;
    CGFloat starty = (self.viewHeight /100) * 20;
    self.width = (self.viewWidth / 100) * 80;
    self.height = (self.viewHeight /100) * 70;
    self.view1Frame = CGRectMake(startx, starty, self.width, self.height);

    //label & switch frame
    self.labelMR = CGRectMake(10, ((self.height / 100) * 12), ((self.width / 100) * 80) - 7.5, 25);
    self.switchMR = CGRectMake(((self.width / 100) * 80) + 7.5, ((self.height / 100) * 11), ((self.width / 100) * 10), 15);

    //repeated for the other 6
    self.backButtonR = CGRectMake(5, 5,  50, 35);
    self.saveButtonR = CGRectMake((self.width - 50), 5, 50, 35);


    self.switchM = [[UISwitch alloc] initWithFrame:self.switchMR];
    self.switchM.tag = 10;
    if(self.monday){
        self.switchM.on = true;
    } else{
        self.switchM.on = false;
    }
    [self.switchM addTarget:self action:@selector(switched:) forControlEvents:UIControlEventTouchUpInside];

    self.labelM = [[UILabel alloc] initWithFrame:self.labelMR];
    self.labelM.layer.masksToBounds = YES;
    self.labelM.layer.cornerRadius = 5;
    self.labelM.layer.borderColor = [UIColor blackColor].CGColor;
    self.labelM.layer.borderWidth = .5;
    self.labelM.text = @" Monday";
    self.labelM.backgroundColor = [UIColor whiteColor];

    //repeated for the other 6
    self.saveButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [self.saveButton addTarget:delegate
                        action:@selector(daysChanged)
              forControlEvents:UIControlEventTouchUpInside];
    [self.saveButton setTitle:@"Save" forState:UIControlStateNormal];
    self.saveButton.frame = self.saveButtonR;
    return self;
}


-(void) openBox{
    CGRect startFrame = CGRectMake(10, 10, 10, 10);

    self.view1 = [[UIView alloc] initWithFrame:startFrame];

    [self.mainView addSubview:self.view1];
    [UIView animateWithDuration:0.5 animations:^(void){

        self.view1.layer.cornerRadius = 10;
        self.view1.layer.borderColor = [UIColor blackColor].CGColor;
        self.view1.layer.borderWidth = .5;
        [self.view1 setBackgroundColor:[UIColor lightGrayColor]];

         // repeated for the other 6

        self.view1.frame = self.view1Frame;

    } completion:^(BOOL finished){
        [self.view1 addSubview:self.labelM];
        [self.view1 addSubview:self.switchM];

        [self.view1 addSubview:self.backButton];
        [self.view1 addSubview:self.saveButton];


    }];
}

-(void) updateViewWithWidth: (CGFloat) width andHeight:(CGFloat) height{

    //re-calculate
    self.viewWidth = width;
    self.viewHeight = height;

    CGFloat startx = (self.viewWidth / 100) * 10;
    CGFloat starty = (self.viewHeight /100) * 20;
    self.width = (self.viewWidth / 100) * 80;
    self.height = (self.viewHeight /100) * 70;
    self.view1Frame = CGRectMake(startx, starty, self.width, self.height);

    //label & switch frame
    self.labelMR = CGRectMake(10, ((self.height / 100) * 12), ((self.width / 100) * 80) - 7.5, 25);
    self.switchMR = CGRectMake(((self.width / 100) * 80) + 7.5, ((self.height / 100) * 11), ((self.width / 100) * 10), 15);

    self.backButtonR = CGRectMake(5, 5,  50, 35);
    self.saveButtonR = CGRectMake((self.width - 50), 5, 50, 35);

    [UIView animateWithDuration:0.3 animations:^() {
        self.view1.frame = self.view1Frame;

    } completion:^(BOOL finished) {
        self.labelM.frame = self.labelMR;
        self.switchM.frame = self.switchMR;
        self.backButton.frame = self.backButtonR;
        self.saveButton.frame = self.saveButtonR;
    }];

}

And then in our parent viewcontroller

@property aBox *theBox;
...
- (void)viewDidLoad {
    [super viewDidLoad];

    self.theBox = [[aBox alloc] initWithWidth:self.view.frame.size.width andHeight:self.view.frame.size.height withView:self.view];
    [self.theBox openBox];

}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{
    [self.theBox updateViewWithWidth:self.view.frame.size.width andHeight:self.view.frame.size.height];
}
- (void) daysChanged{
     NSLog(@"Days Changed!");
}

Answer 2

First some background.

Typically for a popover controller, you have a single transparent root view which contains the popover view itself. This root view is the size of the containing window and usually higher in z-order than all other views. There are two reasons for this:

1) The popover needs to draw on top of all other views. If the root view wasn't on top of all other views, the popover could be clipped and not draw all of its contents.

2) The user usually needs some place to tap and dismiss the popover (effectively a cancel action).

UIPopoverController does this as do some 3rd party popovers. Some even go so far as to use their own UIWindows.

To answer your specific questions:

1) initWithFrame: / setFrame: should be passed a CGRect that is in the coordinate space of the view that will contain the view. In other words, the superview. If you decide to use a transparent root view, the popover (the part that draw on screen) will be passed a CGRect in the coordinate space of the transparent root view.

2) Usually a popover is animated like so:

// set initial frame
popover.frame = CGRectMake(x, y, width, 0);
popover.alpha = 0.0;
[rootView addSubview:popover];

[UIView animateWithDuration:0.5
                 animations:^{
                   CGRect frame = popover.frame;
                   frame.size.height = some-height;
                   popover.frame = frame;
                   popover.alpha = 1;
                 }
];