Creating the Phone App's in-call view in iPhone

Question

Hello guys,

I'm trying to create this sort of "pop up action sheet" view similar to the in-call view in iPhone's phone app.

I believe this is a custom view, since I can't seem to find this in any apple references. But somehow the Google app and Discover app both have this view and look awfully similar (I've attached the images below).

So is there some kind of library/tutorial/sample code out there that can help me make something like this? Thanks.

Answer 1

They all look suitably different to be custom views to me. If you just want a control like this for a single view (i.e. not a more flexible configurable container type control) it should be relatively quick & easy to knock it up in xcode & IB. I've done similar things in my apps. Steps I would take are as follows:

1) create an empty NIB file and design your control there by using UIView, UIImageView, UIButton controls etc.

2) Create a new ObjC class derived from UIView

3) Ensure the 'root' UIView object in the NIB has class type matching your ObjC UIView derived class

4) Attach IBOutlets & IBAction event handlers to your class and wire up all the button events ('Touch up inside') to your class event handler methods in IB.

5) Add a static factory function to your class to create itself from the NIB. e.g.

// Factory method - loads a NavBarView from NavBarView.xib
+ (MyCustomView*) myViewFromNib;
{
    MyCustomView* myView = nil;
    NSArray* nib = [[NSBundle mainBundle] loadNibNamed:@"MyCustomViewNib" owner:nil options:nil];
    // The behavior here changed between SDK 2.0 and 2.1. In 2.1+, loadNibNamed:owner:options: does not
    // include an entry in the array for File's Owner. In 2.0, it does. This means that if you're on
    // 2.2 or 2.1, you have to grab the object at index 0, but if you're running against SDK 2.0, you
    // have to grab the object at index:1.
#ifdef __IPHONE_2_1
    myView = (MyCustomView *)[nib objectAtIndex:0];
#else
    myView = (MyCustomView *)[nib objectAtIndex:1];
#endif
    return myView;
}

6) Create and place onto your parent view as normal:

    MyCustomView* myView = [MyCustomView myViewFromNib]; 
    [parentView addSubview:myView];
    myView.center = parentView.center;

With regard to the event handling, I tend to create just one button event handler, and use the passed id param to determine which button is pressed by comparing against IBOutlet members or UIView tags. I also often create a delegate protocol for my custom view class and call back through that delegate from the button's event handler. e.g.

MyCustomViewDelegate.h:

@protocol MyCustomViewDelegate
- (void) doStuffForButton1;
// etc
@end

ParentView.m:

myView.delegate = self;

- (void) doStuffForButton1
{
}

MyCustomView.m:

- (IBAction) onButtonPressed:(id)button
{
    if (button == self.button1 && delegate)
    {
     [delegate doStuffForButton1];
    }
    // or
    UIView* view = (UIView*)button;
    if (view.tag == 1 && delegate)
    {
     [delegate doStuffForButton1];
    }
}

Hope that helps