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".
Related
Here's what happened: I had a pretty much finalised app. I added a feature, which is completely unrelated to the GUI (so I think), I noticed a strange behaviour of GUI elements which have already been polished and worked flawlessly. After two weeks of playing around, disabling/enabling code, recreating and altering stuff I'm out of clues on how to solve this.
Take a look at this picture:
There are two bugs which appeared simultaneously and that's why I combine them into one question.
I have a simple background view with .wantsLayer = true and .masksToBounds = true. On it I have multiple views with the same settings and a .cornerRadius to their layer. A few weeks ago this worked perfectly. Now I can see some (! not every) corner not actually being cut off but displaying (often simply black) content.
Some corners show white content (top left). Some display the content of a completely different layer (the bottom views)!
To clarify: for debugging reasons I added a simple red layered view below the white one at the top of the picture. I expect the white view to have rounded corners (red!) both at the top and and bottom. However the top one is white (with a red line) and the bottom one isn't round at all. Second, and this one is weird to me, the bottom views do not have anything set to the colour red at all! The red coloured corners come from the colour of the top view's layer! If I make the top view's background view blue instead of red, the corners of the bottom views become blue as well.
What I found out so far:
The corner thing normally happens when the parent view is not set to .maskToBounds = true. It is set in my example and also it worked before. How could I have messed this up without touching any related code or views in Interface Builder?
I failed to find anything online regarding layers showing content of other layers in portions which should not be visible...
Any help would be highly appreciated!
Note: there's a drop shadow on the bottom views which is a completely different view underneath doing nothing but dropping a shadow. I forgot to remove it for the screenshot.
I don't know the reason behind this behaviour but I found a solution.
One of the many views (with CALayers) and subviews is a NSProgressIndicator. And I assigned a Content Filter named "Hue Adjust" with the value of -0.5 to it, in order to have a different colour of the bar. Removing this Content Filter in Interface Builder solved the problem and the GUI looks again like it should:
I would still be interested to know why this happens and how I can keep my tinted progress bar without losing the corners...
I updated this with an image of what I am trying to achieve, its a blur on a image which adds a touch of shading and even white on white is visible. I am basically working on putting buttons of various kinds on top of images and welcome's any and all assistance on best practices. I know facebook does this in some way as an app example.
To summarize what I am trying to achieve. I have an image that takes up the full screen and I would like to place a button on top of that image that does something like blur around it with padding so that it looks clean on top of the image. My button is a heart png, red outline with clear inside, and is represented as a square because of the irregular shape. I would like the heart to be on top of a circle that does something like blur the image so it can always be seen.
I found a number of similar solutions to this problem using UIBlurEffect but nothing that specifically addresses the "square image" and how I would control making the blur circle larger/smaller in terms of the padding around the square. I tinkered with creating a UIView that was transparent, placing a circle with a blur into there and then adding the button with their centers aligned but this seems like an incorrect approach and wasn't quite working. I suspect that for people with expertise this is something where I just need to have the correct usage of the UIBlurEffect.
I would like to change the color behind the flip from white to a different color or picture. Is that possible?
Change the background colour of the UIWindow in MainWindow.nib. Either "black" or "clear" should both work (I think...)
It's one of the first things I do to any app, otherwise you get bits of white showing on a view rotation (in the very old days of 2.x there were huge patches of white; they've since masked off the screen edges during a rotation, but a few pixels still show through) and when you show/hide the status bar (e.g. for UIImagePicker) and stuff. Black looks a lot better than white for the window background.
First, I'm not talking about icon libraries or mockup tools/libraries.
I'm familiar with various icon libraries that people have created, but other than the stuff from the example code like UICatalog, I'm wondering if anyone knows of anyone who has created free libraries of custom button bitmaps (stretchable button images), slider handle/track bitmaps, etc Basically bitmaps to customize the look of standard controls for those controls (like buttons and sliders) that allow you to specify such bitmaps.
I'm also interested in any photoshop tutorials/templates on/for creating stretchable custom button images, bitmaps for slider parts, etc. (Afraid I'm not a huge PS god or anything.)
Anyone know of any resources like this for fancying up the standard controls?
I've been able to find several stretchable buttons by searching through my collections of sample code for: "stretchableImageWithLeftCapWidth"
From the Apple sample code, the UICatalog, BubbleLevel, iPhoneMultichannelMixerTest, avTouch, AQOffilineRenderTest, and TouchCells sample code all contain buttons with stretchable images.
Hope this helps!
Stretchable buttons is no problem - there's nothing special you need to do in Photoshop. Just make the image of the button stretchable and set the radius to that of any rounded corners you have on the button graphic.
Slider parts - I'm pretty sure you'd have to make your own UIControl from scratch.
To make a button in Photoshop, create a new file with transparent background, select the Shape tool, rectangle near the bottom of the tools, drag out a rectangle. Size doesn't matter™. For a rounded rectangle, click and hold the same tool, choose the rounded rect shape and set a corner radies (same radius as in stretchableImage later).
Double-click the layer right of the layer name to get the layer style popup. Check Color Overlay and set the color you want. Check Inner Bevel and make its size somewhere below half the height of the rectangle - I think 90 degrees for the Global Angle works well. A lower opacity and larger size makes the bevel look less chunky.
Ctrl-click (option-click) the graphics rectangle in your layer to select the button's outline. Deselect the bottom half of it by using the marquee tool (M) at the top of the tools. Select a light gray foreground color, nearly white. Create a new layer with the square icon under the layer list (Windows->Layers if not visible). Fill the selection of the new layer with the paint bucket, and drag down opacity for the layer until the 'matte laquer' effect of it looks right.
A simple button, but that's the gist of it.
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.