iOS - UILabel editing, overlaying an image? - iphone

As you can probably tell from my last few questions, I am working on a screen that allows users to edit labels. Pages and all the other lovely apps have glorious resizing handles to show what label is currently being edited.
I am trying to get some feedback on the best way to do this. Is it possible to add an 'dot' image to the centre of all the edges of the label? Is it possible to change the background colour only in sections of a label?
Or should I add an image on top of the label and disable it? The most important feature is for only the uilabel to respond to touches. If I overlay an image, I want it to ignore the touch and hand it off to the label.
Any feedback appreciated!
Cheers Guys!

You will find as many opinions on this as there are programmers. There is not built-in decoration for a view that shows the dot in the middle of each side. But you can add that easily enough. One way is instantiate four instances of an image with the dot and add them as subviews of the view you are decorating. you can then set the center of each dot on the center of each edge in the parent view. As long as clipping is turned off in the parent view, these will show up (if they are not hidden) even if they extend outside the frame of the parent view.
I don't understand what you want to accomplish by changing the background color in sections of the label view, but I this probably has some moderate complexity to it.
You can also to this with core graphics. I'll stop there, though. There are literally many ways to do what you are trying to do.

Related

Create a UIScrollView that can be embedded into another view

I'm trying to build a custom, reusable UIScrollView that can be added to multiple views. The scroll view is going to be a weight picker. For the life of me, I can't find a decent example for how to implement this neatly or cleanly.
I would love for someone to point me to an existing library or tutorial that shows me how to do this. I've hacked apart a few examples, but so far, nothing is very good or reusable. Please help!!
For what it's worth, I have an image that individual ticks for the weight. So I can select to the tenth of the number (e.g. 160.4). The image has the first tick bold and larger than the remaining 9. I'd like to have the weight/number centered over the large tick. I'll update the points to my label/datasource after scrolling stops.
UPDATE
I need to make this. I have the custom font, background, and ticker image.
I would not do this through an UIScrollView. I think it would be more complex and you would certainly end up having issues when trying to add you custom picker into another scroll view.
What I would do is:
building the picker view by means of a series of CALayers, each one representing a "building block" of your picker view; see attached image:
each building block would represent a specific value by mixing a UILabel (the text) and an image;
use a pan gesture recognizer, or alternatively define touchesBegin/Moved/Ended method to deal with panning;
when a pan is done, you displace the view content to the left or right according to the panning;
when panning, you also add new building blocks to the left or right end of the picker to account for empty areas that would be revealed by the displacement done at point 4.
I think that having a look at another kind of custom control source code would be of great help to you. You would not possibly find your custom picker already implemented, but could get some guidance. Have a look then at cocoa controls.
Hope this helps.
If I were going to implement this, I would create a really wide image that had every weight on it I'd ever need - I would probably create this in code when the app started up. This image is then used as the contentView of your picker. You get all the scrolling features "for free", and you could even update the values shown in the other parts of the view during scrolling (or dragging.
The scrollView is just the area with the tick marks and weight numbers, and resides in a subview above the background, but below the centered vertical line that shows the actual weight.
EDIT: on second thought, forget the image. If you have the code to draw the image, you can do the drawing in a custom UIView. So you get the draw rect, you know the contentOffset, so you can draw just what you need.

Looking to mimic the iPhone lock screen camera drag

I've been searching and searching on how apple makes the dragging motion on the lock screen to open the camera so clean. I'm trying to do a similar thing with an app where you drag from the bottom up to reveal a menu, but i cant quite get it right. Anyone know how to, or of any tutorials that show how to do this? Thanks in advance!
To follow up what's been mentioned by Hejazi I believe you can achieve this in 3 steps:
create a background rectangle with some corner radius (this is a property of CGRect).
create a top view, corresponding to the part you want to be able to slide. Attach a pan gesture to this view so you will be able to handle the animation for this view.
for the text part being highlighted I think you need another two views: I will apply a mask corresponding to the text to a view so you get some transparency only for the letters of your text and animate a white round view behind it.

how to draw a popover view instead of using image on iPhone?

just like the popover in the attached screenshots, the popover allow user to change themes.
I know that there are some examples around but they are all using images to achieve this, make it hard to change themes.
I believe the app in the screenshots doesn't using images to do it.
thanks for any help!
In my Win background such skins (called "Flat" in Delphi and WinForms) were made by drawing in code: select a color, draw a line, select another color, draw a rounded rectangle and so on.
Also, it is necessary to introduce a class "ColorTheme" with a set of fields for every color used. You may have several ColorTheme instances and swap them when you need to change color theme.

iPhone hide portion of image in UIScrollView

I am brand new to iPhone app development. I am trying to create an image reader using UIScrollView. I need to focus a portion of an image and hide the rest. Till now I am only able to focus required part of an image but have no clue how to hide the rest. I had a suggestion that, I need to add four views at top, bottom, left and right. I need to hide those as per requirement. But, I was able to go no where with the suggestion. Can you please tell me how can I implement the functionality?
I don't understand what you really want to do. But if you think putting for views above I might suggest you use mask image for the same. Use alpha component.
Atlast I was successful in hiding part of an image. I used four views with background color and resized them according to the portion I need to display.

UI Button with Image Smaller than Touchable Area

I've not much response so am adding some more info.
My buttons are not rectangular, nor organised in a grid so I need a way of creating what looks like a button (and shows that it has been pressed visually, as per a standard UIButton) but where the touchable area is different to the image area.
I am using a transparent PNG and that element works fine. I've added the buttons in Interface Builder and am wondering if that is the problem.
However, if I change imageEdgeInsets, it distorts the image display, which is obviously not what I want.
Bizarrely, if I increase the dimemsions of the button, it doesn't change the image, but if I decrease them it does.
I have tried different combinations of mode (scale to fill etc), but to no avail.
I am aware that there is an image and background image property, but in IB there is only one.
Essentially, I don't understand how the geometry works and the Apple documentation doesn't seem to help.
Surely, I can't be the only person to try to do this. Any help would be warmly welcomed.
Many thanks,
Chris.
Try setting the buttons setting to Aspect Fit. This will fill the button with your image so a smaller image than the button size would leave the space around the image.
Also set the button type to custom.
In the end, I stumbled across Ole Begemann's Non-rectangular buttons class. It just does what I need - to be able to create buttons where the touchable area follows the visible element of a non rectangular image.
#Helium3 - thanks - that allowed me to use a larger touch area, bit not a smaller one.