I am customizing the appearance of my popovers by subclassing UIPopoverBackgroundView. Everything is working fine, except there are some instances where there is a gap between the arrow and the content view. If I keep rotating the device to dismiss the popover then bring it back up, sometimes they line up and others they do not. I'm logging the frame sizes and they are consistently the same, so I have no idea what's going on. I'm attaching screenshots and my layoutSubviews code below.
Where you see me subtracting 4 in the case of arrow direction right this was based on trial & error of getting it to work at least some of the time. I hate coding like this because I'm not sure what this space of 4 points is and why I don't need it in all cases of arrow direction, for example.
In the images the 1st shot shows the problem. This happened on a random triggering of the popover. The next image shows it randomly working when triggered later within the same execution of the app.
Also worth mentioning, I found some sample code at http://blog.teamtreehouse.com/customizing-the-design-of-uipopovercontroller and tried this version of layoutSubviews, even though it's already very similar to what I have. Even with this code I was still seeing the same issue.
EDIT: Worth mentioning it might be obvious from my screenshots but I am not including a border for my popover:
+ (UIEdgeInsets)contentViewInsets
{
return UIEdgeInsetsMake(0.0f, 0.0f, 0.0f, 0.0f);
}
Possibly also worth mentioning I am not using an image file for my arrow image but rather am drawing it custom. Again, even when I comment out the drawing I'm still having the issue, so I don't think it's related, but wanted to mention it for full disclosure.
Any help greatly appreciated. Thanks.
CGSize arrowSize = CGSizeMake(kCMAPopoverBackgroundViewArrowBase, kCMAPopoverBackgroundViewArrowHeight);
// Leaving code out for drawArrowImage - even when I leave the arrowImageView as
// an empty image view and set a non-clear background color this gap is still
// sporadically showing up
self.arrowImageView.image = [self drawArrowImage:arrowSize];
float arrowXCoordinate = 0.0f;
float arrowYCoordinate = 0.0f;
CGAffineTransform arrowRotation = CGAffineTransformIdentity;
float borderMargin = 2.0f;
switch (self.arrowDirection) {
case UIPopoverArrowDirectionUp:
arrowXCoordinate = ((self.bounds.size.width / 2.0f) - (arrowSize.width / 2.0f));
arrowYCoordinate = 0.0f;
break;
case UIPopoverArrowDirectionDown:
arrowXCoordinate = ((self.bounds.size.width / 2.0f) - (arrowSize.width / 2.0f));
arrowYCoordinate = self.bounds.size.height - arrowSize.height;
arrowRotation = CGAffineTransformMakeRotation(M_PI);
break;
case UIPopoverArrowDirectionLeft:
arrowXCoordinate = 0.0f - (arrowSize.height / 2.0f) + borderMargin;
arrowYCoordinate = ((self.bounds.size.height / 2.0f) - (arrowSize.height / 2.0f));
arrowRotation = CGAffineTransformMakeRotation(-M_PI_2);
break;
case UIPopoverArrowDirectionRight:
arrowXCoordinate = self.bounds.size.width - arrowSize.height - 4.0f;
arrowYCoordinate = ((self.bounds.size.height / 2.0f) - (arrowSize.height / 2.0f));
arrowRotation = CGAffineTransformMakeRotation(M_PI_2);
break;
default:
break;
}
self.arrowImageView.frame = CGRectMake(arrowXCoordinate, arrowYCoordinate, arrowSize.width, arrowSize.height);
[self.arrowImageView setTransform:arrowRotation];
Is your arrow image square? If not, I'm guessing that the transform is affecting its frame slightly and this is generating the unexpected gap.
Possibly you are getting subpixel values in your calculations (most likely 0.5)
Try using floorf or ceilf to make sure your values are landing exactly on pixel integral values.
For example...
arrowXCoordinate = floorf(((self.bounds.size.width / 2.0f) - (arrowSize.width / 2.0f)));
See floor reference.
Related
So I have a UITextView that's supposed to be visually sitting on the bottom edge of the screen and then stretching up and back "into" the screen, "Star Wars" opening crawl-style.
After much googling etc, I feel like I have what looks like the right code for the job... but instead of setting up the perspective view I was looking for, this is just making the UITextView totally disappear!
The text view is set up in a storyboard with springs/struts (no autolayout) such that it's pinned at the top and bottom of the main view, about 20px in from each side, and the springs are active in both directions. Its outlet is hooked up to self.infoTextView. It shows up as I'd expect if I don't apply any transformations to it.
But when i fire off the code below in viewDidLoad, the text view just disappears completely. I'm sure I'm missing something but I can't seem to figure out what t is.
CGRect frame = self.infoTextView.layer.frame;
self.infoTextView.layer.anchorPoint = CGPointMake(.5f, 1.0f);
self.infoTextView.layer.frame = frame;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / 500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 1.57, 0, 1, 0);
self.infoTextView.layer.transform = rotationAndPerspectiveTransform;
thanks!
There are two things you'll need to modify in your code:
The rotation axis. You're rotating it around the Y axis. To get the
effect you're after you will need to change the rotate transform to
turn around the X axis.
To get "Star Wars opening crawl-style" effect you'll need to set a negative angle or a negative perspective.
Also, you would probably want to set a more "strong" perspective to achieve a more dramatic effect.
Here's an example based on your transform code:
CGFloat angle = -45;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / 200;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, angle / 180.0 * M_PI, 1, 0, 0);
self.infoTextView.layer.transform = rotationAndPerspectiveTransform;
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);
}
}
I'm trying to scale an AVCaptureVideoPreviewLayer so it displays a "zoomed in" preview from the camera; I can make this work using setAffineTransform:CGAffineTransformMakeScale(2.0f, 2.0f), but only once the layer is visible on screen. That is, the scale transform doesn't seem to take effect unless I call it (from within a CATransaction) during a callback like viewDidAppear.
What I'd really like to do is have the scale transform be applied prior to the layer becoming visible--e.g. at the time that I initialize it and add it to the UIView--but all my attempts to do so have proven futile. If I set the transform at this point, and then attempt to read the value back once it is visible, it does appear to have the desired scale transform set -- yet it does not have any effect on the view. I'm new to iOS programming, so I'm sure there's something basic I'm missing here; any help is appreciated!
Two simple alternative approaches, one (better) for iOS 7.x and one for earlier versions of iOS:
float zoomLevel = 2.0f;
if ([device respondsToSelector:#selector(setVideoZoomFactor:)]
&& device.activeFormat.videoMaxZoomFactor >= zoomLevel) {
// iOS 7.x with compatible hardware
if ([device lockForConfiguration:nil]) {
[device setVideoZoomFactor:zoomLevel];
[device unlockForConfiguration];
}
} else {
// Lesser cases
CGRect frame = captureVideoPreviewLayer.frame;
float width = frame.size.width * zoomLevel;
float height = frame.size.height * zoomLevel;
float x = (frame.size.width - width)/2;
float y = (frame.size.height - height)/2;
captureVideoPreviewLayer.bounds = CGRectMake(x, y, width, height);
}
I'm using iCarousel to have a scroll of images. THe code is:
- (CATransform3D)carousel:(iCarousel *)_carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
CGFloat count = 5;
CGFloat spacing = 0.9f;
CGFloat arc = M_PI * 0.3f;
CGFloat radius = fmaxf(140.0 * spacing / 2.0f, 140.0 * spacing / 2.0f / tanf(arc/2.0f/count));
CGFloat angle = offset / count * arc;
radius = -radius;
angle = -angle;
transform = CATransform3DTranslate(transform, radius * sin(angle),radius * cos(angle) - radius, 0.0f);
return transform;
}
But when I scroll the images there is an ugly effect, the transition is not smooth and the images comes out in a jerky way, but I'd like to come out smootly. Can you help me? Thanks.
Edit: The problem is that when I scroll the images the transition is not smooth and the images comes out in front of the images on the back with a detachment from the other images. Pratically, the images comes in front of the others only when the scrolling did end and this causes a bad effect.
We had a similar issue in our last implementation of iCarousel. Here's how we fixed it:
- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value {
if (option == iCarouselOptionSpacing) {
return value;// * 1.05f;
} else if(option == iCarouselOptionWrap) {
return NO;
} else if(option == iCarouselOptionVisibleItems) {
return 3;
}
return value;
}
Specifically, what you're probably needing is that last else if statement where we specify the number of visible items. It defaults to 1 which means that as you swipe through the new images come out in a jerky way. By specifying 3, you guarantee that the most previous item, the current item, and the next item are always loaded in memory so scrolling between them is always smooth. If this doesn't solve your problem, increase the number 3 to whatever works.
Also, don't forget to set the delegate of the iCarousel to self.
Best of luck.
I want to draw a pentagon in iOS with UISliders as the circumradii (a set of five UISliders going in different directions and originating from the center of a pentagon). Currently I have rotated five UISliders using a common anchorPoint (:setAnchorPoint), but they dont seem to originate from a common point.
How can I go about this? Do I need to start working on a custom control? What more from Quartz2D can I use?
Some specific indicators would be useful (please don't just say "Use Quartz2D")
Here is what I have achieved Imgur
And here is what I want to achieve Imgur
I defined the various sliders as an IBOutletCollection, so I can access them as an array in the controller. Then I run the following code in viewWillAppear:
CGPoint viewCenter = self.view.center;
for (NSInteger i = 0, count = self.sliders.count; i < count; ++i) {
UISlider *slider = self.sliders[i];
CGFloat angle = 2.0f * M_PI / count;
CALayer *layer = slider.layer;
layer.anchorPoint = CGPointMake(0.0f, 0.5f);
layer.position = viewCenter;
layer.transform = CATransform3DMakeRotation(i * angle - M_PI_2, 0.0f, 0.0f, 1.0f);
}
Here's a screenshot of the result:
Is this that you want?
I would try just to turn the sliders. The following code should help:
firstSlider.transform=CGAffineTransformRotate(firstSlider.transform,72.0/180*M_PI);
secondSlider.transform=CGAffineTransformRotate(secondSlider.transform,144.0/180*M_PI);
//and so on
The 72.0/180*M_PI is transformation of degrees to radians.
Hope it helps.
P.S. don't have a mac nearby to check if it works