tags:

views:

4053

answers:

5

Hi!

I've been trying to have two fixed sized UIImageviews with images on the them (that cover all the view), But I've been trying really hard (I give up!) to rotate each of them in a circular manner. So if I have one UIView, and the other right next to it, I would like to be able to rotate the first one (and the other inmediately, no gaps) following it, and rotating in a 360-degree fashion, it is just impossible!

Can anyone help me please?

A: 

I think you need to add a bit more detail on exactly what you're trying to do here. What axis are you trying to rotate around? Do you want them around each other (as in the Weather app for settings) or next to each other? Have you tried applying an animation to each view's layer?

Ben Gottlieb
A: 

They are two UIImageViews at the bottom of the screen, one covers the left part until the middle of the screen. The right one covers the remaining part of the screen.

I'm trying to rotate those two out of the screen and while they are rotating more UIImageViews to show up from the right (rotation happens right to left)

so the two UIImageViews at the bottom will always be changing (rotating)

I could use a single UIImageView instead, since both UIImageViews are tiles for one image.. (I'm trying to save memory processing) but it is very hard

when you rotate, it does relative to the center of that particular view. So I'm very lost. I could just create a big UIImageView perfectly squared and centered it at the bottom of the screen ( the View's Center would be at the middle-bottom of the screen so that when rotating it rotates almost perfectly ) but I don't think this would be the most efficient way?

Can you add some images? What method are you currently using to rotate?
Ben Gottlieb
A: 

I don't have images because I haven't designed them, I just used "sample" images. but to give you an easy example... a clock, it is circular, I was planning on dividing up in for parts, so that I can manipulate (rotate) each individual part. so from the center-middle of the clock i have 2 images.. one that starts from 9pm to midnight, and one that starts from midnight to 3 am...

I want to be able to make the rotation (as if I was rotating the entire clock ) so for instance one single rotation would put the first image down, the second image to where the first image was, etc etc. I was using a rotation method you wrote in a post some time ago, the one where you specify radians and uses core animation? I can try to explain it better if you don't understand what i'm trying to specify here

edit: I'm not sure which rotating methods to use, not that informed here

+3  A: 

Once of the first pieces of iPhone code I wrote was the following to display a clock, made of leaves.

A clock is created from three leaves, hours, minutes and seconds, and we have a single leaf image, which is drawn with different scaling, opacity etc., to give the appearance of a clock.

The UIView below draws a clock in the centre of the view, using translation and scaling to put the leaves in the right place. The CTM is saved and restored to save repeated translations.

You might want to look and see if it helps you with how you might deal with coordinate systems and rotating.

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) 
    {
        // Initialization code
        self.minutes = 49;
        self.seconds = 0;

        // clear to transparent
        self.clearsContextBeforeDrawing = YES;
        self.backgroundColor = [UIColor clearColor];

        [self tick:nil];
    }
    return self;
}

- (void)tick:(NSTimer *)timer
{
    // get time
    NSDate * time = [NSDate date];
    NSCalendar * gregorian = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
    NSDateComponents * comp = [gregorian components:NSHourCalendarUnit|NSMinuteCalendarUnit|NSSecondCalendarUnit fromDate:time];

    // update the time
    self.seconds = [comp second];
    self.minutes = [comp minute];
    self.hours = [comp hour];

    // redisplay
    [self setNeedsDisplay];
}

- (float)toRadians:(float)deg
{
    return deg * 3.14/180.0;
}

- (void)drawClock:(CGPoint)pos hours:(NSInteger)theHours minutes:(NSInteger)theMinutes seconds:(NSInteger)theSeconds
{
    UIImage * leaf = [UIImage imageNamed:@"leaf.png"];

    // context
    CGContextRef myContext = UIGraphicsGetCurrentContext();

    // save original state
    CGContextSaveGState(myContext);

    // set alpha and move it to centre of clock
    CGContextSetAlpha(myContext, 0.8);
    CGContextTranslateCTM (myContext, pos.x, pos.y);

    // save centred state
    CGContextSaveGState(myContext);

    // rotate and translate the hour 'hand'
    CGContextRotateCTM (myContext, [self toRadians:(theHours-3.0+theMinutes/60.0)*360/12.0 - 10] );
    CGContextTranslateCTM (myContext, -5, -[leaf size].height/12);

    // draw the hour hand and restore to translated
    CGContextDrawImage(myContext, CGRectMake(0, 0, [leaf size].width/6, [leaf size].height/6), [leaf CGImage]);

    // restore centred state and resave
    CGContextRestoreGState(myContext);
    CGContextSaveGState(myContext);

    // rotate and transform the minute 'hand'
    CGContextRotateCTM (myContext, [self toRadians:((theMinutes-15)*360.0 /60.0) - 10]);
    CGContextTranslateCTM (myContext, -5, -[leaf size].height/10);

    // draw the minute hand and restore original context
    CGContextDrawImage(myContext, CGRectMake(0, 0, [leaf size].width/5, [leaf size].height/5), [leaf CGImage]);

    // restore centred state
    CGContextRestoreGState(myContext);

    // rotate and transform the second 'hand'
    CGContextSetAlpha(myContext, 0.5);
    CGContextRotateCTM (myContext, [self toRadians:((theSeconds-15)*360 /60.0) - 10]);
    CGContextTranslateCTM (myContext, -5, -[leaf size].height/10);

    // draw the second hand and restore original context
    CGContextDrawImage(myContext, CGRectMake(0, 0, [leaf size].width/5, [leaf size].height/5), [leaf CGImage]);
    CGContextRestoreGState(myContext);
}

- (void)drawRect:(CGRect)rect
{
    // draw clock in clock view
    [self drawClock:CGPointMake(rect.size.width/2,rect.size.height/2) hours:self.hours minutes:self.minutes seconds:self.seconds];

    // test code for centering hands
//  [self drawClock:CGPointMake(rect.size.width/2,rect.size.height/2) hours:12 minutes:00 seconds:00];
}
Jonathan Watmough
+1  A: 

it's easy! look here

sakrist