CODEWITHSUNDEEP
iosautolayoutios-autolayout
JLT
JLT

Reputation: 3172

iOS - How To Position a View Fixed Within a Certain Area On a Background Image

This is the layout that I am trying to achieve.

enter image description here

I want to position the circular yellow button within the small circular area of the background in any iPhone. The circular area is not centred in that image.

This is so far what I tried:

However, the outcome is really not what I expect it should be. It is alright that if the background image is distorted, I just want the yellow button to stay inside the circular area of the background image.

Thanks!

Upvotes: 0

Views: 164

Answers (2)

vacawama
vacawama

Reputation: 154631

To position your circle relative to the background, set a constraint to align the trailing edge of the circle with the trailing edge of the image view, and then set the multiplier to an appropriate value like 214:640. This will cause the circle to move right by the correct amount as the screen size increases.

Likewise, align the circle bottom to the image view bottom and set the multiplier to an appropriate value like 478:900 and it will keep your circle aligned as the screen grows.

Play with the ratios until they look good on one phone size (like the iPhone 5S), then they'll work for the 6S and 6S Plus.

Set the circle width equal to the image view width and set the multiplier to 100:320.

Upvotes: 1

Mahmoud Fayez
Mahmoud Fayez

Reputation: 3459

I would not go that far, I would make one button that fits the entire screen, set the button image to be the whole image including the yellow circle. Then use similar code below:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
  UITouch *touch = [touches anyObject];

  // Get the specific point that was touched
  CGPoint point = [touch locationInView:self.view]; 
  if (point.x * 100 / parentView.width in range (0-100) && point.y*100 / parentView.heiht in range (0-100)){
       // write your button event handler here.
  }

}

Upvotes: 0

Related Questions