What is the best way to layout iPhone UI items? Right now I am using CGRectMake and specifying the exact x and y coordinates of every UI item (label, view, button, etc) and adding every UI item to the current view.
One problem I see with this is that if one of the items change height or width, I will have to adjust the x and y coordinates of other UI items, so maintenance will be a challenge.
Is there an alternative to doing this? in HTML/CSS, I am used to just placing items relative to each other using margins, not absolute positioning. What do you recommend I do to keep maintenance easy and stress-free?
What I have been doing is using global constants to set the height, width, xoffset and yoffsets. Eg. I know I want 2 buttons next to each other, A and B where A is 20, 20 from origin and B is 20 right of A:
Constants.m:
CGFloat buttonHeight = 50, buttonWidth = 100;
CGFloat buttonAXoffset = 20, buttonAYoffset = 0;
CGFloat buttonBXoffset = 20, buttonBYoffset = 0;
CGFloat initialXoffset = 0, initialYoffset = 20;
(And use Constants.h to declare them with extern CGFloat blah)
To draw the buttons, set CGFloat creatorCursorX = initialXoffset, creatorCursorY = initialYoffset; which will be your relative cursor.
Then, just above creating the button A, do creatorCursorX += buttonAXoffset; creatorCursorY += buttonAYOffset;, and use creatorCursorX and creatorCursorY to set its position and buttonHeight and buttonWidth
After creating button A, do creatorCursorX += buttonWidth;
So when you get to making button B, you already have a cursor which you can use to place button B relative to button A just like above. Add offset before, add size after. And this makes it easy to switch buttons (and other layout items) around.
You can edit this method to place items down the screen as well.
Btw, to start the cursor on a new line, just set creatorCursorX = initialXoffset again and add the Y distance to creatorCursorY
I'm not an expert in this area, but I've found this method to be the most efficient and make it easy to adjust later. No need to sift through code, just shuffle chunks around for order, and go to the Constants.m to change the sizes.
I don't think there is an automatic way to achieve this.
I think your only option for this is to write a method, but even this is going to be tricky to work with, you'll need to determine the affected element and know which elements to reposition (see below for an extremely trivial example).
-(void)adjustUIElements:(CGSize)newSize{
//for example
button1.frame = CGRectMake(
(button1.frame.origin.x + newSize.width),
(button1.frame.origin.y + newSize.height),
button1.frame.size.width,
button1.frame.size.height);
//etc.
}
The great thing about this example is that you can run it any time there's a size change. It'll take a little while to get right but then you can reuse it in any function you see fit.
No. As for as I know, Relative Layout is not possible in iOS. You can use Interface builder to design the UI, which will be easier to position the UI elements.
You can also consider using the autoResizingMask property of UIView. Which is,
An integer bit mask that determines how the receiver resizes itself when its superview’s bounds change.
I couldn't find anything on the public-facing Apple site about it, but I read on one of the rumor sites that Apple will be introducing a new layout system in Lion called Cocoa Autolayout. Unfortunately, it won't be available for the next iOS release.
I don't want to link to any specific documents, but a search for "Cocoa Autolayout" on your favorite search engine will give you some general information how autolayout works.
If you're a registered iOS developer you should have access to one of the WWDC sessions on the topic.
Related
I have a dropdown list on a filter panel which needs to stretch dynamically to fit the content as shown:
I have tried several content size fitters but cannot find anything, If possible I would like to set a max width it can expand to then truncate everything longer than that, I would also like it to expand only to the right with a right pivot point. I have found a similar example here: https://forum.unity3d.com/threads/resize-standard-dropdown-to-fit-content-width.400502/
Thanks!
Well. Lets start with the code from that Unity forum thread.
var widest = 0f;
foreach (var item in _inputMines.GetComponentsInChildren<Text>()) {
widest = Mathf.Max(item.preferredWidth, widest);
}
_inputMines.GetComponent<LayoutElement>().preferredWidth = widest + 40;
We want to have a max-width allowed, so any content longer than this will be truncated. So let's add that variable:
var maxWidth = 250f;
//or whatever value; you may wish this to be a property so you can edit it in the inspector
var widest = 0f;
foreach (var item in _inputMines.GetComponentsInChildren<Text>()) {
Now we use the smaller of the two width values. Then apply it to the content layout:
}
widest = Mathf.Min(maxWidth, widest);
_inputMines.GetComponent<LayoutElement>().preferredWidth = widest + 40;
The +40 should be retained because that deals with the scrollbar. Your maxWidth value should be chosen to account for this.
Finally we want the longer items to get cut off nicely.
Give each dropdown item a Rect Mask 2D component (Component -> UI -> Rect Mask 2D). The template object exists in the scene hierarchy before the game is run, just disabled. You can just add the component to the parent transform, the one with the image (so the text is clipped).
You'll need to make sure that the mask covers the same width as the image graphic and expands along with it, possibly slightly shorter on the X direction so the text gets cut off before the image border is drawn. This should happen automatically, but you will need to check and possibly make some alterations to the template object. Alternatively you can use an Image Mask, but you'll have to play with that one yourself, but it will allow for non-rectangular clipping.
That's it!
I have several UISegmentedControls in different view controllers. On the iPad, when the device changes orientation I realign the segments inside these so they line up with the UITableViews underneath. The problem I'm seeing is that although the resizing mask is set for the UISegmentedControl and without any of my code, it resizes to fill the right width, once I try to change the width of the segments within, the segmented will either not stretch all the way to the end, or they'll be too big and go over.
This only seems to happen when the controls are in a split view.
- (void)orientationChanged:(NSNotification *)notification {
[self setHeaderWidths];
}
-(void)setHeaderWidths{
int totalWidth = self.segSorter.bounds.size.width;
int areaWidth = 100,
priceWidth = 100;
int padding = 35;
[self.segSorter setWidth:totalWidth -padding- areaWidth-priceWidth forSegmentAtIndex:0];
[self.segSorter setWidth:areaWidth forSegmentAtIndex:1];
[self.segSorter setWidth:priceWidth forSegmentAtIndex:2];
}
Initially I thought it might be caused by the animation, but even adding a delay so the rotation animation has totally finished has no effect in the width. Are controls within a splitview given a false width or something?
One option you might consider is simply re-creating the control or removing then re-adding the segments.
Without knowing what's going on inside the control, as you change the widths, what if the first one you're resizing (say increasing width) would cause the sum of the widths to exceed the bounds? Without knowing how that logic is working inside, when I've run across things like this that seem like a fight for a simple change, it's easier to roll a method that just recreates the control as you need it (or removes and re-adds the elements) in the specified sizes.
I subclass UISlider in order to make the thumb smaller, and I want to override minimumValueImageRectForBounds and maximumValueImageRectForBounds to make their width 2px less. So my code is
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds
{
CGRect stdRect = [super minimumValueImageRectForBounds:bounds];
return CGRectMake(stdRect.origin.x + 2, stdRect.origin.y, stdRect.size.width - 2, stdRect.size.height);
}
The point is that stdRect is empty rectangle (0, 0, 0, 0).
Morover, if I explicitly set some rectangle like that
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds
{
return CGRectMake(2, 0, 40, 8);
}
It doesn't affect minimum value image position at all.
Any ideas?
Haha, I just figured it out. I wasn't reading closely enough.
Setting the minimumValueImage is not the same as calling setMinimumTrackImage:forState:. The minimumValueImage is an image that gets displayed to the left of the slider and is independent what's going on in the slider. Overriding minimumValueImageRectForBounds changes the dimensions of this image (the default size being 0pt wide) and the sliders frame is made less wide and shifted to the right as a result. As I understand it, there isn't a way to modify the rectangle of the minimumTrackImage (such as to make it extend to the right of the thumb image); it is only possible to change the image.
I haven't really figured out the point of allowing you to set the minimumValueImage. It seems like you could accomplish the same thing by changing the size of the slider and adding separate UIImageViews to the side of the slider. Who knows.
Note that everything I've said here applies in the same way for the maximumValueImage and setMaximumTrackImage:forState methods.
DO NOT DO THIS. This is an old, incorrect answer, by past me. I hate that guy.
--
As a general rule, you probably don't want to subclass the Apple standard UI controls. You might want to build it up and set those properties yourself instead (not sure if they are settable, but seems like they should be).
I am looking for an efficient way to handle the image/frame detection from touch methods. Let's say i am building a keyboard or similar to this. I have 'n' number of images placed on the UI. When someone touches an alphabet (which is an image), i can do the following to detect the corresponding letter
1) CGRectIntersectsRect(..,..) : if i use this, then i need to check each & every letter to find out what letter exists at that touch point (let's say 100,100). This becomes O(n). If i move my finger accross the screen, then i will get m points & all corresponding image detection becomes O(n*m) which is not good.
2) Other way is building a hash for each & every x,y position so that the look up will be simply O(1). But again this will be a memory constraint as i need to store 300*300 ( assuming i am using 300*300 screen size). if i reshuffle my letters, then everything needs to calculated again. So this is not good
In other words, i need some thing like , given a point (x,y), i need some way of finding which rectangle is covering that point efficiently.
Sorry for long post & any help would be grateful.
Thanks
If there are in a regular grid, then integer division by the grid size. Assuming you've a small, fixed screen size, a bucket array gives as similar gain ( a 2D grid, where each entry is a list of the rectangles which intersect that part of the grid ) is very fast if tuned correctly so the lists only have a few members. For unbounded or large spaces, KD trees can be used.
It's useful to have the rects you want as final targets set up as subviews as a larger UIView (or subclass) where you expect all these related hits to occur. For example, if you're building your own keyboard, you could add a bunch of UIButton objects as subviews and hit test those.
So, the easy and traditional way of hit testing a bunch of subviews is to simply have code triggered by someone hitting those buttons. For example, you could add the subviews as UIControl objects (which is a subclass of UIView that adds some useful methods for catching user touch events), and call addTarget:action:forControlEvents: to specify some method to be triggered when the user does something in the rect of that UIControl. For example, you can catch things like UIControlEventTouchDown or UIControlEventTouchDragEnter. You can read the complete list in the UIControl class reference.
Now, it sounds like you might be going for something even more customized. If you really want to start with a random (x,y) coordinate and know which rect it's in, you can also use the hitTest:withEvent: method of UIView. This method takes a point in a view, and finds the most detailed (lowest in the hierarchy) subview which contains that point.
If you want to use these subviews purely for hit testing and not for displaying, then you can set their background color to [UIColor clearColor], but don't hide them (i.e. set the hidden property to YES), disable user interaction with them (via the userInteractionEnabled BOOL property), or set the alpha below 0.1, since any of those things will cause the hitTest:withEvent: method to skip over that subview. But you can still use an invisible subview with this method call, as long as it meets these criteria.
Look at UIView's tag property. If your images are in UIViews or subviews of UIView, then you can set each tag and use the tag to look up in an array.
If not, then you can improve the speed by dividing your array of rectangles into sets that fit into larger rectangles. Test the outer rectangles first, then the inner rectangles. 25 rectangles would need only 10 tests worst case as 5 sets of 5.
Thanks Pete Kirkham & Tyler for your answers which are really helpful. Lets say i dont wanna use buttons as i am mainly displaying images as a small rectangles. To check for the rect # (x,y) , i can trigger that easily by making my grid as a square & finding
gridcolumn = Math.floor(pos.x / cellwidth); gridrow = Math.floor(pos.y / cellheight);
But my problem is with touchesMoved. Lets say i started # grid-1 & dragged till grid-9 (in a 3*3 matrix), in this case, i am assuming i will get 100-300 (x,y) positions, so everytime i need to run above formula to determine corresponding grid. This results in 300 calculations which might effect the performance.
So when i display an image as a rect, can i associate some id for that image? so that i can simply just save the ids in a list (from grid-1 to grid-9) so that i can avoid the above calculation.
Thanks for your help
I have some buttons in an UIView. My problem is, that they get cut
off at the right side of the UIView. How do I prevent this?
alt text http://img.skitch.com/20090629-mj32p1bkff476256pwrpt69n2d.png
I've checked already Interface Builders clip property, but it's no
solution for this problem.
Regards
It seems like either you made these buttons programmatically, or you reiszed the initial IB view window to be larger and expected it to shrink down to the fit the screen.
The buttons in question cannot fit on the screen as they are - what effect are you looking for?
If you want the buttons all to fit you could set the text size to be smaller, and then they could fit.
If you want the buttons the size they are then you'll have to make another row, or put the buttons into a side scrolling container.
I have been using java and only recently began learning Apple's Obj-C framework.
An alternative to scrolling and row-breaking is using a "grid" layout with 1 row and n columns, where n is the number of buttons. Each cell has a fixed size. And you will have to resize your buttons (the subviews) in your superview's setNeedsLayout: method to whatever width you need such that all buttons fit the row.
See java's GridLayout class.
Kendall, thanks for your answer.
Here is my solution:
if(previousFrame.origin.x + theStringSize.width > 220){
roundedButton.frame = CGRectMake(15, previousFrame.origin.y + 30 , theStringSize.width + 8, theStringSize.height);
[myContainer insertSubview:roundedButton belowSubview:[tagsContainer.subviews lastObject]];
}else {
roundedButton.frame = CGRectMake(previousFrame.origin.x + previousFrame.size.width + 5, previousFrame.origin.y, theStringSize.width + 5, theStringSize.height);
[myContainer insertSubview:roundedButton belowSubview:[tagsContainer.subviews lastObject]];
}
I calculate, how many pixel I've moved from the left side. At some threshold (in my case 220) I start a new line.