How to rotate image and arrow line from a fixed center point - iphone

In my app i have a fix size of button/center points, and i wants to rotate arrow line and this attached image also rotate when i touch/scroll up/down.
And i have made a demo in this i scroll only images using icarousel classes.
but i can't scroll both arrow and image scroll both at a time.
Please help me how to implement this.
and my code for only image scroll using icarousel is here..
- (UIView *)carousel:(__unused iCarousel *)carousel viewForItemAtIndex: (NSInteger)index reusingView:(UIView *)view
{
UIView *viewFor;
UIImageView *itemView;
if (view==nil) {
viewFor=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
itemView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 45, 120, 120)];
[itemView.layer setCornerRadius:itemView.frame.size.width/2];
[itemView setClipsToBounds:YES];
[viewFor addSubview:itemView];
StikImage=[[UIImageView alloc]initWithFrame:CGRectMake(-140, 95, 140, 20)];
StikImage.backgroundColor=[UIColor whiteColor];
[viewFor addSubview:StikImage];
}
else
{
viewFor=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
itemView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 45, 120, 120)];
[itemView.layer setCornerRadius:itemView.frame.size.width/2];
[itemView setClipsToBounds:YES];
[viewFor addSubview:itemView];
StikImage=[[UIImageView alloc]initWithFrame:CGRectMake(-140, 95, 140, 20)];
StikImage.backgroundColor=[UIColor whiteColor];
[viewFor addSubview:StikImage];
}
itemView.image=[images objectAtIndex:index];
return viewFor;
}
And here is my Custom type icrousel method for transform images
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform {
const CGFloat centerItemZoom = 1.6;
const CGFloat centerItemSpacing = 1.2;
const CGFloat centerItemYOffset = 100;
CGFloat spacing = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.3f];
CGFloat absClampedOffset = MIN(2.5, fabs(offset));
CGFloat clampedOffset = MIN(1.0, MAX(-1.0, offset));
CGFloat scaleFactor = 1.0 + absClampedOffset * (1.2/centerItemZoom - 1.0);
CGFloat yoffset = (1.0f - absClampedOffset) * centerItemYOffset;
offset = (scaleFactor * offset + scaleFactor * (centerItemSpacing - 1.0) * clampedOffset) * carousel.itemWidth * spacing;
if (carousel.vertical)
{
transform = CATransform3DTranslate(transform, yoffset, offset, -absClampedOffset);
}
else
{
transform = CATransform3DTranslate(transform, offset, yoffset, -absClampedOffset);
}
transform = CATransform3DScale(transform, scaleFactor, scaleFactor, 5.0f);
return transform;
}

Use below code for rotate the image view
imageview.transform = CGAffineTransformMakeRotation(degrees * M_PI/180);
you can use what you want degree sizes are like 180, 90, 240, 270..., depends on your requirements "touch/scroll up/down"

Related

Draw Vertical line in UIView

UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight, dialogContainer.bounds.size.width, buttonSpacerHeight)];
lineView.backgroundColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1.0f];
[dialogContainer addSubview:lineView];
I have used this code to draw horizontal line on UIView. How can I add Vertical line to UIView?
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(dialogContainer.bounds.size.width/2, 0, buttonSpacerHeight, dialogContainer.bounds.size.height)];
lineView.backgroundColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1.0f];
[dialogContainer addSubview:lineView];
You can subclass UIView and override the drawRect: method. For example
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
//Horizontal Line
CGContextSetLineWidth(context, buttonSpacerHeight);
CGContextMoveToPoint(context,0,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight);
CGContextAddLineToPoint(context,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight + dialogContainer.bounds.size.width,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight);
//Vertical Line
CGContextAddLineToPoint(context,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight + dialogContainer.bounds.size.width, dialogContainer.bounds.size.height);
CGContextStrokePath(context);
}
If you are adamant to use UIViews itself to draw vertical lines then reduce the width to a negligible value and increase the height of the UIView according to your wish.
Just exchange your height and width to draw vertical line simple :)
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight,buttonSpacerHeight, dialogContainer.bounds.size.height)];
other example
UIView *horizontalLineView=[[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 2)];
[horizontalLineView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:horizontalLineView];
UIView *verticalLineView=[[UIView alloc] initWithFrame:CGRectMake(100, 100, 2, 100)];
[verticalLineView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:verticalLineView];
If you want to use coreGraphic then
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, self.frame);
CGContextMoveToPoint(context, XstartPoint, ystartPoint);
CGContextAddLineToPoint(context,XendPoint,YendPoint);
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
CGContextStrokePath(context);
}
If you want to draw using sprite kit then follow
taking Benny's answer to swift, you could do something like:
override func drawRect(rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
let spacerHeight = rect.size.height
CGContextSetLineWidth(context, 2.0)
CGContextMoveToPoint(context, 0, (spacerHeight / 4.0))
CGContextAddLineToPoint(context, 0, 3 * (spacerHeight / 4.0))
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextStrokePath(context)
}
According to Apple's documentation CGRect Returns a rectangle with the specified coordinate and size values:
CGRect CGRectMake (
CGFloat x,
CGFloat y,
CGFloat width,
CGFloat height
);
So try inverting what you ised to have as the width with the height
Like you have draw horizontal line just increase the height of UIView and and decrease the width like the below,
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight, 2, 200)];

How to move CGRect in a custom cell?

So, I have a custom cell class and in the implementation I have this code:
- (void)layoutSubviews {
[super layoutSubviews];
CGRect contentRect = self.contentView.bounds;
CGFloat boundsX = contentRect.origin.x;
CGRect frame;
frame = CGRectMake(boundsX+10,10, 50, 50);
picture.frame = frame;
frame = CGRectMake(boundsX+75 ,0, 170, 50);
nameLabel.frame = frame;
frame = CGRectMake(boundsX+75 ,43, 225, 23);
costLabel.frame = frame;
frame = CGRectMake(boundsX+280, 30, 8, 13);
arrow.frame = frame;
}
Now let's see how this layout works at the picture below:
I am satisfied with the result, but I also want to change costLabel position in the cell according to the nameLabel. If there are two lines of text in the nameLabel, I don't want to change the costLabel position, however if there are just one line of text in the nameLabel, I want to move costLabel upper, so I can rid off the space and make costLabel closer to nameLabel.
I tried this in the cellForRowAtIndexPath:
CGRect frame = cell.costLabel.frame;
frame.origin.y = frame.origin.y-10; // new y coordinate
cell.costLabel.frame = frame;
But it didn't work.
Any solutions or ideas, how can I change CGRect coordinates (y origin) ?
layoutSubviews is going to be called when it wants to draw your cell. Make your frame changes in layoutSubviews (i.e.
if (thereIsOnlyOneLineInThisCell) {
frame = CGRectMake(boundsX+75 ,43 -10, 225, 23);
} else {
frame = CGRectMake(boundsX+75 ,43, 225, 23);
}
costLabel.frame = frame;
You can calclulate the size of the nameLabel with : NSString UIKit additions

iPhone how to clip half of the ellipse

I have drawn ellipse:
CGContextFillEllipseInRect(contextRef, CGRectMake(50, 50, 50, 128));
But i only need a half of ellipse, is there a way to clip the other half?
Before calling the drawing method you can clip the context to a portion of the ellipse:
CGContextSaveGState(contextRef);
BOOL onlyDrawTopHalf = YES;
CGFloat halfMultiplier = onlyDrawTopHalf ? -1.0 : 1.0;
CGRect ellipse = CGRectMake(50, 50, 50, 128);
CGRect clipRect = CGRectOffset(ellipse, 0, halfMultiplier * ellipse.size.height / 2);
CGContextClipToRect(contextRef, clipRect);
CGContextFillEllipseInRect(contextRef, ellipse);
// restore the context: removes the clipping
CGContextRestoreGState(contextRef);

How to center image in a uiimageview/uiscrollview (pre and post zooming)

I am trying to center an image (with respect to the iphone screen) such that when the view is loaded the image is center width/height... In my case my view is loaded at pixel points 0,0 of the image itself and if I zoom out the image appears in the top left corner as opposed to mid-center of the screen/view. Here is what I have so far:
UIImage *image = [UIImage imageNamed: #"t.bmp"];
self.view.backgroundColor = [UIColor blackColor];
self.mi.frame = CGRectMake(0, 0, image.size.width, image.size.height);
self.mi.contentMode = (UIViewContentModeCenter);
self.mi.backgroundColor = [UIColor blackColor];
[self.mi setImage:image];
/* Draw a line here!!
UIGraphicsBeginImageContext(self.mi.frame.size);
[self.mi.image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 20.0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0,0);
CGContextAddLineToPoint(context, 200, 200);
CGContextMoveToPoint(context, 200,0);
CGContextAddLineToPoint(context, 0, 200);
CGContextStrokePath(context);
self.mi.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
*/
self.expimg.maximumZoomScale = 2.0;
self.expimg.minimumZoomScale = 0.1;
self.expimg.clipsToBounds = YES;
self.expimg.delegate = self;
[self.expimg setContentSize:self.mi.frame.size];
[self.expimg addSubview: self.mi];
[self.view addSubview: self.expimg];
Thanks!
Edit: mi is a UIImageView and expimg is a UIScrollView (used interface builder). Also, viewForZoomingInScrollView is defined.
You should be able to do this by adjusting the position and size of the image and scroll view on initial load, and as zoom levels change. Make a method that is called on viewDidLoad, and again on the UIScrollViewDelegate method scrollViewDidZoom:.
Something like this should work (where imageView and scrollView are class attributes):
- (void)centerImage {
CGSize screenSize = CGSizeMake(320, 480);
CGSize imageSize = imageView.frame.size;
imageSize.width = imageSize.width * scrollView.zoomScale;
imageSize.height = imageSize.height * scrollView.zoomScale;
CGSize scrollSize = scrollView.frame.size;
CGFloat centerX;
CGFloat centerY;
CGFloat left;
CGFloat top;
if (imageSize.width > screenSize.width) {
scrollSize.width = imageSize.width;
centerX = imageSize.width/2;
left = 0;
} else {
scrollSize.width = screenSize.width;
centerX = screenSize.width/2;
left = centerX - imageSize.width/2;
}
if (imageSize.height > screenSize.height) {
scrollSize.height = imageSize.height;
centerY = imageSize.height/2;
top = 0;
} else {
scrollSize.height = screenSize.height;
centerY = screenSize.width/2;
top = centerY - imageSize.height/2;
}
CGRect scrollFrame = scrollView.frame;
scrollFrame.size = scrollSize;
scrollView.frame = scrollFrame;
CGRect imageFrame = imageView.frame;
imageFrame.origin = CGPointMake(left, top);
scrollView.contentOffset = CGPointMake(centerX-(imageSize.width/2), centerY-(imageSize.height/2));
}
I have not tested this, so some of my math could be wrong. Either way, it will hopefully give you a good idea of what to do.
Step 1: You create an image view property then init it at viewDidLoad and add to scrollView:
self.pictureImage = [[UIImageView alloc]initWithImage:self.picture];
[_scrollView addSubview:_pictureImage];
self.pictureImage.alpha = 0;
_scrollView.delegate = self;
Step 2: Create adjustZoomScale function to get minimum scale
- (CGFloat)adjustZoomScale{
CGFloat scale = self.scrollView.bounds.size.width / self.pictureImage.bounds.size.width;
CGFloat h = scale * self.pictureImage.bounds.size.height;
if (h > self.scrollView.bounds.size.height) {
scale = self.scrollView.bounds.size.height / self.pictureImage.bounds.size.height;
}
return scale;
}
Step 3: Because frame of scroll view will be updated at viewDidAppear so we need to adjust zoom scale here. And set alpha to make image appear smoother:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear: animated];
_scrollView.maximumZoomScale = 1.0;
_scrollView.minimumZoomScale = [self adjustZoomScale];
[_scrollView setZoomScale:_scrollView.minimumZoomScale];
self.pictureImage.alpha = 1;
}
Step 4: Implement viewForZoomingInScrollView (scroll delegate method) and return image view
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return self.pictureImage;
}
Step 5: Implement scrollViewDidZoom (scroll delegate method) and adjust point for image view
- (void)scrollViewDidZoom: (UIScrollView*) scrollView {
CGSize boundsSize = scrollView.bounds.size;
CGRect contentsFrame = _pictureImage.frame;
if (contentsFrame.size.width < boundsSize.width) {
contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0;
} else {
contentsFrame.origin.x = 0.0;
}
if (contentsFrame.size.height < boundsSize.height) {
contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0;
} else {
contentsFrame.origin.y = 0.0;
}
_pictureImage.frame = contentsFrame;
}
Thank shawhu at this post for point adjusting for image view while zooming
[scrollView zoomToRect:CGRectMake(x, y, width, height) animated:YES]; will work for you...
Where rect should have those center coordinates as origin.

TableView oval button for Index/counts

Can someone help me create an index/count button for a UITableView, like this one?
iTunes http://img.skitch.com/20091107-nwyci84114dxg76wshqwgtauwn.preview.jpg
Is there an Apple example, or other tutorial? Thanks, Jordan
Wow... aaa... ok... I've got an easier way:
#import <QuartzCore/QuartzCore.h>
.....
UILabel *label = [[UILabel alloc] initWithFrame:
CGRectMake(cell.contentView.frame.size.width - 50, 0, 35, 35)];
label.layer.cornerRadius = 5;
label.backgroundColor = [UIColor blueColor]; //feel free to be creative
label.clipToBounds = YES;
label.text = #"7"; //Your text here
[cell.contentView addSubview: label];
[label release];
Basically, you're making a UILabel with rounded corners using the QuartzCore framework - don't forget to include it. Extra note: it only works on OS > 3.0.
You need to create a custom view, and then draw the oval and number in manually. Finally, assign that custom view as the accessory view of the cell. Here's the drawing code, using Core Graphics. It's not too tricky:
CGRect bounds = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();
float radius = bounds.size.height / 2.0;
NSString *countString = [NSString stringWithFormat: #"%d", _count];
if (_count < 100) bounds = CGRectMake(5, 0, bounds.size.width - 10, bounds.size.height);
CGContextClearRect(context, bounds);
CGContextSetFillColorWithColor(context, _color.CGColor);
CGContextBeginPath(context);
CGContextAddArc(context, radius + bounds.origin.x, radius, radius, M_PI / 2 , 3 * M_PI / 2, NO);
CGContextAddArc(context, (bounds.size.width + bounds.origin.x) - radius, radius, radius, 3 * M_PI / 2, M_PI / 2, NO);
CGContextClosePath(context);
CGContextFillPath(context);
[[UIColor whiteColor] set];
UIFont *font = [UIFont boldSystemFontOfSize: 14];
CGSize numberSize = [countString sizeWithFont: font];
bounds.origin.x += (bounds.size.width - numberSize.width) / 2;
[countString drawInRect: bounds withFont: font];