I supplied slider graphic for my slider.
This is the result:
Then on the right
So you see, the edge become a "box" rather than rounded. What I really want is something that's closer with what apple provide. This is the code I used to switch back and forth between using custom slider image and nil:
- (IBAction)groupPinButton:(id)sender {
self.groupPinButton.selected = ! self.groupPinButton.selected;
UIImage *minImage = [[UIImage imageNamed:#"minimum_slider.png"]resizableImageWithCapInsets2:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:#"maximum_slider.png"]resizableImageWithCapInsets2:UIEdgeInsetsMake(0, 0, 0, 5)];
if (self.groupPinButton.selected)
{
[self.distanceSlider setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[self.distanceSlider setMinimumTrackImage:minImage forState:UIControlStateNormal];
}
else{
[self.distanceSlider setMaximumTrackImage:nil forState:UIControlStateNormal];
[self.distanceSlider setMinimumTrackImage:nil forState:UIControlStateNormal];
}
}
If I set the maximumTrackImage as nil, this is the screenshot:
Which looks lot nicer. But I want to customize.
The pictures that I use for minimum_slider.png and maximum_slider.png is the following:
and you can get there at
http://i.stack.imgur.com/n30aw.png
and
http://i.stack.imgur.com/sF9SQ.png
Note the other edge is fine though. So when slider is anywhere except the maximum and minimum things work fine. If the slider is at maximum then the far right corner is messed up. The far left corner is fine.
Ah! The same problem I was having. As you get to the end of the program, and the slider is at maximum, the entire track image is now the left side, the "minimum_slider.png" in your example. Thus there is no part of the "maximum_slider" image showing (which would have given you the rounded right edge), only the square right side of the "minimum_slider".
I suspect the answer is to give your two images rounded sides on both ends, and make the expandable parts (the edge insets) in the middle of the graphic.
I haven't done this yet, as I'm still confused as to the workings of UIEdgeInsets (I find the documentation terrible!) and the default track is sufficient for me now. So let us all know when you solve this.
Related
I am using the following code to customise the back button of our UINavigationBar. However, the image is stretched too far, resulting in an image like the following. Please can you tell me how to prevent this?
Thanks!
[[UIImage imageNamed:#"back_button"] stretchableImageWithLeftCapWidth:14 topCapHeight:0]
Original Back Button Image:
The minimum width of the UIBarButtonItem is largely determined by the size of the image you provide. You should export your back arrow image from your editor so that there is only 1 pixel of tileable image content in the middle column of the image, such that the left and right portions can be used as the left and right caps:
As per the image, it seems image is stretched correctly. Just check the back button frame. Also please verify, if there is no whitespace in end of the string "Profile".
stretchableImageWithLeftCapWidth:topCapHeight is deprecated in iOS 5.
This doesn't answer your question. It's just a hint.
Deprecated UIImage Methods
I have an image with a noise texture on it and wanted to do the same thing. I finally arrived at this solution which I believe does exactly what you want (at least in iOS 6):
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] init];
UIImage *buttonBg = [[UIImage imageNamed:#"back-arrow.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 6)];
[backButton setBackButtonBackgroundImage:buttonBg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
backButton.title = #"Back";
You can customize your edge insets to exclude portions that shouldn't stretch.
I'm creating an app which uses UIImagePickerController to present a camera to the user with a custom overlay which includes one of two grids/patterns over the camera "view" itself.
The grids themselves are .png files in a UIImageView which is added to the overlay, they're quite complex so I would really like to steer away from drawing the grid in code, even though that would present I nice clean and simple answer to my question.
I would like to be able to offer the grids in a variety of colours. The obvious solution is create more .png images in different colours, but for each colour there would have to be four separate images (regular and retina for each of the grids) so that would quickly add up to a lot of assets.
The solution which, I think, would be ideal, would be for me to just create the grids in white/gray and then apply a tint to it to colour it appropriately.
Is that possible? Or do I need to seek an alternative solution?
With thanks to Ananth for pointing me to iPhone - How do you color an image?
I've added this method to my code as suggested in the question, with the modification in willc2's answer:
-(UIImage *)colorizeImage:(UIImage *)baseImage color:(UIColor *)theColor {
UIGraphicsBeginImageContext(baseImage.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect area = CGRectMake(0, 0, baseImage.size.width, baseImage.size.height);
CGContextScaleCTM(ctx, 1, -1);
CGContextTranslateCTM(ctx, 0, -area.size.height);
CGContextSaveGState(ctx);
CGContextClipToMask(ctx, area, baseImage.CGImage);
[theColor set];
CGContextFillRect(ctx, area);
CGContextRestoreGState(ctx);
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
CGContextDrawImage(ctx, area, baseImage.CGImage);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
...and I'm getting exactly what I'm after.
I have a game where you have "specks" and "connectors".
I make a UIImageView that connects two "specks"… but as you can see (if the picture works), when the specks are almost on top of each other, like on the left, it doesn't work. This is my code… and I was wondering how you would make the rotation more accurate in that sort of situation.
UIImageView *connector = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"RedConnector.png"]];
connector.contentMode = UIViewContentModeScaleToFill;
connector.hidden = NO;
connector.alpha = 1;
connector.frame = CGRectMake(0, 0, [self DistanceBetweenPoints:speck1.center :speck2.center], 7);
connector.center = CGPointMake((speck1.center.x + speck2.center.x)/2, (speck1.center.y + speck2.center.y)/2);
//This is where the prob is:
connector.transform = CGAffineTransformMakeRotation(tanh((speck2.center.y - speck1.center.y)/(speck2.center.x - speck1.center.x)) );
[Connectors addObject:connector];
[self.view addSubview:connector];
"DistanceBetweenPoints" is not the problem. That works fine. Also, I know the center AND the frame is sort of redundant-- I'll work that out later. Third of all, I have made sure that two specks are never directly on top of each other (to never divide by zero). Last of all, I STILL WANT THESE TO BE UIIMAGEVIEWS!! So I can change the image and animate them so it looks like electricity flowing from speck to speck.
If anybody could show me how to make the rotation more accurate, it would be greatly appreciated. Thanks!
You should use atan2(y,x), not tanh(y/x). That is, you want the arctangent, not the hyperbolic tangent.
This question has been asked before but in a slightly different way and I was unable to get any of the answers to work the way I wanted, so I am hoping somebody with great Core Animation skills can help me out.
I have a set of cards on a table. As the user swipes up or down the set of cards move up and down the table. There are 4 cards visible on the screen at any given time, but only the second card is showing its face. As the user swipes the second card flips back onto its face and the next card (depending on the swipe direction) lands in it's place showing its face.
I have set up my card view class like this:
#interface WLCard : UIView {
UIView *_frontView;
UIView *_backView;
BOOL flipped;
}
And I have tried flipping the card using this piece of code:
- (void) flipCard {
[self.flipTimer invalidate];
if (flipped){
return;
}
id animationsBlock = ^{
self.backView.alpha = 1.0f;
self.frontView.alpha = 0.0f;
[self bringSubviewToFront:self.frontView];
flipped = YES;
CALayer *layer = self.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / 500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 1.0f, 0.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
};
[UIView animateWithDuration:0.25
delay:0.0
options: UIViewAnimationCurveEaseInOut
animations:animationsBlock
completion:nil];
}
This code works but it has the following problems with it that I can't seem to figure out:
Only half of the card across the x-axis is animated.
Once flipped, the face of the card is upside down and mirrored.
Once I've flipped the card I cannot get the animation to ever run again. In other words, I can run the animation block as many times as I want, but only the first time will animate. The subsequent times I try to animate lead to just a fade in and out between the subviews.
Also, bear in mind that I need to be able to interact with the face of the card. i.e. it has buttons on it.
If anybody has run into these issues it would be great to see your solutions. Even better would be to add a perspective transform to the animation to give it that extra bit of realism.
This turned out to be way simpler than I thought and I didn't have to use any CoreAnimation libraries to achieve the effect. Thanks to #Aaron Hayman for the clue. I used transitionWithView:duration:options:animations:completion
My implementation inside the container view:
[UIView transitionWithView:self
duration:0.2
options:UIViewAnimationOptionTransitionFlipFromBottom
animations: ^{
[self.backView removeFromSuperview];
[self addSubview:self.frontView];
}
completion:NULL];
The trick was the UIViewAnimationOptionTransitionFlipFromBottom option. Incidentally, Apple has this exact bit of code in their documentation. You can also add other animations to the block like resizing and moving.
Ok, this won't be a complete solution but I'll point out some things that might be helpful. I'm not a Core-Animation guru but I have done a few 3D rotations in my program.
First, there is no 'back' to a view. So if you rotate something by M_PI (180 degrees) you're going to be looking at that view as though from the back (which is why it's upside down/mirrored).
I'm not sure what you mean by:
Only half of the card across the x-axis is animated.
But, it it might help to consider your anchor point (the point at which the rotation occurs). It's usually in the center, but often you need it to be otherwise. Note that anchor points are expressed as a proportion (percentage / 100)...so the values are 0 - 1.0f. You only need to set it once (unless you need it to change). Here's how you access the anchor point:
layer.anchorPoint = CGPointMake(0.5f, 0.5f) //This is center
The reason the animation only ever runs once is because transforms are absolute, not cumulative. Consider that you're always starting with the identity transform and then modifying that, and it'll make sense...but basically, no animation occurs because there's nothing to animate the second time (the view is already in the state you're requesting it to be in).
If you're animating from one view to another (and you can't use [UIView transitionWithView:duration:options:animations:completion:];) you'l have to use a two-stage animation. In the first stage of the animation, for the 'card' that is being flipped to backside, you'll rotate the view-to-disappear 'up/down/whatever' to M_PI_2 (at which point it will be 'gone', or not visible, because of it's rotation). And in the second stage, you're rotate the backside-of-view-to-disappear to 0 (which should be the identity transform...aka, the view's normal state). In addition, you'll have to do the exact opposite for the 'card' that is appearing (to frontside). You can do this by implementing another [UIView animateWithDuration:...] in the completion block of the first one. I'll warn you though, doing this can get a little bit complicated. Especially since you're wanting views to have a 'backside', which will basically require animating 4 views (the view-to-disappear, the view-to-appear, backside-of-view-to-disappear, and the backside-of-view-to-appear). Finally, in the completion block of the second animation you can do some cleanup (reset view that are rotated and make their alpha 0.0f, etc...).
I know this is complicated, so you might want read some tutorial on Core-Animation.
#Aaron has some good info that you should read.
The simplest solution is to use a CATransformLayer that will allow you to place other CALayer's inside and maintain their 3D hierarchy.
For example to create a "Card" that has a front and back you could do something like this:
CATransformLayer *cardContainer = [CATransformLayer layer];
cardContainer.frame = // some frame;
CALayer *cardFront = [CALayer layer];
cardFront.frame = cardContainer.bounds;
cardFront.zPosition = 2; // Higher than the zPosition of the back of the card
cardFront.contents = (id)[UIImage imageNamed:#"cardFront"].CGImage;
[cardContainer addSublayer:cardFront];
CALayer *cardBack = [CALayer layer];
cardBack.frame = cardContainer.bounds;
cardBack.zPosition = 1;
cardBack.contents = (id)[UIImage imageNamed:#"cardBack"].CGImage; // You may need to mirror this image
[cardContainer addSublayer:cardBack];
With this you can now apply your transform to cardContainer and have a flipping card.
#Paul.s
I followed your approach with card container but when i applt the rotation animation on card container only one half of the first card rotates around itself and finally the whole view appears.Each time one side is missing in the animation
Based on Paul.s this is updated for Swift 3 and will flip a card diagonally:
func createLayers(){
transformationLayer = CATransformLayer(layer: CALayer())
transformationLayer.frame = CGRect(x: 15, y: 100, width: view.frame.width - 30, height: view.frame.width - 30)
let black = CALayer()
black.zPosition = 2
black.frame = transformationLayer.bounds
black.backgroundColor = UIColor.black.cgColor
transformationLayer.addSublayer(black)
let blue = CALayer()
blue.frame = transformationLayer.bounds
blue.zPosition = 1
blue.backgroundColor = UIColor.blue.cgColor
transformationLayer.addSublayer(blue)
let tgr = UITapGestureRecognizer(target: self, action: #selector(recTap))
view.addGestureRecognizer(tgr)
view.layer.addSublayer(transformationLayer)
}
Animate a full 360 but since the layers have different zPositions the different 'sides' of the layers will show
func recTap(){
let animation = CABasicAnimation(keyPath: "transform")
animation.delegate = self
animation.duration = 2.0
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.toValue = NSValue(caTransform3D: CATransform3DMakeRotation(CGFloat(Float.pi), 1, -1, 0))
transformationLayer.add(animation, forKey: "arbitrarykey")
}
In a project I'm working on, I have 3 images: top, middle, and bottom. Top and bottom are fixed height, and middle should be repeated in between the two. (The window size will be changing.) They all are tinted with a color from the user preferences, then need to have their alpha set using a value from the preferences.
I can do pretty much everything. The part I get stuck at is drawing the middle. I decided using [NSColor +colorWithPaternImage:] would be the easiest thing to use. There's a lot of code that makes the actually images and colors, so just assume they exist and are not nil.
int problem; // just to help explain things
float alpha;
NSImage *middleTinted;
NSRect drawRect = [self bounds];
drawRect.size.height = self.bounds.size.height - topTinted.size.height - bottomTinted.size.height;
drawRect.origin.y = topTinted.size.height;
NSColor* colorOne = [NSColor colorWithPatternImage:middleTinted];
NSColor* colorTwo = [colorOne colorWithAlphaComponent:alpha];
if(problem == 1)
{
[colorOne set];
}
else if(problem == 2)
{
[colorTwo set];
}
[NSBezierPath fillRect:drawRect];
Assuming problem == 1, it draws the correct image, in the correct location and with the correct size, but no alpha. (Obviously, since I didn't specify one.)
When problem == 2, I'd expect it to do the same thing, but have the correct alpha value. Instead of this, I get a black box.
Is there a solution that will repeat the image with the correct alpha? I figure I could just draw the image manually in a loop, but I'd prefer a more reasonable solution if one exists.
I expect the problem is that pattern colors don't support -colorWithAlphaComponent:.
NSCell.h contains a method called NSDrawThreePartImage that does the work of drawing end caps and a tiled image in between. It also has an alphaFraction parameter that should meet your needs.
If that doesn't work for you, then you might get the pattern color approach to work by re-rendering your middleTinted image into a new NSImage, using the desired alpha value. (See NSImage's draw... methods.)