I have an image which is like a progress bar in circle. I need to show only a part of the progress bar based on the progress percentage. What I am trying to do is to put the image inside an imageview and show only a part of the image (arc section of the entire circle) based on the progress.
I have tried using UIBezierpath to create an arc shaped view and setting my progress bar image as the background image. But the image will try to fit inside the arc shaped view and looks bad.
Is there a better way to achieve the same?
Edit: Here is a sample image of what I am trying to achieve
But instead of the blue background, I need an image. So, only part of the image will be visible depending on the progress. (When its 100%, the entire image is visible)
I have spend almost half a day on this one. Any help would be appreciated.
Related
Simple I have UIImageView icon with two people and it looks like this:
but when I set tintColor to red it looks like this:
Is there any way to avoid covering every non zero-alpha pixel? I need to show the tie really there. One time I need people red, other time green.
The icon is simple png file. Rounded circle is simple background color of UIImageView. So the part of the image with tie cannot be zero-alpha.
Is there any way to achieve such effect WITHOUT creating images for every color?
This was similar to another idea I had been playing around with, so I did a little more fiddling...
Starting with these 3 images:
and then using them as .withRenderingMode(.alwaysTemplate) to give the desired colors... and then layering them via CALayer to get:
and an "exploded" view for clarity...
Create an image where the "people" are 100% transparent - effectively "holes" in the image.
Set the background color of the UIImageView to be the "fill" color.
You can still mask it with a circle (CAShapeLayer, for example), if you don't want a white bounding-box as part of the image.
Original images:
https://i.stack.imgur.com/eFrmB.png
https://i.stack.imgur.com/2GNDX.png
Use the CISpotColor filter:
https://developer.apple.com/library/content/documentation/GraphicsImaging/Reference/CoreImageFilterReference/#//apple_ref/doc/filter/ci/CISpotColor
This allows you to specify a color in your image that is to be changed into another color. Thus, since you know the original color of the tie and the background, you can change either of them, or both, in a single move.
I have a view like this :
The left back button & the right button is basically two white image (set in UIButton) with a particular opacity. Now it's look more or less visible on this background cover photo.
But if I change the background cover photo with something else, where the opacity & color of that cover image is closer to the two button's image, then it's difficult to see those two button.
Like this:
So I just wondering, Is there any way, so that I can detect the color of my cover image and I can change those two buttons image or color according to it?
Any kind of reference or guidance would be very much appreciable.
I think you can use this function to determinate how light/dark is the background. Calculate an average of several pixel under your button.
Have fun! :D
I'm trying to make a ViewController that presents info from a webpage like this:
However, I'm confused on one thing. How did they get the imageView to display an image that's cut off at the corner, i.e. not rectangular? Do you think they created that player card in Photoshop and used it as the background for the imageView image, or did they create it programmatically?
I wonder because the image is behind the picture of the bear, so I imagine if they created the background in Photoshop, how would they get the image behind the bear head? They can't have just created the card with the player's picture as part of it, then loaded the whole image because if they traded the player, because I'm sure they pull the player info and picture from the web so they can have a card for all players, even if they trade or acquire a new player mid-season, without having to update the app (and add the finished image to images.xcassets).
This can be composed from two CALayers at runtime. Put the picture on the bottom layer; the picture can come from anywhere - the web, the bundle, etc. the image source could be dynamic.
Put another CALayer on top, with the frame rendered with opaque colors, and a transparent cut-out for the picture in the middle:
There are a bunch of ways to do this. A simple and flexible way to do it is to create a CAShapeLayer that's the same size as the image view, with it's origin at 0,0, and add it as the UIImageView's layer's mask.
You'd create a filled UIBezierPath that maps out the part of the image you want to show, and install the bezier path's CGPath into the mask layer's path property.
The result would be that the image view is cropped so that only the part inside the shape is drawn.
I have 2 UIImage's one on top of another and the top one slides and reveals the coloured one. The issue is that I want the indicator (purple line, which is a view) to indicate in the left side only by the end of the image (image`s background is clear).
What I want is to resize that purple line so it wold be visible in the left side and on the image but not on the right side, as it is now.
Any ideas of what I can try ? I have no idea where to start, thank you!
What I did so far:
what I want:
It is possible to implement programmatically using CGImageCreateWithMask, but it is very hard. Also such solution will be not very fast, if you want to do it in real time.
I offer next solution: create 3-d image, as shown below. That picture must be a white mask, which will limit your line. Place that picture above pic 1 and 2. Pink line should also be placed below that picture.
Sorry, if I wrote something unclear.
Thanks kelin, the idea that you gave me was interesting, but I did not had time for that, so I found another way of doing this. I used a third image for the mask witch is an image with the lady`s shape cut off and a white background but only in the right side of the picture (the left half side image and lady shape is transparent), and the line crosses on top of the pictures shown previously and under the image I added with mask...
Simple and efficient, and it uses way less memory for a real time displaying with an animation .
Im a little bit lost on how to go about this, im really looking for the theory behind it im not 100% sure if the title is correct or not.
Im currently working on a iOS app and im a little stuck with the progress indicator thats been designed ive attached a image of it below
as you can see when the user progresses through the stages of the challenge the background of this image fills up with white so if they are in stage 1 of a 5 stage challenge its filled 20% stage 2 40% etc.
the issue I have is im not 100% sure how to go about this, if I was doing this in HTML i would create the image with the green background and leave the area for the rabbit and shape transparent and then create a div behind it that would change its height.
should I be applying the same principle to iOS development or should I be building it in a more programatic and efficient way.
thanks all for your help
The solution you are talking about sounds fine. Many programmatic solutions would involve masking and would probably be less performant (masking is actually quite expensive), other programatic solutions involve stroking different vector paths but that would get complicated if you want to cut them all of a the same line.
So, translating your idea into views. Create a container UIView with a light green background, and add to it a white UIView and an UIImageView (in that order to get the image on top). The image view would have the green image with transparency set as its image. The white view would start of being positioned below the light green view (have a frame with a higher y value) and as the stages progress you simply shift the white view upward by modifying it's center or frame properties. (note that y increases downwards).
This may be a childish way
Make an UIImageView and add that in your view where you place your rabbit view.
Make the width and x axis value as same of your rabbit view and change the height and y-axis value as the stages completes.
Add the rabbit view above your imageview.
In this way you can have not only color of your progress you can even assign a image in future to show the progress of the different changes.
-(void)completedStage:(int)stage
{
CGRect frame=rabbitimage.frame;
bgimageview.frame= CGRectMake(rect.orgin.x,rect.frame.orgin.y+rect.frame.size.height-stage*0.2,rect.frame.size.width,rect.frame.size.height-0*2)
}
Hope this helps !!!