Question

I’m trying to build my first iPhone app, a Berlin museum guide, and I’m having a little trouble figuring out how to design a specific view. I did mockups of all my views with Photoshop before, but now actually making it happen in Xcode is something else, of course 🙂

So, here’s what I want:

[I was gonna post an image here but since I’m new I don’t have enough reputation to post images.]

Find the image here:
http://img9.uploadhouse.com/fileuploads/13445/13445099d5adea77b02fe1d76755da6b81c92634.png

I want a white box with several text parts in it. A large heading, a smaller heading and a longer text that is placed next to an image. The text that goes in there is provided by my core data model and changes depending on what exhibition the user is looking at.

First question: Is there such thing as a “white box with rounded corners object” in which I can place text, images etc. or would I have to import this as a custom image? In that case, I’d have a problem if I want the box to change it’s size, as with simply scaling the image the round corners would become distorted.. I’m assuming a CSS-stye approach with a top- and bottom-image and doing the middle part with a repeat-y property or something like that won’t work in objective-c, right?

Second question: Does anyone have good advice on how to approach the text expand thing in general? I want the description text to initially be just a teaser so it won’t take up the whole screen. If the user wants to keep reading, on tapping the “more” button the box should expand and display the entire text.
So much for the theory.. I’m a bit clueless about how to get this done and am hoping that somebody might have some good input on that.

Thanks a lot for taking the time to help a newbie 🙂

Answer 1

I would not use a b/g image since there are going to be problems with vertical expansion, as you noted yourself. I would rather use a regular UIView and following method to make its corners round.

#import <QuartzCore/QuartzCore.h>

view.layer.cornerRadius = 5; 

As for the text expansion. I would not try to make image wrapping text as it is hard.
For automatica UITextView adjustment you can do the following.

• set UITextView frame smaller.
• create a button “more” that will change the frame of the UITextView and animate it

example:

#define MOVE_ANIMATION_DURATION_SECONDS 0.5

-(void)maximize:(BOOL)animated{
    if(animated){
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
        [UIView setAnimationDuration:MOVE_ANIMATION_DURATION_SECONDS];
        [UIView setAnimationDelegate:self];

        [self setMaximizedViewState];

        [UIView commitAnimations];
    }else
        [self setMaximizedViewState];

}

-(void)minimize:(BOOL)animated{
    if(animated){
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
        [UIView setAnimationDuration:MOVE_ANIMATION_DURATION_SECONDS];
        [UIView setAnimationDelegate:self];

        [self setMinimizedViewState];

        [UIView commitAnimations];
    }else
        [self setMinimizedViewState];

}

-(void)setMinimizedViewState{
    isMinimized = YES;

    //Adjust the UITextView's frame and other properties
}

-(void)setMaximizedViewState{
    isMinimized = NO;

    //Adjust the UITextView's frame and other properties
}