I have a grouped UITableView in my code and am trying to get the Single Line Etched style working, where it has the 1px white drop shadow at the bottom. Instead, I'm getting a sort of negative gray shadow at the top when I enable it. Neither programmatic nor IB implementation is yielding the 1 px drop shadow. Here's a link to a screenshot of what it looks like with the negative gray shadow:
TL;DR: I'd like the Single Line Etched style to give me a 1px white drop shadow instead of the 1px gray inner shadow it gives me now at the top.
Thank you!
It's been a while, but the problem here lay in the iPhone Simulator itself. As soon as I launched the app on an actual iOS device, everything worked fine and the white drop shadow was there. Regardless, thank you for the advice, BPratt–I'm sure that'll come into use for another situation.
I'm not sure that a grouped table repects the etched option, but a very quick work around is to create an image that has the exact look that you want and set the background image of the table cell to this image. Set the background image in the same method that you are setting up the rest of the data for each cell. Finally set the line style to "none" in IB.
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 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've build this view in inferred size in Xcode 6 -
Every button is in an image view. When i run the app it looks terrible.
I know a little bit about auto-layout but i can't make it look good.
Any tips?
I guess the only way to help you is to suggest you grabbing a good auto-layout tutorial. I guess this one is perfect in your case: https://www.youtube.com/watch?v=IwSTXY0awng
Hope you will get a better understanding of using auto-layout.
Nevertheless if you want some immediate tips, here are some. Remember that I can only guess how the appearance should look like on other screen, it all depends on your vision:
1)Set the trailing space and leading space to superview for the blue rectangle. Don't forget to pin it on the top as well
2) Set leading space for YT and FB buttons, the first should be pinned to the blue rectangle while the latter should be pinned to the bottom of subview.
3) Do the analogy with yellow and green one, but set the trailing space instead of leading space
4) Twitter button should be pinned to fb icon and to the bottom of subview
I am trying to add a thick shadow to a UILabel, without any blur. In photoshop I would use the "Spread" option to make the shadow look like this. It's for a comic book themed UI in an app I am developing. I cannot use images as the text is dynamic and different for each user.
Here is what I am after (on the left) and here is as far as I have gotten so far with CGShadowWithColor (on the right):
Anyone know how I can achieve this result?
A quick hack to try would be to have several black UILabels below the white one, each offset slightly.
You guys helped so much with my last question, I figured I'd give you a shot at another. I have written an app with a theme that uses a dark blue glassy background and white / gray text and labels. The textfields in my app have clearcolor backgrounds and white texts and everything shows up very well. My only concern is that when you hold down a touch in a text box to get the magnification loupe, of course the white text shows up on a white background... which you can not read. Anybody got any ideas on how to implement a usable loupe here?
Unfortunately, the only "public" way I know how to change the loupe background is by setting textField.backgroundColor
I assume that since you're setting your backgrounds as clearColor, the magnifier defaults to white background, so the only way is to set your backgroundColor as something not clear.
I'm also assuming that since you did mention that you set your backgrounds a clear, that having it not be clear is not an option. So two ways I can think up in my mind about how to get around this is:
Assuming that the magnification lopue gets its background color by calling the backgroundColor implementation (and not some other obscure private API method): override the backgroundColor method and return a solid color.
Create your own loupe (probably not feasible)
I figured out a simple work around that achieved the desired effect. I also went through the full process of making my own loupe but since there is clear documentation on making your own loupe (see kiyoshi's answer), and this other method is ridiculously simple, I decided to document it here. It is basically just faking the clear background so that the white text shows up in the loupe. The background I am using for the view looks like blue smoke on a darker blue background:
alt text http://img231.imageshack.us/img231/9835/beforestatex.jpg
I took a screenshot of the simulator with the textfield visible and a black background so it would show up better:
alt text http://img193.imageshack.us/img193/9023/blackfieldx.jpg
Then I took that screenshot and made it semi transparent in photoshop, and overlayed my original background image to find exactly where the textfield appeared on the background:
alt text http://img266.imageshack.us/img266/9493/transparencyfullscreenx.jpg
Then I copied the exact pixels that would be used as the background of the textfield into a new PNG and saved that and set it as the the background image:
alt text http://img41.imageshack.us/img41/3450/textboxback.png
forwardToField.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed:#"textboxback.png"]];
Keep in mind that the image will be repeated as a pattern within the loupe... so if you don't want to see the edges, simply make sure your textfield is larger than the loupe height and width.
Before:
alt text http://img196.imageshack.us/img196/2672/beforex.jpg
After:
alt text http://img23.imageshack.us/img23/2182/afterxd.jpg
I hope this helps somebody out there!
Actually its pretty feasible to create your own loop. Haven't tried subitting to apple yet so don't know how they feel about it.
Basic idea is override touches, use a timer to see how long the user has been touching the screen. The loupe is just a UIView that grabs as an image the view behind it and magnifies it.
Check out this article from Craftymind here
The article has you cache the entire image behind which is definitely faster, for rendering the loupe, but if you have stuff (i.e. textFields) that are constantly changing I've been able to render the loope image real-time without too much of a performance hit.