CODEWITHSUNDEEP
xcodeiosuiviewcontroller
ChrisP
ChrisP

Reputation: 10116

How do I create a split view where the top panel is collapsible in XCode?

I have a UINavigationController which contains several UIViewControllers. I would like to create a shared "panel" that is displayed at the top of each view. In addition, I would like to make that panel expand and collapse, overlaying the view, when tapped.

View1

-Top Panel (collapsible)

-Main Panel

View2

-Top Panel (collapsible)

-Main Panel

This would be similar to the way the toolbar or navigation panel hide/show for the camera controller, but it would be a custom view. This is an iPhone app.

As a new XCode developer I would appreciate insights as to how this should be approached from an architectural standpoint.

Upvotes: 3

Views: 2236

Answers (1)

Yetanotherjosh
Yetanotherjosh

Reputation: 2050

Create a UIViewController subclass, say called PanelStyleUIViewController, which would be a superclass for all the views that will have the panel. The superclass implements the panel's controller logic, and the view expansion and contraction, which always happens above the children controller's regular view logic.

This is going to be a modestly difficult project for a new iOS/cocoa developer, because:

  • You probably will end up having to write a lot of the folding panel's view code programmatically. It is possible to design it in interface builder using more advanced techniques but IB's basic usage is to design one view controller at a time. You need to design a partial, parent view controller that then is inherited to a number of different ones.
  • You need to make sure that the folding view is always above (z-index wise) the regular view content of the lower level view controller classes. This is something that is probably solved by doing a bringSubviewToFront call on the panel view on, say, the viewDidAppear method.
  • You are going "off road" from how standard iPhone apps behave. Whenever you do this, you make headaches for yourself and might find yourself at a dead end. My recommendation would be to stay "inside the lines" for a while until you are pretty confident with objective C, cocoa touch, etc.

That said, here's some untested code I wrote here in the stack overflow editor which should give you an idea of what I mean for this superclass design:

// PanelStyleUIViewController.h
@interface PanelStyleUIViewController : UIViewController {
    UIView *panelView;
}
@property (nonatomic, retain) UIView *panelView;

// PanelStyleUIViewController.m

@implementation PanelStyleUIViewController

@synthesize panelView;

- (void)viewDidLoad {
    [super viewDidLoad];
    // setup geometry, contents, etc of panelView programmatically...
    self.panelView = [[[UIView alloc] init] autorelease];
    panelView.frame = CGRectMake(0,0,320,200);
    // set resizing mask appropriately for landscape support
    panelView.autoresizingMask = UIViewAutoresizingMaskFlexibleWidth | UIViewAutoresizingMaskFlexibleBottomMargin;
    // put a button on the panel view so it can be tapped to slide down
    UIButton *slidePanelButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    slidePanelButton.frame = CGRectMake(0,160,320,40);
    [slidePanelButton addTarget:self action:@selector(slidePanel) forControlEvents:UIControlEventTouchUpInside];
    [panelView addSubview:slidePanelButton];
    // set panelView with a transform offset to slide it up under the top of the screen
    panelView.transform = CGAffineTransformMakeTranslation(0, -160);
    // add panelView to regular view controller's view
    [self.view addSubview:panelView];
}

- (void)viewWillAppear {
    // make sure the panel shows up on top, z-index wise, since subclasses might have created views that overlap it.
    [self.view bringSubviewToFront:panelView];
}

- (void)slidePanel {
    // remove the panel transform in an animated fashion (slide down).
    // TODO: some button or action needs to slide the panel back up...
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.3];
    [panelView setTransform:CGAffineTransformMakeTranslation(0,0)];
    [UIView commitAnimations];
}

- (void)viewDidUnload {
    [super viewDidUnload];
    // always make sure you clean up progammatically-retained views here
    self.panelView = nil;
}

- (void)dealloc {
    // and here too
    self.panelView = nil;
    [super dealloc];
}

Upvotes: 1

Related Questions