Centering UIView - ios

I have a UIViewController subclass that instantiates a UIView subclass (let's call that viewA). Then, viewA will sometimes instantiate another UIView which we'll call viewB.
I want viewB to be centered within the view controller.
My question is, "What is a (correct) way of doing this?"
TIA

There are many correct ways, but maybe the best one is to use the center-property:
[viewB setCenter: viewA.center];
Or maybe you need to use..
[viewB setCenter: viewA.navigationController.center];

You have to be careful to not end up on a fraction of a point. On non-retina you need to be on full points but for retina you can be on 0.5
One way would be to use center and then adjust
viewB.center = viewA.center;
viewB.frame = CGRectIntegral(viewB.frame);

I don't know a shorter way to do it than this one:
CGFloat x = CGRectGetMidX(self.view.bounds) - viewBWidth / 2;
CGFloat y = CGRectGetMidY(self.view.bounds) - viewBHeight / 2;
viewB.frame = CGRectMake(x,y,viewBWidth,viewBHeight);

viewB.frame = [MyClass centeredFrameForSize:desiredSize inRect:viewA.bounds];
+ (CGRect)centeredFrameForSize:(CGSize)size inRect:(CGRect)rect
{
CGRect frame;
frame.origin.x = rintf((rect.size.width - size.width)/2) + rect.origin.x;
frame.origin.y = rintf((rect.size.height - size.height)/2) + rect.origin.y;
frame.size = size;
return frame;
}

Related

Change the position dynamically

Im new to IOS development , so when i change the width of a UITextFeild dynamically i want the button below to shift up .
i tried using the constrains but it doesn't seem to shift dynamically .
(IBAction)selectStatus:(id)sender {
CGRect frameRect = _textViewDevices.frame;
frameRect.size.height = 10;
self.textViewDevices.frame = frameRect;
any good example of how to achieve that ?
I want to achieve something like the Relative positioning in android .
current box before any action
Try calling layoutIfNeeded after the modifications:
- (IBAction)selectStatus:(id)sender {
CGRect frameRect = _textViewDevices.frame;
frameRect.size.height = 10;
self.textViewDevices.frame = frameRect;
[self.view layoutIfNeeded];
}
If you have a height constraint on the text view, try to set its constant instead of setting the frame height:
- (IBAction)selectStatus:(id)sender {
self.textViewHeightConstraint.constant = 10;
[self.view layoutIfNeeded];
}
Programmatically when the first violet field changes in height, to make all the below views stay next to it, you should update the frame.origin.y properly.
So, for example, the status label should be reframed like this
CGRect frame = statusLabel.frame;
frame.origin.y = firstField.origin.y + firstField.size.height + 5;
statusLabel.frame = frame;
And the same for all below views (I've supposed 5 pixels of space between views)

Simple way to redraw view programatically when device orientation changes

I'm new to iOS development and for my assignment, I'm tasked changing updating the ViewController programmatically when the device's orientation changes. I've found a snippet of an answer here, but it doesn't get the job done.
I tried adding this to the viewWillLayoutSubviews of my View Controller, but all I get is an unused variable warning.
CGRect rotatedFrame = [self.view convertRect:self.view.frame fromView:self.view.superview];
viewWillLayoutSubviews and rotation
As a "hint", I've been told it's simple to implement in viewWillLayoutSubviews. Going through and changing all the CGRects in my VC doesn't sound like a couple of lines of code. There's got to be a simpler, more efficient way to do this, but I've only found snippets of solutions digging around on this site. Thanks for reading.
The line of code you are using is assigning a CGRect to the rotatedFrame variable, it's not updating anything on your view controller.
There's many ways to approach this but it depends on what is contained in your view and how it's been configured. Things like Auto Layout for example could let you configure almost everything in Interface Builder and let you avoid doing most things in code.
You've been tasked to do this programatically and since we know that viewWillLayoutSubviews is called every time the device is rotated that's a good place to start. Here's a lazy way I've gone about rotating a video to fit a new orientation using a transformation:
//Vertical
CGSize size = self.view.frame.size;
someView.transform = CGAffineTransformMakeRotation((M_PI * (0) / 180.0))
someView.frame = CGRectMake(0, 0, MIN(size.width, size.height), MAX(size.width, size.height));
//Horizontal
CGSize size = [UIScreen mainScreen].bounds.size;
int directionModifier = ([UIDevice currentDevice].orientation == UIInterfaceOrientationLandscapeLeft) ? -1 : 1;
someView.bounds = CGRectMake(0, 0, MAX(size.width, size.height), MIN(size.width, size.height));
someView.transform = CGAffineTransformMakeRotation((M_PI * (90) / 180.0) *directionModifier);
someView.transform = CGAffineTransformTranslate(someView.transform,0,0);
How many subviews are in your view? Are they grouped? If you're using auto-resizing masks you might get away with only adjusting the frames of one or two views. If your root view has a number of subviews you can loop through views that need similar adjustments to avoid having to write excess code. It really depends on how everything has been set up.
I figured out how to determine the viewWidth and viewHeight and set those as CGFloats. I then added an if-else statement which figures out if the display is in portrait or landscape and sets the problematic calculateButton accordingly.
Apologies for lengthy code, but I've found in searching this site I find "snippets" of answers, but being new to iOS it's difficult to figure out what goes where. Hopefully, this helps someone later. (and hopefully it's correct)
- (void) viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
CGFloat viewWidth = self.view.bounds.size.width;
CGFloat viewHeight = self.view.bounds.size.height;
CGFloat padding = 20;
CGFloat itemWidth = viewWidth - padding - padding;
CGFloat itemHeight = 44;
// Bunch of setup code for layout items
// HOMEWORK: created if-else statement to deal w/ portrait vs. landscape placement of calculateButton.
if (viewWidth > viewHeight) {
// portrait
CGFloat bottomOfLabel = viewHeight;
self.calculateButton.frame = CGRectMake(padding, bottomOfLabel - itemHeight, itemWidth, itemHeight);
} else {
// landscape
CGFloat bottomOfLabel = CGRectGetMaxY(self.resultLabel.frame);
self.calculateButton.frame = CGRectMake(padding, bottomOfLabel + padding, itemWidth, itemHeight);
}
}

Horizontally center multiple UIViews

I want to horizontally center a number of UIViews (they happen to be circles) in the master UIView. It will end up basically looking like the dots on the standard Page Control.
I have all the code written to create the circle UIViews I just have no idea how to arrange them horizontally and dynamically at run time.
Essentially I need some kind of horizontal container where I can do this
-(void)addCircle{
[self addSubView:[CircleView init]];
}
And it will auto arrange however many children it has in the center.
I get confused with auto-layout as well from time to time but here is a way how you can do it programmatically: (I assume that you add your circle views to a containerView property of your view controller and you do not add any other views to it.)
Add these two properties to your view controller:
#property (nonatomic) CGRect circleViewFrame;
#property (nonatomic) CGFloat delta;
Initiate those properties with the desired values in your view controller's viewDidLoad method:
// the size (frame) of your circle views
self.circleViewFrame = CGRectMake(0, 0, 10, 10);
// the horizontal distance between your circle views
self.delta = 10.0;
Now we add your "automatic addCircle method":
- (void)addCircleView {
UIView *newCircleView = [self createCircleView];
[self.containerView addSubview:newCircleView];
[self alignCircleViews];
}
Of course we need to implement the createCircleView method...
- (UIView*)createCircleView {
// Create your circle view here - I use a simple square view as an example
UIView *circleView = [[UIView alloc] initWithFrame:self.circleViewFrame];
// Set the backgroundColor to some solid color so you can see the view :)
circleView.backgroundColor = [UIColor redColor];
return circleView;
}
... and the alignCircleViews method:
- (void)alignCircleViews {
int numberOfSubviews = [self.containerView.subviews count];
CGFloat totalWidth = (numberOfSubviews * self.circleViewFrame.size.width) + (numberOfSubviews - 1) * self.delta;
CGFloat x = (self.containerView.frame.size.width / 2) - (totalWidth / 2);
for (int i = 0; i < numberOfSubviews; i++) {
UIView *circleView = self.containerView.subviews[i];
circleView.frame = CGRectMake(x,
self.circleViewFrame.origin.y,
self.circleViewFrame.size.width,
self.circleViewFrame.size.height);
x += self.circleViewFrame.size.width + self.delta;
}
}
This is the most important method which will automatically realign all your subviews each time a new circleView is added. The result will look like this:
Simple steps: append circle to container view, resize container view, center align container view
-(void)addToContanerView:(CircleView*)circle{
circle.rect.frame = CGrectMake(containers_end,container_y,no_change,no_change);
[containerView addSubview:circle];
[containerView sizeToFit];
containerView.center = self.view.center;
}
Assumptions:
containers_end & containers_y you can get from CGRectMax function,
for UIView SizeToFit method check here
To take care of rotation use make sure your Autoresizing subviews are set for left, right bottom and top margin.
You can try using this library. I have used it on several of my projects and so far, it worked really well.
https://github.com/davamale/DMHorizontalView

On iOS, what is the best way to set up a subview if we really would like to do initWithCenterAndSize?

For example, if we are to draw a 100 x 100 pixel circle on the main view which covers up the whole screen on the iPad, then instead of using initWithFrame like following 2 steps in viewDidLoad:
UINodeView *nodeView = [[UINodeView alloc] initWithFrame:
CGRectMake(x, y, NSNodeWidth, NSNodeHeight)];
nodeView.center = CGPointMake(x, y);
because x and y is more elegantly as self.view.bounds.size.width / 2 to horizontally center the circle, instead of self.view.bounds.size.width / 2 - NSNodeWidth / 2. Is init by a frame first, and then reset the center a good way, or is there a better way, if there is a initWithCenterAndSize?
That's a fine way of doing it :)
I would have gone for generating the positioned frame first to avoid the extra method call but that's just a matter of personal preference :)
If you're using this alot in your app you could make a category on UIView that implements this (warning, untested code :)
- (id)initWithCenter:(CGPoint)point size:(CGSize)size {
CGRect frame = CGRectMake(point.x-size.width/2,
point.y-size.height/2,
size.width,
size.height);
return [self initWithFrame:frame];
}
I usually do this:
UINodeView *nodeView = [[UINodeView alloc] initWithFrame:
CGRectMake(0, 0, NSNodeWidth, NSNodeHeight)];
nodeView.center = CGPointMake(x, y);
It looks nice and clear.

*modify* UIbutton position (Iphone SDK)

I'm playing around with UIbuttons, just to get a feel on what can really be done with them. I have only one problem so far:
How do I modify the position of a UIButton?
- (IBAction)buttonClicked:(id)sender
{
UIButton *senderB = sender;
CGPoint position = senderB.frame.origin;
CGSize size = senderB.frame.size;
senderB.frame = CGRectMake(position.x,position.y + 10,size.width,size.height);
}
The above works just fine, however, creating a new CGrect for every time I want to simply change one seems rather inefficient to me.
Is there any way for me to directly set the values of senderB.frame.origin.x, etc?
I usually do it like this:
CGRect buttonFrame = button.frame;
buttonFrame.origin.y += 10;
button.frame = buttonFrame;
Nope. Notice that 'someview.frame' returns a CGRect by value, not by reference or pointer or whatever. That's why you get the 'Lvalue required' error.
However, setting the frame like you're doing is plenty fast.
The frame property is read only. What you can do is copying the current frame with
CGRect btFrame = senderB.frame;
btFrame.origin.x += 10;
senderB.frame = btFrame;

Resources