Pixate background-image no-repeat? - pixate

I am trying to put a background image into a text-field (it's just a search icon). And it is tiling the image in the text field. Is it possible to turn off the repeating of the image? i don't see anything like that, i'm seeing padding and position for background images but nothing to turn off the tiling of the image. is this not possible in pixate yet?
thanks!

You should be able to set background-size to the size of your text-field so it won't have anything to repeat.

I battled this same problem, and in the end, I found I got what I wanted by using multiple objects. Even if you get the search icon to work right, you're probably going to notice the UITextField doesn't pad the text away from the icon.
Anyway, here's how I ended up doing it so that I had full control over the style.
So you can put your search icon in the UIImageView and then define your text field's style (border, background color, etc.) with the UIView. The UITextField ends up being plain white/transparent, and positioned so that its text doesn't overrun the search icon.
I hope that helps.

Related

Having troubles fitting the UIImageView and Label into Scroll View

I want to fit the Image + Label into Scrollable View.
It looks like so My setup
So trouble here is that width of the picture and the label did not match the screen width.
I tried to change the UIImageView width from 400 to 300 or so, BUT those changes either wont take the effect(if above 300), OR those changes make label disappear (with width setted up on 300 or below). Observe.
Funny thing is - label actually appears when you see view hierarchy, even though it looks kinda distorted. But no label on the iOS screen for you, sir.
I also tried to set equal width and height from the superview, but this option just disabling scroll, making view strictly fit the screen (label appears to be cropped)
I want the label to be nice and scrollable, but I also want to see it on the screen. Too much to ask?
EDIT: I just tried removing Auto-layout and got the same as with auto-layout. (click "Observe" link to take a look again, exact same situation) Could somebody explain why?
This is quite a simple fix. For the image, you should use equal width & center horizontally; however, make sure you use a fixed width. For the image to look nice, play with the scale modes - I find Aspect Fit/Fill work best.
The label should also be equal width & centered horizontally. You may need to calculate the height of the label programmatically if the text isn't always going to be the same size.
So the answer to my particular question was - shortening the actual text that is passed to the label.
Apparently UIScrollView can't handle stuff with crazy abnormal heights (I was passing a huuuge text to it) So in my particular situation solution was - shorten the text. Now it works like a charm (even though I still need to play a little with constraints to get rid of the warnings and stuff)

Custom TabBarItem menu IOS 7

I'm trying to make an UITabBarController like this:
No matter the device width (whether it is rotated or not) the buttons should not be stretched and the leftover space should be on the right side.
My questions:
Is this possible with the UITabBarController?
For the whitelines inbetween the buttons I am planning to use an unclickable UITabBarItem with an image. Is this the best way to do this?
With this tutorial that I followed I am getting this result:
2 problems here ^, whilst my background.png is 320x49, the selected image (68x49) has padding. This should not happen, both pictures have the same height?
The second problem is that the button/image has trailing space, and I want it sticked to the left side, as in my first screenshot. How would I accomplish this?
I don't expect anyone to post code, just merely a push in the right direction as I'm totally lost on this.
Check this library, you can customize the UI in interface builder with consstraints and get what you want.

How to layout the UIlabel object according to design spec in iOS

I have some difficult time in creating iOS screen to match with visual design provided by design team.
The design team has provided the spacing info for each screen which shows how much space each text needs to be apart from other UI element on the screen. This is attached for your reference. You can see here that the two text labels "Activate Your Account" and "A Verification link...." are placed apart by 25px.
The same thing I am trying to achieve in the storyboard. I am attaching the storyboard screen snapshot for reference.
From this you can see that I cannot keep exactly 25px b/w the two text labels because for the following issue
The text font is custom font and I cannot load the same in storyboard. I have added the font file in the project, but when I try to open it in storyboard for UILabel, it doesn't list out. I am not sure why xcode doesn't show up. This makes me hard to resize the label's frame. If I try to decrease the empty space in the label (upper and lower part of the text), this will make label height less, but when I set the font programmatically, it doesn't fit in this small space.
When I try to increase the height of the label, the text inside the label starts displaying at the center leaving space at the top and bottom of the label frame.
So I want to know how to solve this problem. If anyone had this issues and sorted out, please let me know how to fix this.
Many Thanks
Your designers aren't speccing their designs correctly :) Show them how iOS renders text and have them spec their designs in the same way. This is what we do on the Facebook design team. I mocked up an example for you (each square is 4dp/8px).
http://i.stack.imgur.com/q4tZX.png

Shadow inside text on NSTextField/NSTextFieldCel

I've been trying for a day or two to try and get a shadow to draw inside the text of an NSTextField (and making the foreground color transparent, so all you see is a shadow inside the text). I've yet to achieve a desirable and practical result. The only success I had with this was transforming the text into an NSBezerPath, subtracting it from the frame of the NSTextFieldCell and clipping using the setClip method (addClip does not suffice in this case, it leaves the background painted). Unfortunately, converting the text to an NSBezerPath makes the edges of the text look jagged and overly straightened. Is there an efficient and decent way to achieve this using CoreGraphics masks and clipping because I am unable to achieve this.
A very similar effect of what I would be looking for is in the Xcode IDE, if you don't have a debug session open and go to the debugger navigator it says "No Debug Session" in a subclassed NSTextField that draws the text with a shadow inside it. That is pretty nearly what I am after. Any insight on where to start and how to do this would be great.
A paste bin my current code (working, but sub-optimal, & non-working): http://pastebin.com/4pTv8ZWm
Have you played around with the shadow property of NSTextField in IB? You should be able to get pretty close using a slightly offset shadow effect on the text with the right blend of alpha transparency.

Tips on implementing a custom UITextView interface on the iPhone?

I am trying to implement a control to edit text that will display the text in multiple colors. None of the solutions I have attempted yet have been good enough.
UITextView cannot accomplish this. All of the text must be the same color.
Using CoreGraphics to draw the text does not allow the text to be selected.
Using a UIWebView, DIV and PRE tags cannot be set to contentEditable on Mobile Safari.
Currently playing with using an off-screen TEXTAREA and an on-screen DIV to show the rendered text. This works pretty well, except supporting all of these at the same time seems impossible: click-to-type, click-to-move-cursor, click-and-hold-select/copy/paste.
Anyone have any tips on this predicament?
I've been trying to find any preexisting library out there that will accomplish this in a good way, to no luck. I'm open to any ideas!
Well, just pulling an idea out of my... let's say hat.
Could you put a transparent UITextfield over a view that draws the text? If the background was clear and the text color was clear the user could not perceive it but it should still respond to all commands. As the user enters and edits text you could draw the results on the view underneath.
I think the selection would work without any modification at all. When the user selected the clear text, it should create the illusion of selecting the drawn text automatically.
Like this one? StyledText http://three20.info/gfx/overview/styledtext.png It's in Three20 .
Here is an idea. I have no idea if it would work.
If you are only using colors, and not styles, the a UIWebView with colored text might layout text in exactly the same way as a UITextView. You could put a UITextView with invisible ink (text and background fully transparent) over a UIWebView and mirror the contents with colors in the html. I assume you can do scrolling with javascript along with the colored layout.