I have a bunch of 'rowviews' that I want to put in a vertical scroll view. I have created this rowView view as a separate nib in IB. They are sized at 1024/200 (ipad). Now I want to put them one by one in my parent UIScrollView. I tried a simple [vScroll addSubview:rowView] but this puts them overtop of eachother (I made the rowview transparent to check this). So then I started fooling with the bounds of each rowview to no avail. This is my code. Note 'self.yExtentSoFar' is initialised to 0. Imagine the code below called for each row:
MyRowView *rowView = [[MyRowView alloc] init];
float calculatedWidth = 0;
// minus nav bar
float calculatedHeight = 0;
[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
UIInterfaceOrientation orientation = [UIDevice currentDevice].orientation;
if (orientation == UIInterfaceOrientationPortrait){
// iPad
calculatedWidth = 768.0;
calculatedHeight = 960.0;
}else{
// iPad
calculatedWidth = 1024.0;
calculatedHeight = 704.0;
}
[self.vScroll addSubview: rowView.view];
[rowView.view setBounds:CGRectMake(0, self.yExtentSoFar, calculatedWidth,200)];
[self.vScroll setContentSize:CGSizeMake(calculatedWidth, yExtentSoFar+200)];
self.yExtentSoFar += 200;
So before I tried settings bounds the rowviews appeared overtop of each other. Understandable I guess. When I set the bounds, the 2nd row view hasn't appeared under the 1st as expected, instead I have to pull down the vScroll and the 2nd has appeared ABOVE the first off screen!
Could someone point to where I'm going wrong? Thanks a lot,
Mike
You want to layout your subviews by setting their frame.
Specifically you're confusing the reference co-ordinates.. bounds refers to how much of that view to show. Whereas the frame is where (& what size) should the view be placed in it's superview.
See "The Relationship of the Frame, Bounds, and Center" View Programming Guide for iPhone
You're doing it wrong ;-) What you have explained here is more or less a re-implementation of what you get using a UITableView. Use a UITableView and a custom table view cell. It will make your life much easier.
Related
I am trying to adjust the size of a background static UIImageView (from Nib file) for iPhone5 users. Unfortunately, the following code does not seem to make any difference on the background view's size.
Does anyone know why? Thanks in advance for any help you can provide.
ViewController.m:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
AppDelegate *appDelegate = [[UIApplication sharedApplication] delegate];
device = appDelegate.deviceType;
NSLog(#"The device platform is: %#", device);
if ([[device substringToIndex:8] caseInsensitiveCompare: #"iPhone 5"] == NSOrderedSame) {
[background sizeThatFits:CGSizeMake(320, 504)];
}
else {
[background sizeThatFits:CGSizeMake(320, 416)];
}
...
//Note: 'background' is declared in `ViewController.h` as, `IBOutlet` `UIImageView` *background, and is linked to the image view in ViewController_iPhone.xib
A few thoughts:
As demosten and shabzco suggested, I wouldn't use a device name/description to determine coordinates (if nothing else, what about the iPhone 6, etc.);
If you're going to set the frame programmatically, I would suggest setting the background.frame property based upon the view controller's view's bounds rather than hard coding the size of the image view. That way, the background is adjusted to the appropriate size of the view controller's view, not only regardless of device, but also regardless if that view controller is, at a later date, embedded as a child view controller of another container controller, etc. (E.g., what if you put your view in a navigation controller and tab bar controller, your own custom container controller, etc.). Also, don't make assumptions about the size of the status bar or other graphical elements. Let iOS figure all of this out for you with simply:
background.frame = self.view.bounds;
Or better yet, if you've added the background image view to the NIB itself, set the autosizing mask and don't change the frame programmatically at all. If you have autolayout turned off, just set the autosizing properties of your image view like so:
Bottom line, if you can, avoid explicit device name references in your code and avoid hard coded coordinates. To have hardcoded dimensions in your code will just make your app more fragile, susceptible to problems with new devices, new versions of iOS, embedding your view controller in additional container controllers, etc., and limits the reuse opportunities for your code.
Here's a better way to check between iPhone 5 and previous sized devices
if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
CGSize result = [[UIScreen mainScreen] bounds].size;
if(result.height == 480)
{
[background sizeThatFits:CGSizeMake(320, 416)];
}
if(result.height == 568)
{
[background sizeThatFits:CGSizeMake(320, 504)];
}
}
sizeThatFits does not change size. You should modify background.frame. Something like:
background.frame = CGRectMake(background.frame.origin.x, background.frame.origin.y, 320, 416);
and
background.frame = CGRectMake(background.frame.origin.x, background.frame.origin.y, 320, 504);
Also make sure your UIImageView does not have flexible width or height in Size inspector tab while editing your Nib file.
This should be a pretty common thing to do, but I haven't been able to get it to work exactly right.
I have rectangular content. It normally fits in 320x361: portrait mode minus status bar minus ad minus tab bar.
I have put that content in a UIScrollView and enabled zooming. I also want interface rotation to work. The content will always be a tall rectangle, but when zoomed users might want to see more width at a time and less height.
What do I need to do in Interface Builder and code to get this done? How should I set my autoresizing on the different views? How do I set my contentSize and contentInsets?
I have tried a ton of different ways and nothing works exactly right. In various of my solutions, I've had problems with after some combination of zooming, interface rotation, and maybe scrolling, it's no longer possible to scroll to the entire content on the screen. Before you can see the edge of the content, the scroll view springs you back.
The way I'm doing it now is about 80% right. That is, out of 10 things it should do, it does 8 of them. The two things it does wrong are:
When zoomed in portrait mode, you can scroll past the edge of the content, and see a black background. That's not too much to complain about. At least you can see all the content. In landscape mode, zoomed or not, seeing the black background past the edge is normal, since the content doesn't have enough width to fill the screen at 1:1 zoom level (the minimum).
I am still getting content stuck off the edge when it runs on a test device running iOS 3.0, but it works on mine running 4.x. -- Actually that was with the previous solution. My tester hasn't tried the latest solution.
Here is the solution I'm currently using. To summarize, I have made the scroll view as wide and tall as it needs to be for either orientation, since I've found resizing it either manually or automatically adds complexity and is fragile.
View hierarchy:
view
scrollView
scrollableArea
content
ad
view is 320x411 and has all the autoresizing options on, so conforms to screen shape
scrollView is 480 x 361, starts at origin -80,0, and locks to top only and disables stretching
scrollableArea is 480 x 361 and locks to left and top. Since scrollView disables stretching, the autoresizing masks for its subviews don't matter, but I tell you anyway.
content is 320x361, starts at origin 80,0, and locks to top
I am setting scrollView.contentSize to 480x361.
shouldAutorotateToInterfaceOrientation supports all orientations except portrait upside down.
In didRotateFromInterfaceOrientation, I am setting a bottom content inset of 160 if the orientation is landscape, resetting to 0 if not. I am setting left and right indicator insets of 80 each if the orientation is portrait, resetting if not.
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 2.0
viewForZoomingInScrollView returns scrollableArea
// in IB it would be all options activated
scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
scrollView.contentSize = content.frame.size; // or bounds, try both
what do you mean with scrollableArea?
your minZoomScale is set to 1.0 thats fine for portrait mode but not for landscape. Because in landscape your height is smaller than in portrait you need to have a value smaller than 1.0. For me I use this implementation and call it every time, the frame of the scrollView did change:
- (void)setMaxMinZoomScalesForCurrentBounds {
CGSize boundsSize = self.bounds.size; // self is a UIScrollView here
CGSize contentSize = content.bounds.size;
CGFloat xScale = boundsSize.width / contentSize.width;
CGFloat yScale = boundsSize.height / contentSize.height;
CGFloat minScale = MIN(xScale, yScale);
if (self.zoomScale < minScale) {
[self setZoomScale:minScale animated:NO];
}
if (minScale<self.maximumZoomScale) self.minimumZoomScale = minScale;
//[self setZoomScale:minScale animated:YES];
}
- (void)setFrame:(CGRect)rect { // again, this class is a UIScrollView
[super setFrame:rect];
[self setMaxMinZoomScalesForCurrentBounds];
}
I don't think I understood the entire problem from your post, but here's an answer for what I did understand.
As far as I know (and worked with UIScrollView), the content inside a UIScrollView is not automatically autoresized along with the UIScrollView.
Consider the UIScrollView as a window/portal to another universe where your content is. When autoresizing the UIScrollView, you are only changing the shape/size of the viewing window... not the size of the content in the other universe.
However, if needed you can intercept the rotation event and manually change your content too (with animation so that it looks good).
For a correct autoresize, you should change the contentSize for the scrollView (so that it knows the size of your universe) but also change the size of UIView. I think this is why you were able to scroll and get that black content. Maybe you just updated the contentSize, but now the actuall content views.
Personally, I haven't encountered any case that required to resize the content along with the UIScrollView, but I hope this will get you started in the right direction.
If I understand correctly is that you want a scrollview with an image on it. It needs to be fullscreen to start with and you need to be able to zoom in. On top of that you want it to be able to rotate according to orientation.
Well I've been prototyping with this in the past and if all of the above is correct the following code should work for you.
I left a bit of a white area for the bars/custombars.
- (void)viewDidLoad
{
[super viewDidLoad];
//first inits and allocs
scrollView2 = [[UIScrollView alloc] initWithFrame:self.view.frame];
imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"someImageName"]];
[scrollView2 addSubview:imageView];
[self drawContent]; //refreshing the content
[self.view addSubview:scrollView2];
}
-(void)drawContent
{
//this refreshes the screen to the right sizes and zoomscales.
[scrollView2 setBackgroundColor:[UIColor blackColor]];
[scrollView2 setCanCancelContentTouches:NO];
scrollView2.clipsToBounds = YES;
[scrollView2 setDelegate:self];
scrollView2.indicatorStyle = UIScrollViewIndicatorStyleWhite;
[scrollView2 setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)];
[scrollView2 setScrollEnabled:YES];
float minZoomScale;
float zoomHeight = imageView.frame.size.height / scrollView2.frame.size.height;
float zoomWidth = imageView.frame.size.width / scrollView2.frame.size.width;
if(zoomWidth > zoomHeight)
{
minZoomScale = 1.0 / zoomWidth;
}
else
{
minZoomScale = 1.0 / zoomHeight;
}
[scrollView2 setMinimumZoomScale:minZoomScale];
[scrollView2 setMaximumZoomScale:7.5];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
if (interfaceOrientation == UIInterfaceOrientationPortrait || interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown) {
// Portrait
//the 88pxls is the white area that is left for the navbar etc.
self.scrollView2.frame = CGRectMake(0, 88, [UIScreen mainScreen].bounds.size.width, self.view.frame.size.height - 88);
[self drawContent];
}
else {
// Landscape
//the 88pxls is the white area that is left for the navbar etc.
self.scrollView2.frame = CGRectMake(0, 88, [UIScreen mainScreen].bounds.size.height, self.view.frame.size.width);
[self drawContent];
}
return YES;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
I hope this will fix your troubles. If not leave a comment.
When you want to put a content (a UIView instance, let's call it theViewInstance ) in a UIScrollView and then scroll / zoom on theViewInstance , the way to do it is :
theViewInstance should be added as the subview of the UIScrollView
set a delegate to the UIScrollView instance and implement the selector to return the view that should be used for zooming / scrolling:
-(UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return theViewInstance;
}
Set the contentSize of the UIScrollView to the frame of the theViewInstance by default:
scrollView.contentSize=theViewInstance.frame.size;
(Additionally, the accepted zoom levels can be set in the UIScrollView :)
scrollView.minimumZoomScale=1.0;
scrollView.maximumZoomScale=3.0;
This is the way a pinch to zoom is achieved on a UIImage : a UIImageView is added to a UIScrollView and in the UIScrollViewDelegate implementation, the UIImageView is returned (as described here for instance).
For the rotation support, this is done in the UIViewController whose UIView contains the UIScrollView we just talked about.
I want to add a subview in the top of my view, I have to recalculate the origin y value for all of other views and re-position them to leave space for the new added view.
It is very boring, as I know android have relativelayout or linearlayout can help automatically do that.
How to solve this problem easily in ios development?
I've created a library to solve just this problem: CSLinearLayoutView
You use it like this:
// create the linear layout view
CSLinearLayoutView *linearLayoutView = [[[CSLinearLayoutView alloc] initWithFrame:self.view.bounds] autorelease];
linearLayoutView.orientation = CSLinearLayoutViewOrientationVertical;
[self.view addSubview:linearLayoutView];
// create a layout item for the view you want to display and add it to the layout view
CSLinearLayoutItem *item = [CSLinearLayoutItem layoutItemForView:someView];
item.padding = CSLinearLayoutMakePadding(5.0, 10.0, 5.0, 10.0);
item.horizontalAlignment = CSLinearLayoutItemHorizontalAlignmentCenter;
item.fillMode = CSLinearLayoutItemFillModeNormal;
[linearLayoutView addItem:item];
// add more items
I've been trying to do a relative (linear) layout for a while and finally decided to just subclass UIScrollView to get it done.
I started out just replacing layoutSubviews with a simple loop through the subviews that reset the origins while keeping a running Y. But, some unexpected things are added to the scrollview, including UIInlineAutoCorrect views from textfields/views, which means these things were being mangled by the layout. So I added a little bit of logic that uses the tag property of a UIView to determine if I should lay it out:
-(void) layoutSubviews{
CGFloat runningY = 0.0f;
CGFloat widestWidth = 0.0f;
for (UIView *view in self.subviews) {
if (view.tag != 1999) {
continue;
}
view.origin = CGPointMake(view.origin.x, runningY);
runningY += view.height;
if ([view autoresizingMask] == UIViewAutoresizingFlexibleWidth) {
view.width = self.width;
}
if (view.width > widestWidth) {
widestWidth = view.width;
}
}
[self setContentSize:CGSizeMake(widestWidth, runningY)];
}
If you would still like to use unique tags for your views, you should just specify a range of tags that will be included in the layout instead of a single value.
It's not much work to subclass UIView to make sense of methods like -(void)addView:toRightOfView: etc. You could do this as you go, porting only the methods you need. You could then call these in your override of layoutSubviews as Benjamin indicates.
Views can be built using IB or they can be written programmatically; Android scores well here in making layouts readable and you can bring that benefit to iOS views created programmatically. That there are few iOS devices means beyond readability there are not (yet?) many practical benefits to this pattern.
NB. A "XIB" file is an XML file. Open it up in your favourite text editor and take a look.
** EDIT.
Here's a quick example I knocked up. It has not been tested but some thing like this will work in your subclass of UIView (call it UIRelativeView perhaps).
- (void) addSubview:(UIView *) viewOne
toRightOfSubview:(UIView *) viewTwo
{
if (viewTwo == nil ||
[self.subviews contains:viewTwo] == NO)
{
[self addSubview:viewOne];
}
else
{
CGRect frameTwo = viewTwo.frame;
CGPoint originOne = CGPointMake(frameTwo.origin.x + frameTwo.size.width,
frameTwo.origin.y);
CGRect frameOne = CGRectZero;
frameOne.origin = originOne;
frameOne.size = viewOne.frame.size;
[viewOne setFrame:frameOne];
[self addSubview:viewOne];
}
}
- (void) moveSubview:(UIView *) viewOne
toRightOfSubview:(UIView *) viewTwo
{
if (viewTwo == nil ||
[self.subviews contains:viewTwo] == NO)
{
[self addSubview:viewOne];
}
else if ([self.subviews contains:viewOne] == NO)
{
[self addSubview:viewOne toRightOfSubview:viewTwo];
}
else
{
CGRect frameTwo = viewTwo.frame;
CGPoint originOne = CGPointMake(frameTwo.origin.x + frameTwo.size.width,
frameTwo.origin.y);
CGRect frameOne = CGRectZero;
frameOne.origin = originOne;
frameOne.size = viewOne.frame.size;
[viewOne setFrame:frameOne];
}
}
You've got no luck here. iOS doesn't have provisions for positioning the views in different layouts like Android. You need to reposition all the other subviews to make the way for the new view.
There are some view resizing methods like sizeToFit and autoResizingMask but they won't help you in your case here.
iOS is much more focused on pixel accuracy than Android it is, which uses relative layouts as it has to deal with multiple screen sizes. However, in iOS, the Interface Builder is an incredibly good tool included in XCode, which you can use.
Also, if you are just adding subviews in a repetitive manner, you could override the layoutSubviews method and use that to handle to manual labour for you. You mention having to "recalculate the origin y value for all of other views and re-position them to leave space for the new added view" ... You could code that into your layoutSubviews so you don't have to do it yourself each time.
Unfortunately, though, the SDK doesn't have any of this included by default. autoresizingMask's are great but you can't use that for initial layout; it's for automatic really it when rotating only.
As of iOS 9 you can use UIStackView, which works very similarly to LinearLayout: you add views and the stack view arranges them as needed based on your sizing preferences:
Fill will leave three of them their natural size, and make the fourth one take up the most space. It uses Auto Layout's content hugging priority to decide which one to stretch.
Fill Equally will make each subview the same size so they fill all the space available to the stack view.
Fill Proportionally uses the intrinsic content size of each subview to resize them by an equal amount. So view 1 was designed to have twice as much height as views 2, 3 and 4, that ratio will remain when they are resized – all the subviews get proportionally bigger or smaller.
Equal Spacing does not resize the subviews, and instead resizes the spacing between the subviews to fill the space.
Equal Centering is the most complicated, but for many people also the most aesthetically pleasing. It attempts to ensure the centers of each subview are equally spaced.
You can also set spacing between views in the stack view, adding some padding.
WARNING: When adding stack view child views in code you should always use addArrangedSubview() like this:
stackView.addArrangedSubview(someView)
If you try to use plain old addSubview() it won't work correctly, because the stack view won't know to arrange it.
As for removing, you need to be careful to use stackView.removeArrangedSubview(someView) and someView.removeFromSuperview() otherwise the view won't be removed correctly.
You might find my UIStackView tutorial useful.
Why doesn't this UIView layout code work as I want?
Background:
I have a custom UIView I have in my UIViewController
The custom UIView has a clock background imageview and an hourhand imageview
After introducing some code (see below) to try to resize the hour hand for an orientation change I'm getting stuck.
The code below really stuffs things up - the border outlike of the hour glass hand is way off with this code
Any ideas what I'm doing wrong - there's obvious some assumption or misunderstanding I have for it to screw up like this...
Code called by UIViewController (in "didRotateFromInterfaceOrientation" method) to my custom view:
// Centre image
self.hourHandImageView.center = self.hourFaceUIImageView.center;
// Resize to cater for either Portrait or Landscape orientation
CGSize currSize = self.hourFaceUIImageView.frame.size;
float newHourHandImageheightWidth = currSize.width < currSize.height ? currSize.width : currSize.height;
CGSize newHourHandViewSize = CGSizeMake(newHourHandImageheightWidth, newHourHandImageheightWidth);
CGRect newRect = self.hourHandImageView.frame;
newRect.size = newHourHandViewSize;
self.hourHandImageView.frame = newRect;
PS. Without the "Resize to cater for either Portrait or Landscape orientation" code the hour hand correctly stays centered where it should (noting I use transformation to turn it around). There all I really need to do is resize the hour hand appropriately after an orientation change, noting the hour background image is smaller in the landscape mode.
First, how can you tell if you are in portrait or landscape orientation? With this (?):
float newHourHandImageheightWidth = currSize.width < currSize.height ? currSize.width : currSize.height;
What i would advice you, is to do something like this:
-
(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{
if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation)) {
[self reOrderToPortrait];
} else if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)){
[self reOrderToLandScape];
}
}
Then on each method, you should define the new frames for your views. Start by removing your autosizing from your views, because you will define the new frames, and you dont want that to interfere with. You could also define some mesures like this:
#define hourHandImageViewPortrait CGPointMake(...,...)
#define hourHandImageViewLandScape CGPointMake(..., ...)
I want to have a UIView take over the whole screen to display an image from time to time, but most of the time I'm using a UISplitViewController for the main app functionality. Is there a recommended/best practice way to do this? Right now, I have a pointer to the main window and am just adding the UIView as a sub view and bringing it to front, but it won't display in the proper orientation. I was just wondering if there is a better way/something simple I'm missing.
Thanks.
I struggled with this same issue for some time and have come up with a clunky workaround. Before my solution, some more background on the obstacles:
In iPhone OS, the root view's coordinates are always in the literal fixed coordinates of the physical screen. "Up" is always device up. Subviews have to get coordinates which have been converted to a given orientation so that "Up" is what we expect to be: gravitational up.
Placing a UIView at the top of the view hierarchy (above the UIScrollView) would therefore require that you make these conversions yourself during orientation events. You get fullscreen, but you lose the benefit of the scrollView managing orientation coordinates for your subviews.
Keeping your view within the scrollView, there is no easy method as in Mac OS to simply collapse a pane of a splitView. Reviewing the header file reveals some private instance methods used to manage width.
So, I think that what you can do is maintain two "orientation-aware" view controllers (one splitView, one fullscreen), and switch them out and move your view between them when you toggle fullscreen. I did not go this route as it is obviously a touchy situation memory- and view-hierarchy- wise.
What I do is switch between an "almost fullscreen" width for the main view and regular split width. This works great except that the splitView's rounded corners are actually hard-coded images that get draw regardless of the splitView's dimensions. You will see these tiny black round corners 100% of the time. Here is the effect:
- (IBAction)toggleFullscreen:(id)sender; {
id appDelegate = [[UIApplication sharedApplication] delegate];
UISplitViewController *split = [appDelegate splitViewController];
//get master and detail view controller
UIViewController *master = [split.viewControllers objectAtIndex:0];
UIViewController *detail = [split.viewControllers objectAtIndex:1];
//In landscape permit fullscreen
if(self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft ||
self.interfaceOrientation == UIInterfaceOrientationLandscapeRight) {
CGRect f = detail.view.frame;
if ( f.origin.x == 0 ) { //exiting fullscreen
[sender setImage:[UIImage imageNamed:#"SlideLeft.png"]];
//adjust detail view
f.size.width = 703;
f.origin.x = 321;
[detail.view setFrame:f];
//adjust master view
f = master.view.frame;
f.size.width = 320;
f.origin.x = 0;
[master.view setFrame:f];
} else { //entering fullscreen
[sender setImage:[UIImage imageNamed:#"SlideRight.png"]];
//adjust detail view
f.size.width = 1024;
f.origin.x = 0;
[detail.view setFrame:f];
//adjust master view
f = master.view.frame;
f.size.width = 1;
f.origin.x = -1;
[master.view setFrame:f];
}
}
}
I got lots of this code from here and other sources, but as far as I know this implementation is unique. Probably because it is imperfect.
I ended up using a modal view controller which I present from the split view controller. I then specify the allowed orientations in -shouldAutorotateToInterfaceOrientation. I also hide the status bar. This works for my needs.