UIBarButtonItem bouncy rotation animation in UINavigationBar - ios

I have a custom leftBarButtonItem in UINavigationBar.
This leftBarButtonItem in initialized with custom view.
I tried many custom view's, from UIButton with background image to UIView with UIImageView as subview.
Custom view:
UIButton *leftButton = [[UIButton alloc] init];
leftButton.frame = CGRectMake(0, 0, 30, 30);
[leftButton setImage:[UIImage imageNamed:s] forState:UIControlStateNormal];
Second custom view:
UIImageView *leftImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:s]];
[leftImageView setFrame:CGRectMake(0, -15, 30, 30)];
UIView *leftView = [[UIView alloc] init];
[leftView addSubview:leftImageView];
The problem is that when I start rotating image in my custom view, image bounces slightly when rotating.
One of my examples for animation that doesn't work:
UIView *v = item.leftBarButtonItem.customView;
UIImageView *imageView;
for (UIView *subView in [v subviews]) {
if ([subView isKindOfClass:[UIImageView class]]) {
imageView = (UIImageView *)subView;
}
}
if (animating) {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: 2 * M_PI];
animation.duration = 1.0f;
animation.repeatCount = INFINITY;
v.layer.anchorPoint = CGPointMake(0.5, 0.5);
[v.layer addAnimation:animation forKey:#"SpinAnimation"];
} else {
[v.layer removeAllAnimations];
}
I would like to make rotation, where the center of the image stays the same all the time.
Any ideas?

Related

Animation in content of ScrollView

I want to animate content of scrollview i have tried this for animation.
- (void)viewDidLoad {
[super viewDidLoad];
//Scroll View Created Programmatically
scrollview=[[UIScrollView alloc] initWithFrame:self.view.bounds];
scrollview.delegate=self;
scrollview.contentSize=CGSizeMake(scrollview.bounds.size.width, self.view.bounds.size.height);
[self.view addSubview:scrollview];
// Road Image Created Programmatically
backgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
backgroundImageView.image = [UIImage imageNamed:#"roadds.png"];
backgroundImageView.contentMode = UIViewContentModeRedraw;
[scrollview addSubview:backgroundImageView];
// Tree top left Created Programmatically
Tree = [[UIImageView alloc] initWithFrame: CGRectMake(0, 0, 30, 50)];
Tree.image = [UIImage imageNamed:#"rsz_1rsz_tree.png"];
Tree.contentMode = UIViewContentModeTopLeft;
[scrollview addSubview:Tree];
//Tree top Right
Tree1 = [[UIImageView alloc] initWithFrame: CGRectMake(self.view.frame.size.width-30, 0, 30, 50)];
Tree1.image = [UIImage imageNamed:#"rsz_tree1.png"];
Tree1.contentMode = UIViewContentModeTopRight;
[scrollview addSubview:Tree1];
//Tree Bottom left
Tree2 = [[UIImageView alloc] initWithFrame: CGRectMake(0, self.view.frame.size.height-80, 30, 50)];
Tree2.image = [UIImage imageNamed:#"rsz_tree2.png"];
Tree2.contentMode = UIViewContentModeBottomLeft;
[scrollview addSubview:Tree2];
//Tree Bottom Right
Tree3 = [[UIImageView alloc] initWithFrame: CGRectMake(self.view.frame.size.width-30, self.view.frame.size.height-80, 30, 50)];
Tree3.image = [UIImage imageNamed:#"rsz_tree3.png"];
Tree3.contentMode = UIViewContentModeBottomRight;
[scrollview addSubview:Tree3];
// Car
car = [[UIImageView alloc] initWithFrame: CGRectMake((self.view.frame.size.width)/2+20, self.view.frame.size.height-120, 40, 60)];
car.image = [UIImage imageNamed:#"rsz_car1.png"];
car.contentMode = UIViewContentModeCenter;
[scrollview addSubview:car];
//Grass
grass = [[UIImageView alloc] initWithFrame:CGRectMake(0, (self.view.frame.size.height)/2,30, 30)];
grass.image = [UIImage imageNamed:#"rsz_grass.png"];
grass.contentMode = UIViewContentModeBottomLeft;
[scrollview addSubview:grass];
//Grass
grass1 = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width-60, (self.view.frame.size.height)/2,30, 30)];
grass1.image = [UIImage imageNamed:#"rsz_grass1.png"];
grass1.contentMode = UIViewContentModeBottomLeft;
[scrollview addSubview:grass1];
// Left Arrow
left = [[UIButton alloc] initWithFrame:CGRectMake((self.view.frame.size.width)/2+60, (self.view.frame.size.height-35),30, 30)];
[left setBackgroundImage:[UIImage imageNamed:#"rsz_arrowl.png"]forState:UIControlStateNormal];
left.contentMode = UIViewContentModeBottomRight;
[scrollview addSubview:left];
//right arrow
right = [[UIButton alloc] initWithFrame:CGRectMake((self.view.bounds.size.width)/2 - 90, (self.view.frame.size.height-35),30, 30)];
[right setBackgroundImage:[UIImage imageNamed:#"rsz_arrowr.png"]forState:UIControlStateNormal];
right.contentMode = UIViewContentModeBottomLeft;
[scrollview addSubview:right];
// For Animation
CGRect bounds = scrollview.bounds;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"bounds"];
animation.duration = 10;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.fromValue = [NSValue valueWithCGRect:bounds];
bounds.origin.y += 100;
animation.toValue =[NSValue valueWithCGRect:bounds];
[scrollview.layer addAnimation:animation forKey:#"bounds"];
scrollview.bounds = bounds;
}
Add UIView to ScrollView and then add your all stuff to this view.
And add animation to this view or view's layer. Hope this will work. :)
If you want your initial position back after animation add this line
bounds.origin.y -= 100;
after
[scrollview.layer addAnimation:animation forKey:#"bounds"];
so, last five line of your viewdidLoad should as below,
bounds.origin.y += 100;
animation.toValue =[NSValue valueWithCGRect:bounds];
[scrollview.layer addAnimation:animation forKey:#"bounds"];
bounds.origin.y -= 100;
scrollview.bounds = bounds;

Programmatically added subview frames don't show up right in scrollview

I'm creating a scrollView programmatically, and all the views in it. However, when I add more then 1 view, the other views layers don't show up right in their respective frames.
For example:
-(void)viewDidLoad {
[super viewDidLoad];
self.scrollView = [[UIScrollView alloc] init];
self.scrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, 150*5);
self.scrollView.backgroundColor = [UIColor lightGrayColor];
self.scrollView.scrollEnabled = YES;
self.scrollView.showsVerticalScrollIndicator = NO;
[self.view addSubview:self.scrollView];
[self setUpLogInButtons];
}
Then I set the subViews to scrollView up here:
-(void)setUpLogInButtons {
CGFloat subviewWidth = self.scrollView.frame.size.width/2;
CGFloat subviewHeight = 150;
UIView *facebookView = [[UIView alloc] init];
facebookView.frame = CGRectMake(0, 0, subviewWidth, subviewHeight);
[facebookView.layer insertSublayer:[self gradientLayerForViewFrame:facebookView.frame withColors:[self colorArrayWithValues:0x4A5C81 v2:0x495B82 v3:0x495B82 v4:0x475B85 v5:0x465B87 v6:0x455A88 v7:0x445A8A v8:0x435A8B v9:0x425A8D v10:0x41598F v11:0x405990 v12:0x3F5992 v13:0x3E5993 v14:0x3D5895 v15:0x3C5896 v16:0x3B5898 v17:0x3A589A]] atIndex:0];
[facebookView addSubview:[self label:self.facebookLabel forView:facebookView withName:#"Facebook" loggedIn:NO]];
[self.scrollView addSubview:facebookView];
}
When it's one subView it works fantastic, when I add the other one it's not right:
-(void)setUpLogInButtons {
...
UIView *facebookView = [[UIView alloc] init];
...
[self.scrollView addSubview:facebookView];
UIView *twitterView = [[UIView alloc] init];
twitterView.frame = CGRectMake(subviewWidth, 0, subviewWidth, subviewHeight);
[twitterView.layer insertSublayer:[self gradientLayerForViewFrame:twitterView.frame withColors:[self colorArrayWithValues:0x2BA8D5 v2:0x28A8D6 v3:0x25A8D8 v4:0x22A8D9 v5:0x20A9DB v6:0x1DA9DC v7:0x1AA9DE v8:0x18AADF v9:0x15AAE1 v10:0x12AAE3 v11:0x10ABE4 v12:0x0DABE6 v13:0x0AABE7 v14:0x08ACE9 v15:0x05ACEA v16:0x02ACEC v17:0x00ADEE]] atIndex:0];
[twitterView addSubview:[self label:self.twitterLabel forView:twitterView withName:#"Twitter" loggedIn:NO]];
[self.scrollView addSubview:twitterView];
}
This one does not show up, the layers specifically are off. However, here is the kicker, the label shows in the right spot because the labels frame is based on it's parent view frame.
-(UILabel *)label:(UILabel *)viewLabel forView:(UIView *)accountView withName:(NSString *)name loggedIn:(BOOL)loggedinStatus {
UILabel *label = viewLabel;
label.frame = CGRectMake(0, accountView.frame.size.height - 50, accountView.frame.size.width, 50);
label.text = [self setAccountLabelForName:name loggedIn:loggedinStatus];
label.textColor = [UIColor whiteColor];
label.textAlignment = NSTextAlignmentLeft;
return label;
}
here is a picture that shows you that the label is based off the parents view frame, and it shows up correctly, but the gradient does not, and it's based off the same frame.
and my gradient method:
-(CAGradientLayer *)gradientLayerForViewFrame:(CGRect)viewFrame withColors:(NSArray *)colors {
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = viewFrame;
gradient.colors = colors;
return gradient;
}
For some reason when inserting my gradient layer to the views layer I had to change it:
//INSTEAD OF THIS:
[... insertSublayer:[self gradientLayerForViewFrame:facebookView.frame...];
//THIS WORKED FLAWLESSLY:
[... insertSublayer:[self gradientLayerForViewFrame:facebookView.bounds...];

How to set UITextField border/CALayer border ios on three sides only

I need a border to my textfield like the following image.how can i do that?
try these..
i hope it helps...
UITextField *txt=[[UITextField alloc]initWithFrame:CGRectMake(10, 100, 150, 30)];
[txt setBackgroundColor:[UIColor clearColor]];
[txt setPlaceholder:#"Hello my friend"];
[self.view addSubview:txt];
CALayer *border = [CALayer layer];
CGFloat borderWidth = 2;
border.borderColor = [UIColor redColor].CGColor;
border.frame = CGRectMake(0, -2, txt.frame.size.width, txt.frame.size.height);
border.borderWidth = borderWidth;
[txt.layer addSublayer:border];
txt.layer.masksToBounds = YES;
I found the answer my own.
just pass the textfield name to the following function
-(void)setBorderView:(UITextField*)textField
{
UIView *borderView = [[UIView alloc]init];
borderView.backgroundColor = [UIColor clearColor];
CGRect frameRectEmail=textField.frame;
NSLogVariable(textField);
borderView.layer.borderWidth=1;
borderView.layer.borderColor=[customColor colorWithHexString:#"8c8b90"].CGColor;
borderView.layer.cornerRadius=5;
borderView.layer.masksToBounds=YES;
UIView *topBorder = [[UIView alloc]init];
topBorder.backgroundColor = [customColor colorWithHexString:#"1e1a36"];
CGRect frameRect=textField.frame;
frameRect.size.height=CGRectGetHeight(textField.frame)/1.5;
topBorder.frame = frameRect;
frameRectEmail.size.width=frameRect.size.width;
[borderView setFrame:frameRectEmail];
[_textFieldBackGroundView addSubview:borderView];
[_textFieldBackGroundView addSubview:topBorder];
[_textFieldBackGroundView addSubview:textField];
}
I am creating a view below the textfield and setting the border to this view.Now i am creating another view with the same baground color and masking the top portion od the borderView.It is not practical in all situations.But for me,it works great.Thanks.

How do I crop a MKMapView (or any UIView) into a custom shape?

I'm trying to size an MKMapView in the following way:
Elements should be able to appear behind the arc at the top, so it appears that the view is not square. I know this should be possible with CALayer, but perhaps someone has done it before?
This should be quite possible if you put your MKMapView within a UIView, then apply a mask to that.
Here's a very (!) basic example:
All I've done is put my map in a UIView called "mapContainer" and added a mask to it using this:
-(void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGRect rect = CGRectInset(self.view.frame, 70, 70);
UIView* newView = [[UIView alloc] initWithFrame:rect];
newView.layer.cornerRadius = 55.0;
newView.backgroundColor = [UIColor redColor];
self.mapContainer.layer.mask = newView.layer;
}
And you could add a border to it...
..with a few more lines...
-(void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGRect rect = CGRectInset(self.view.frame, 70, 70);
UIView* newView = [[UIView alloc] initWithFrame:rect];
newView.layer.cornerRadius = 55.0;
newView.backgroundColor = [UIColor redColor];
UIView* borderView = [[UIView alloc] initWithFrame:rect];
borderView.backgroundColor = [UIColor clearColor];
borderView.layer.cornerRadius = 55.0;
borderView.layer.borderWidth = 3.0;
borderView.layer.borderColor = [[UIColor redColor] CGColor];
[self.mapContainer addSubview:borderView];
[self.mapContainer bringSubviewToFront:borderView];
self.mapContainer.layer.mask = newView.layer;
}
I hope this points you in the right direction.
Unlike Apple Maps.
;-)

How to Rotate image after tapped in uiscrollview?

- (void)configureView
{
lblwelcome.text=#"Welcome To Gallery World";
for (UIImageView *subview in self.view.subviews) {
[subview removeFromSuperview];
}
UIBarButtonItem *addAcc = [[UIBarButtonItem alloc]
initWithTitle:#"Zoom"
style:UIBarButtonItemStylePlain
target:self
action:#selector(zoomEnabled)];
UIBarButtonItem *delAcc = [[UIBarButtonItem alloc]
initWithTitle:#"Rotate"
style:UIBarButtonItemStylePlain
target:self
action:#selector(rotateEnabled)];
NSArray *arrBtns = [[NSArray alloc]initWithObjects:addAcc,delAcc, nil];
self.navigationItem.rightBarButtonItems = arrBtns;
categoryScrollX=30;
categoryScrollY=30;
[scr.delegate self];
scr.frame = self.view.frame;
for (UIImageView *subview in scr.subviews) {
[subview removeFromSuperview];
}
height = 200;
width = 400;
pos_y =0;
pos_x =0;
int idx=0;
CGFloat x=0;
switch (_itemNo) {
case 0:
for(int i=1;i<6;i++)
{//imageView.frame = CGRectMake(categoryScrollX, categoryScrollY, (self.view.frame.size.width/4)-25, self.view.frame.size.width/4-5);
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(categoryScrollX, categoryScrollY, (self.view.frame.size.width/4)-25, self.view.frame.size.width/4-5)];
[image setImage:[UIImage imageNamed:[NSString stringWithFormat:#"e1%d.png",i]]];
[scr addSubview:image];
x+=320;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleSingleTap:)];
tapGesture.numberOfTapsRequired = 1;
tapGesture.delegate = self;
image.userInteractionEnabled = YES;
[image addGestureRecognizer:tapGesture];
// [image.layer setBorderColor: [[UIColor yellowColor] CGColor]];
// [image.layer setBorderWidth: 0.9];
// image.layer.MasksToBounds = false;
// image.layer.ShadowColor = [[UIColor alloc] initWithRed:0 green:0 blue:0 alpha:0.5].CGColor;
// image.layer.ShadowOpacity = 1.0f;
// image.layer.ShadowOffset = CGSizeMake(0, 2.5f);
// image.clipsToBounds = NO;
CALayer* layer = [image layer];
[layer setBorderWidth:2.0f];
[image setContentMode:UIViewContentModeScaleAspectFit];
[layer setBorderColor:[UIColor whiteColor].CGColor];
scr.minimumZoomScale = scr.frame.size.width / imgview.frame.size.width;
scr.maximumZoomScale = 2.0;
[scr setZoomScale:scr.minimumZoomScale];
scrollPosition++;
currentIndex++;
if(scrollPosition>4)
{
categoryScrollY = categoryScrollY+self.view.frame.size.width/4+12;
scrollPosition=0;
currentIndex = currentIndex+scrollPosition;
categoryScrollX=30;
}
else
{
categoryScrollX= (categoryScrollX+self.view.frame.size.width/4)-6;
}
}
scr.pagingEnabled=YES;
scr.contentSize = CGSizeMake(320*5, 300);
_detailDescriptionLabel.text=#"Accessories";
self.title=#"Accessories";
[self.view addSubview:scr];
break;
.....following by other cases with the above way with different images....
Above is my configure view and am just adding some dynamic images in UiScrollview and i have added tap guesture on each images....with the following
-(void)handleSingleTap:(UITapGestureRecognizer *)rec{
for (UIImageView *subview in scr.subviews) {
[subview removeFromSuperview];
}
UIView *img = [rec view];
img.frame = self.view.frame;
[self.view addSubview:img];
}
now what i want is after tap i want to give rotation effect to that image..
am just beginners for this Xcode environment and as well as iOS development.
some how i just succeeded to show images in uiscrollview..but after googled so much i couldn't find a good guidance for rotating the image.so can any one help me out to give rotation to uiimageview image in uiscrollview after the image is tapped?
try like this ,
-(IBAction)ButtonAction:(id)sender{
CABasicAnimation *fullRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
fullRotation.fromValue = [NSNumber numberWithFloat:0];
fullRotation.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];
fullRotation.duration = 1;
fullRotation.repeatCount = 1;
[imageview.layer addAnimation:fullRotation forKey:#"360"];
}
take one button and give action(call this mathod) for that button.
You can rotate the imageView using the following code :
imageView.transform = CGAffineTransformMakeRotation(angle);

Resources