I'm using iOS 5, and I've been searching and haven't found if I can make a thick progress bar using UIProgressView with UIImage. How do I use a small .png file and basically stretch it out with UIProgressView so that it looks like a progress bar or is it possible? Is it possible to make that .png tall, or is it going to be restricted to how tall UIProgressView is? Thanks in advance for your help!
I have found out how to do it. First put a UIProgressView in the on the iPhone screen. I put mine at x:86 y:272. I hooked it up to the view controller's .h file, named it progView, and #synthesized it in the .m file. I put the following code in the ViewDidLoad method:
// Select the images to use
UIImage *track = [[UIImage imageNamed:#"trackBar"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];
UIImage *progress = [[UIImage imageNamed:#"progBar"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];
// Set the track and progress images
[self.progView setTrackImage:track];
[self.progView setProgressImage:progress];
[self.progView setProgressViewStyle:UIProgressViewStyleDefault]; // we don't need anything fancy
// Create a bound where you want your image. This places the attached .png bars so that the bar drains downward. I was using this as a countdown bar on the iPhone.
self.progView.frame = CGRectMake(-70, 70, self.view.bounds.size.height/1.00, 100);
// A normal progress bar fills up from left to right. I rotate it so that the bar drains down.
self.progView.transform = CGAffineTransformMakeRotation((90) * M_PI / 180.0);
This takes the image and stretches it from the middle, preserving pixels on each side. The width of the image must be changed using an image editor though. I don't think it's possible to stretch the width.
progBar.png:
trackBar.png:
Related
I have an image view that will get this awesome tvOS focus effect when the containing view gets focused.
The problem is - it should have rounded corners. Now this is easily done:
imageView.layer.cornerRadius = 5
imageView.layer.masksToBounds = true
I have to set either masksToBounds of the layer or clipsToBounds of the image view to true (which is basically the same), in order to clip the edges of the image - but as soon as I do this, the focus effect won't work any more, because it will get clipped as well.
I had more or less the same problem with buttons, but since the focus effect is much simpler than for the image view (only scaling and shadow), I just implemented it myself, but that is not an option for the image view, with all the effects applied (moving, shimmering, and so on...)
Is there an easier way? Did I miss something? I can't be the only trying to figure out how this works!? :)
I have found out an alternative solution. What one may do is to actually draw the image, clipping out the corners with an alpha channel. The image then gets scaled correctly when focused. That applied to the layer. Then, to have the alpha channel added to the other layers (like the one for the glowing effect) we need to set; "masksFocusEffectToContents = true".
I made an extension for it, based on this answer:
Swift 4.2
extension UIImageView {
func roundedImage(corners: UIRectCorner, radius: CGFloat) {
let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.frame.size)
UIGraphicsBeginImageContextWithOptions(self.frame.size, false, 1)
UIBezierPath(
roundedRect: rect,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius)
).addClip()
self.draw(rect)
self.image = UIGraphicsGetImageFromCurrentImageContext()!
// Shadows - Change shadowOpacity to value > 0 to enable the shadows
self.layer.shadowOpacity = 0
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 10, height: 15)
self.layer.shadowRadius = 3
// This propagate the transparency to the the overlay layers,
// like the one for the glowing effect.
self.masksFocusEffectToContents = true
}
}
Then to apply the rounded corners call:
myImageView.adjustsImageWhenAncestorFocused = true
myImageView.clipToBounds = false
// masks all corners with a radius of 25 in myImageView
myImageView.roundedImage(corners: UIRectCorner.allCorners, radius: 25)
One can obviously modify roundedImage() to add the parameters to define the shadows at the calling time.
Downsides:
Borders behave like cornerRadius (they get drawn inside the image).
But I think I made it working somewhere, then investigating further I
lost the changes
I am not exactly sure this is the right way to do it. I am quite confident there must be some methods out there doing it in a couple of lines. In tvOS 11 Apple introduced the round badges (animatable and all), shown at WWDC 2017. I just can't find a sample for them.
Otherwise, tvOS 12 (beta for now) introduced the Lockup. I managed to implement them programmatically, as shown in this answer.
https://forums.developer.apple.com/thread/20513
We are also facing this same issue. When you round the corners, you can see the "shine" still has a rectange shape.
I showed the issue to the Dev Evangelists at the Tech Talks in Toronto and they said it's a bug. It's reported and open rdar://23846376
For 2022.
Note that you can just use UICardView on tvOS for the effect.
Simply put the UIImageView inside the card view.
Don't forget to actually turn OFF "adjust on ancestor focus" and "user interaction enabled" on the image view, or else it will "doubly expand" when the card view expands!
There's also a weird issue where you have to add 20 to the height of all card views to make them work neatly with and enclosed image view.
I have a embedded containerview inside my viewcontroller that leads to a UIPageController. Then the UIPageController loads images from a 3rd VC controller.
So it just a simple image swipe / image carousel.
What I cant get to work is autolayout on the UIImage. My containerview has a maring top 0 right 0 left 0 and a height of 200pt with aspect ratio set.
Bellow it some other information shows eg title / text etc.
But all images appears zoomed in/croped in the containerview.
So how can I make the images scale and fit inside the container view?
Thanks,
set the image view's contentmode to scale aspect fit to see as much of the image as possible.
imageView.contentMode = .ScaleAspectFit
I want to create an NSImage of an NSScrollView object, so I can use the flat graphic for animation purposes.
When I render my scrollview object into a graphic and add it back to my window, it works but looks really bad like it's been scaled to 99% or something. I want the image to not be scaled and 100% pixel accurate. (Note: the image isn't scaled, it's the same size, it just looks like it's been poorly rescaled - the text looks rough and poor compared to the view onscreen in the scrollview)
My code:
(scrollView is my NSScrollView object)
NSData *pdf = [scrollView dataWithPDFInsideRect:[scrollView bounds]];
NSImage *image = [[NSImage alloc] initWithData:pdf];
NSImageView *imageView = [[NSImageView alloc] initWithFrame:[scrollView bounds]];
[imageView setImage: image];
[mainGUIPanel addSubview: imageView];
I've tried a heap of things, messed with pixel sizes, bounds, used IB to create the destination NSView and put the image inside that but just cannot get the image to not look bad. Any ideas?
Edit:
I tried writing the pdf data to a pdf file and viewed it, and it looked ok. So the bitmap image is being captured ok, it's just on the display that it looks like it's being scaled somewhat.
Edit2:
Also tried getting the bitmap like this:
NSBitmapImageRep *bitmap = [scrollView bitmapImageRepForCachingDisplayInRect:[scrollView bounds]];
[scrollView cacheDisplayInRect:[scrollView bounds] toBitmapImageRep:bitmap];
NSImage * image = [[NSImage alloc] initWithSize:[bitmap size]];
[image addRepresentation: bitmap];
Same results - the bitmap looks exactly the same, bad and scaled when displayed.
This leads me to believe that capturing the bitmap data either way works fine, it's creating the view and rendering the image that is doing the scaling. How can I make sure that the view and image are shown at the correct size and scaling?
Edit3:
Ok, I started a new blank project and set this up, and it works perfectly - the new imageview is identical to the grabbed bitmap. So I suspect my issue is stemming from some rendering/compositing issue when drawing the bitmap to the view. Investigating further...
It turns out the issue stems from the scrollView that I am rendering from. This has a transparent background (Draw Background is off in IB) and the text is the scrollView looks good. If I turn "Draw Background ON", with a transparent background color, the text is rendered badly, exactly as it is when I capture the image programatically.
So, in my app, even though Draw Background is off, the scrollView image is captured as though Draw Background is on. So I need to understand why the text is rendered badly when Draw Background is on and set to transparent, and hopefully this will lead me towards a solution.
Also tried creating an NSClipview with background drawing turned off and putting the bitmap view into that, but it sill renders the same. I can't find a way to render the transparent image to the screen without horrible artifacting.
Ok, I've found a solution. Instead of getting a grab of the transparent background scrollview object itself, I'm instead getting a grab of the parent view (essentially the window background), and restricting the bounds to the size of the scrollview object.
This captures both the background, and the contents of the scrollview, and displays correctly without any issues of transparency.
I am a newbie to Cocoa, I have a few doubts regarding NSImage.
Question1:
Changing the bounds origin of an image doesn't seem to have any effect. I expected the image to be drawn from the newly set origin but that doesn't seem to the case. Am I missing something ?
code:
NSImage* carImage = [NSImage imageNamed:#"car"];
[self.imageView setImage:carImage];
//Following line has no effect:
self.imageView.bounds = CGRectMake(self.imageView.bounds.origin.x + 100, self.imageView.bounds.origin.y, self.imageView.bounds.size.width,self.imageView.bounds.size.height);
Note: imageView is an IBOutlet
Question2:
I was trying to crop an image, but it doesn't seem to be cropping the image, I can see the complete image. What is that I am missing ?
code:
NSRect sourceRect = CGRectMake(150, 25, 100, 50);
NSRect destRect = CGRectMake(0, 0, 100, 50);
NSImage* carImage = [NSImage imageNamed:#"car"];
[carImage drawInRect:destRect fromRect:sourceRect operation:NSCompositeSourceOver fraction:1.0];
[self.imageView setImage:carImage];
Thanks
Changing the bounds origin of an image doesn't seem to have any effect. …
//Following line has no effect:
self.imageView.bounds = CGRectMake(self.imageView.bounds.origin.x + 100, self.imageView.bounds.origin.y, self.imageView.bounds.size.width,self.imageView.bounds.size.height);
That's an image view, not an image.
The effect of changing the bounds of a view depends on what the view does to draw. Effectively, this means you shouldn't change the bounds of a view that isn't an instance of a view class you created, since you can't predict exactly how an NSImageView will draw its image (presumably, since it's a control, it involves its cell, but more than that, I wouldn't rely on).
More generally, it's pretty rare to change a view's bounds origin. I don't remember having ever done it, and I can't think of a reason off the top of my head to do it. Changing its bounds size will scale, not crop.
I was trying to crop an image, but it doesn't seem to be cropping the image, I can see the complete image. What is that I am missing ?
[carImage drawInRect:destRect fromRect:sourceRect operation:NSCompositeSourceOver fraction:1.0];
[self.imageView setImage:carImage];
Telling an image to draw does not change anything about the image. It will not “crop the image” such that the image will thereafter be smaller or larger. You are telling it to draw, nothing more.
Consequently, the statement after that sets the image view's image to the whole image, exactly as if you hadn't told the image to draw, because telling it to draw made no difference.
What telling an image to draw does is exactly that: It tells the image to draw. There are only two correct places to do that:
In between lockFocus and unlockFocus messages to a view or image (or after setting the current NSGraphicsContext).
Within a view's drawRect: method.
Anywhere else, you should not tell any Cocoa object to draw.
One correct way to crop an image is to create a new image of the desired/adjusted size, lock focus on it, draw the desired portion of the original image into it, and unlock focus on the new image. You will then have both the original and a cropped version.
Another correct way would be to create your own custom image view that has two properties: One owning an image to draw, and the other holding a rectangle. When told to draw, this custom view would tell the image to draw the given rectangle into the view's bounds. You would then always hold the original image and simply draw only the desired section.
I am trying unsuccessfully to get my custom retina images to display in my custom iOS5 TabBar.
I have 4 items in my TabBar, I have set the selected/unselected image to contact#2x.png which has a resolution of 160px x 75px. I figured 4 of these 160px width images would accommodate the 640px retina width nicely.
You can view my contact#2x.png here
https://lh4.googleusercontent.com/-afHulbEcxNE/TuPe-YIj91I/AAAAAAAAAII/lCojphAxF9w/s160/contact%2525402x.png
I have set all the items programtically as seen below.
UIImage *selectedContact = [UIImage imageNamed:#"contact#2x.png"];
UIImage *unselectedContact = [UIImage imageNamed:#"contact#2x.png"];
UITabBar *tabBar = self.tabBarController.tabBar;
UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
[item0 setFinishedSelectedImage:selectedContact withFinishedUnselectedImage:unselectedContact];
[item1 setFinishedSelectedImage:selectedContact withFinishedUnselectedImage:unselectedContact];
[item2 setFinishedSelectedImage:selectedContact withFinishedUnselectedImage:unselectedContact];
[item3 setFinishedSelectedImage:selectedContact withFinishedUnselectedImage:unselectedContact];
At runtime I can see that the scale is set to 1
Why isn’t the 2 being picked up off the image suffix? The tab bar is huge, and isnt scaled.
Please see the simulator screenshot below…
https://lh5.googleusercontent.com/-A5oxZprlDhU/TuPfAlG_HQI/AAAAAAAAAIc/mIwHXOPZSrE/s735/simulator.png
My other retina images for my app icon and default icon are working.
Thoughts? I am driving myself nuts ☺ Thanks in advance.
JoePasq is wrong, he obviously is not up to date with the latest iOS5 appearance customisation API. Your problem could be that you specified the #2x in the filename, just pass "contact.png" to imagedNamed...
[UIImage imageNamed:# "contact.png"]
Have you looked at the documentation for customizing the appearance of UITabBar?
You should consult this tutorial by Ray Wenderlich about using the UIAppearance APIs.
His code is this:
UIImage *tabBackground = [[UIImage imageNamed:#"tab_bg"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UITabBar appearance] setBackgroundImage:tabBackground];
[[UITabBar appearance] setSelectionIndicatorImage: [UIImage imageNamed:#"tab_select_indicator"]];`
Note that the customization happens on the Tab bar, not the tab bar items—assuming it’s the same customization for each one.
As nbransby said you do not use #2x in the filename.
Prior unedited answer:
From the documentation:
The images displayed on the tab bar are derived from this image. If this image is too large to fit on the tab bar, it is scaled to fit. The size of an tab bar image is typically 30 x 30 points. The alpha values in the source image are used to create the unselected and selected images—opaque values are ignored.
Your icons should be 30x30 px for normal resolution and 60x60 px for retina resolution. They should also be a solid color, the tab bar adds the coloring.