I'm trying to make a functionality which will show the color of like and dislike, just like we like / dislike a video on YouTube. So, green color will represent the likes and the black color will represent the dislikes, their percentage will change on the click of two buttons, i have no idea how to do it..something like this pic but without showing the percentage
Just do the simple maths first. Calculate likes/totalHits ratio and then use a image for progressbar with center area transparent where you can fill color. Put a label behing this image and just give it green color. Then adjust the width of green colored label using this ratio we calculated. :)
Create a ImageView in xib file and set the image of progress bar with transparent center area
Create a label of same size as imageView and put it behind this imageView Created with black color
Create one more label of green color and put it in between this black label and Imageview.
Now its time to code :)
in code calculate ratio = Likes/TotalHits
Now set the frame of green label as:
CGRectMake(x,y,ratio*totalWidthOfProgressBar,height)
where x and y should be the same as of progress Bar imageView and height should also be the same, you just need to set the frame again and again while user tap on likes or dislikes button.
and to display percentage value create a label over progress bar and display value = ratio*100 in that label
Related
I am looking for some general advice and maybe some example code of what I am trying to accomplish if anyone knows of any for an iOS swift project. I would like to either:
A) Make the background, of the blue view, gray and only show a certain percent of the blue area.
OR
B) Overlay the gray area on top of the blue view and just keep making gray area bigger.
What I am trying to do is simulate battery power and show a battery.
I've considered using a progress bar and doing option A, but the blue area is NOT a solid color. Its actually an image. I've tried using an image for the progress bar, but the image needs to keep its dimensions. (Ex: If progress shows 20% it needs to show only 20% of the image or "blue area", but if you use an image as the progress bar it just shrinks the image and still shows 100% of it instead of just the 20% I need to show).
You can easily write a custom self-drawing UIView that will behave in exactly the way you describe. In other words, you tell your UIView a percentage, and it redraws itself with the blue on the left and the gray on the right. You can even draw the darker gray stroke outline shown in your drawings. All easily accomplished in code.
I like being able to lay things out visually and take advantage of autolayout. Here's how I would do this (in a nib/storyboard):
Place a UIView on your canvas and give it the gray background. Give it whatever autolayout constraints are appropriate for you.
Place a UIView inside the one from #1 and give it the blue background. Anchor it's left, top, and bottom to the gray parent view and give it whatever width (doesn't matter).
Add an outlet to that width constraint you made in #2.
Now all you have to do is modify the "constant" property of that width constraint to give you the desired "progress". So if your gray view is 100 wide and you want to present "20%" progress, then just do "yourWidthConstraint.constant = 20".
I am trying to add an orange circle with a number (my number will change depending on certain circumstances) inside it in my WKInterfaceGroup like the image below.
However, it appears you can't change WKInterfaceLabel background color. The only solution I can think of is to add an image behind the label. So how can I achieve this (if it is possible)? Is there another way to make this work?
The easiest way to do this is to:
Put the Label into a Group.
Center Align and Position the layout of the Label
Set the Group to a Fixed Width and Height.
Set the Corner Radius of the Group equal to 1/2 the Width (height should be the same)
Set the Group to Background Color to the color you want.
You could add the label to a WKInterfaceGroup and set its background image property. Or, you can create pre-rendered template images and use setTintColor: to color them.
I have two UIImageView with same frame. One imageView above second imageView now I'm erasing upper imageView using Core Graphics. My problem is that the border of eraser is very sharp I want faded border i.e. after erasing the upper image should match the lower one's pallet. See below example -
I used these two images and below is result -
As you can see in this image eraser's border is very sharp. I want to make it faded out like in the middle it should be dark then light then more light and so on i.e. we cant see the width and end of brush. And here is my - My Sample Code Let me know if my question is not clear enough.
You can have a png image like brush (dark in the middle and light in the corner) and draw the image over your image like this.
[eraser drawAtPoint:location blendMode:kCGBlendModeDestinationOut alpha:1];
I am using a uipicker as an input view for a text control. I also have a toolbar set up as an accessory input view. I would like the toolbar tint to match the picker. I have tried using the magnifier tool on the color chooser to get the RGB for the picker, but when I use these RGB values to set the tint on the toolbar I get get a close, but not exact match.
Is there anyway to figure out exactly the background color of the picker? None of the palettes in the color chooser seem to have this particular shade of gray with a slight hint of blue.
Thanks,
Jenny
The border consists of a gradient for the top half and a solid color for the bottom half:
As for the 'white' background, the brightest part is a #fafafa to #5f627c gradient.
I'm designing a progress bar for an app that essentially is two UIImages - both are the exact same size (long rectangles with rounded corners), except they are colored differently.
The bottom bar is black and the progress bar that will fill over it is grey. Displaying the bottom bar is easy enough. The issue I'm trying to figure out is how to get the grey bar to display only a piece of itself.
For example....
grey : <-------
white: <------------------->
Essentially, I'd like to display only the first half of the grey bar because my progress is at 50%. I'd like to keep the rounded corners at the left of the image though.
Is it possible to dynamically crop UIImages?
The easiest way to do that is to create using 3 separated images: 2 with rounded corners (left and right), and one small easily resizable image to display progress.
And yes, you can crop images dynamically, but not as easy and as quick as need for progress bar.