Thanks a lot! Please help!
I hava a scrollView in a UIView and a imageView in the ScrollView.
they have same size.
and here are the LOGs of the scrollView and imageview
and I have not used autoLayout constrains between uiview and scroll View
as well as scrollview and UIimageView
the code are:
- (void)setupScrollView
{
CGRect frame = CGRectMake(0, 0, self.scrollViewSizeView.frame.size.width, self.scrollViewSizeView.frame.size.height);
_colorScrollView = [[ColorScrollView alloc]initWithFrame:frame andUIImage:self.image];
[self.scrollViewSizeView addSubview:self.colorScrollView];
}
- (instancetype)initWithFrame:(CGRect)frame andUIImage:(UIImage *)image
{
self = [super initWithFrame:frame];
if (self)
{
self.contentSize = frame.size;
_imageView = [[ColorImageView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
self.imageView.image = image;
[self addSubview:self.imageView];
}
return self;
}
scrollView:
<ColorScrollView: 0x7fee13746dc0; baseClass = UIScrollView; frame = (0 0; 600 436); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x7fee13748270>; layer = <CALayer: 0x7fee13741330>; contentOffset: {0, 0}; contentSize: {600, 436}>
imageView:
<ColorImageView: 0x7fee13747e00; baseClass = UIImageView; frame = (0 0; 600 436); opaque = NO; layer = <CALayer: 0x7fee1370fc50>>
the imageView content mode is UIViewContentModeScaleAspectFit.
I want the image in imageView is center.
but it is not.
it look like it prefer to stay at the right side.
sorry that I don't have enough reputation to post a image:
it looks this (* means transparent)
*****this is the image area
*****this is the image area
*****this is the image area
*****this is the image area
*****this is the image area
The only thing that come to my mind is add a uiview in the uiscrollview and then add your image in to that uiview
if you could give us some of your constraint you use that could help us
From your commends for #Ali RP's answer, "if the aspect ratio of the image is close to the aspect ratio of the imageView. then no problem." I think your problem is because of UIViewContentModeScaleAspectFit. You have some white space of both size of the image.
UIViewContentModeScaleAspectFit
Scales the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.
And the reason why it is not centred is because the image you are using is too big I guess and right part of the subview is cropped. Try with a smaller one and one with different aspect ratio for debugging. For example, you should have some images with width > height and some with height > width.
Also see this one:
Difference between UIViewContentModeScaleAspectFit and UIViewContentModeScaleToFill?
Related
I have a UIScrollView with an image, and the image is in a container view. The view hierarchy looks like this:
UIScrollView
UIView
UIImageView
Panning works fine, but when I use the pinch gesture to zoom, the image changes size, but doesn't move relative to the origin, so the point centred underneath the two fingers moves as the gesture progresses. This makes it very difficult to zoom in on a particular point, since it's sliding away as you're zooming.
Description of the views involved:
<MyApp.MyView: 0x7ff6fd827e00; baseClass = UIScrollView; frame = (0 0; 375 667); autoresize = W+H; gestureRecognizers = <NSArray: 0x61800004a4d0>; layer = <CALayer: 0x618000023420>; contentOffset: {684, 487.5}; contentSize: {1731.4584832023011, 1154.3056554682007}>
<UIView: 0x7ff6fbe0c4d0; frame = (0 0; 1728 1152); transform = [2.2028669620902912, 0, 0, 2.2028669620902912, 0, 0]; layer = <CALayer: 0x6180000234c0>>
<UIImageView: 0x7ff6fbe09cd0; frame = (0 0; 1728 1152); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x618000023340>>
I have the UIImageView inside the UIView wrapper because I will have other views overlaid on the image which need to zoom/scale with the image.
There's very little of my own code running during the zoom. The UIScrollViewDelegate returns the UIView (the parent of the UIImageView), and configure the scroll view:
minimumZoomScale = 0.2
maximumZoomScale = 3.0
contentSize = image.size
Well, I've made a simple project that use your structure of views. And I didn't face with the problems. Possibly, you should check this things:are auto layout constraints setting right way is your parent view zooming correctly is mode of UIImageView fitting your needs Hope this may help
I have a detail view where I want to show a title, subtitle and content for articles. I want to be able to use HTML to format the text, so I've used a UIWebView for showing the article body. This works perfectly.
How ever, all of this, is inside a UIScrollView, so my issue is that I have to calculate the height of the UIScrollView?
This is how it works today:
And this is how it looks like in Storyboard:
So what I need to find out, is what is the correct code and syntax to calculate the correct height of the UIScrollView? Amongst several things, I tried [self.scrollView sizeToFit] without luck.
EDIT: Apparently it sets the correct heights with the code below, but seems like the view never updates.
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
// get height of content in webview
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:#"document.body.scrollHeight;"] floatValue];
// set new frame height
CGRect frame = webView.frame;
frame.size.height = height;
webView.frame = frame; // webview is now correct height
// set new frame height for scrollview (parent of webview)
CGRect scrollFrame = self.scrollView.frame;
scrollFrame.size.height = webView.frame.origin.y + height;
self.scrollView.frame = scrollFrame;
// log to console for cross checking
NSLog(#"new frame: %f, scrollview frame: %f", scrollFrame.size.height, self.scrollView.frame.size.height);
}
The console reports the apparently correct height:
new frame: 582.000000, scrollview frame: 582.000000
And a quick check in Photoshop as well, this seems to be correct:
The summed value of green and blue area is 582 pixels, but the scrollview still just scrolls the 504 pixel area from below the navigation bar to the bottom of the screen (to the bottom of the tab bar).
The webview has internally a scrollview. You can query its size by webview.scrollView.contentSize. You have to wait with this until the webview has finished rendering.
So, in the -webViewDidFinishLoad: delegate method you can get the optimal height of the webView through webView.scrollView.contentSize.height. You can then resize the webView to this height and layout the other views appropriately. If all of this is done in a custom view, the proper way of doing this would probably be to just call [theView setNeedsLayout] and override -layoutSubviews in theView.
You also should set webView.scrollView.alwaysBounceVertically to NO.
I solved the problem.
First of all, just expand the UIWebView to a height higher than the content ever will be (e.g. 2000 pixels).
The delegate method code that makes the magic happen
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
// set height for webiew
webView.autoresizesSubviews = NO;
webView.translatesAutoresizingMaskIntoConstraints = YES;
webView.scrollView.autoresizesSubviews = NO;
webView.scrollView.translatesAutoresizingMaskIntoConstraints = YES;
CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:#"document.getElementById('content').clientHeight;"] floatValue] + 80; // +80 for tabbar and spacing
CGRect frame = webView.frame;
frame.size.height = height;
webView.frame = frame;
// fix height of scroll view as well
self.scrollView.translatesAutoresizingMaskIntoConstraints = YES;
self.scrollView.contentSize = CGSizeMake(320, (self.webView.frame.origin.y + self.webView.frame.size.height));
}
I have a UIScrollView which contains a UIImageView
I need to zoom to a specific location relative to the UIImage and NOT the UIScrollView
So for example I have a UIImage where the size is 1000,1000 PX
I would like to zoom to a square such that CGRect = (400,500,100,100) inside that image
Unfortunately self.scrollView zoomToRect:animated isn't working properly because this rect is outside of its view and not in the same coordinate system
Also the aspect ratio of the UIImage can change inside of the UIImageview so it can be difficult to calculate its offset inside of the UIImageView (the black bars at the top and bottom of the image)
I know about
convertRect:fromView:
so thought about doing
-(void)zoomToRectInImage:(CGRect)rect
{
CGRect rect1 = [self.imageView.image convertRect:rect fromView:self.imageView.image]; // error because UIImage isn't a view
CGRect scrollViewRect = [self.scrollView convertRect:rect1 fromView:self.imageView];
[self.scrollView zoomToRect:scrollViewRect animated:YES]
}
I asked the question in a different format and this might help out someone
UIScrollView how to zoomToRect in UIImageView
I have created mainView objcet of UIView and added one subview on it. I applied transform on mainView for reducing frame size. But frame of subview of mainView was not reduced. How to reduce the size of this subview.
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CGFloat widthM=1200.0;
CGFloat heightM=1800.0;
UIView *mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, widthM, heightM)];
mainView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"te.png"]];
[self.view addSubview:mainView];
CGFloat yourDesiredWidth = 250.0;
CGFloat yourDesiredHeight = yourDesiredWidth *heightM/widthM;
CGAffineTransform scalingTransform;
scalingTransform = CGAffineTransformMakeScale(yourDesiredWidth/mainView.frame.size.width, yourDesiredHeight/mainView.frame.size.height);
mainView.transform = scalingTransform;
mainView.center = self.view.center;
NSLog(#"mainView:%#",mainView);
UIView *subMainView= [[UIView alloc] initWithFrame:CGRectMake(100, 100, 1000, 1200)];
subMainView.backgroundColor = [UIColor redColor];
[mainView addSubview:subMainView];
NSLog(#"subMainView:%#",subMainView);
}
NSlog of these views:
mainView:<UIView: 0x8878490; frame = (35 62.5; 250 375); transform = [0.208333, 0, 0, 0.208333, 0, 0]; layer = <CALayer: 0x8879140>>
subMainView:<UIView: 0x887b8c0; frame = (100 100; 1000 1200); layer = <CALayer: 0x887c160>>
Here the width of mainView is 250, the width of subview is 1000. but when i get the output in simulator, subview is occupied correctly, but it's not cross the mainView. How it is possible? How to get frame of subview with respect mainView frame after transformation?
What you're seeing is expected behavior. The frame of an UIView is relative to its parent, so it doesn't change when you apply a transformation to its superview. While the view will appear 'distorted' too, the frame won't reflect the changes since it's still at exact the same position relative to its parent.
However, I assume you would like to get the frame of the view relative to the topmost UIView. In that case UIKit offers these functions:
– [UIView convertPoint:toView:]
– [UIView convertPoint:fromView:]
– [UIView convertRect:toView:]
– [UIView convertRect:fromView:]
I applied these to your example:
CGRect frame = [[self view] convertRect:[subMainView frame] fromView:mainView];
NSLog(#"subMainView:%#", NSStringFromCGRect(frame));
And this is the output:
subMainView:{{55.8333, 83.3333}, {208.333, 250}}
In addition to s1m0n answer, the beautiful thing about applying a transform matrix to your view, is that you can keep reasoning in terms of its original coordinate system (in your case, you can handle subMainView using the non-transformed coordinate system, which is why, even though subMainView's frame is bigger than mainView's transformed frame, it still doesn't cross the parent view, as it gets automatically transformed). This means that when you have a transformed parent view (for example rotated and scaled) and you want to add a subview in a particular point relative to this parent view, you don't have to first keep track of the previous transformations in order to do so.
If you really are interested in knowing the subview's frame in terms of the transformed coordinate system, it will be enough to apply the same transformation to the subview's rectangle with:
CGRect transformedFrame = CGRectApplyAffineTransform(subMainView.frame, mainView.transform);
If you then NSLog this CGRect, you will obtain:
Transformed frame: {{20.8333, 20.8333}, {208.333, 250}}
Which, I believe, are the values that you were looking for. I hope this answers your question!
Here is the desired outcome. The blue area is the UIView of interest. The UIView is not a UIImageView.
I've tried all sorts of arrangements with auto-resizing masks to no avail
This can only be done programmatically. One option is what #user2223761 suggests with subclassing. If you don't want to subclass UIView, then you need to set the frames on orientation changes and set yourView.center to be the center of the center.
- (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {
if (UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
// Make sure that the frame is centered in the screen
NSInteger paddingLeftSide = (self.view.bounds.size.width - 480) / 2;
self.view.frame = CGRectMake(paddingLeftSide, 0, 480, 320);
} else {
self.view.frame = CGRectMake(0, 0, 320, 320);
}
}
Dealing with different screen sizes can be tricky. In your case it is not :)
since you want to center the view in the screen what ever size it is, all you need to do is set the center of the view to be the center of the screen.
CGRect screenBounds = [[UIScreen mainScreen] bounds];
view.center = CGPointMake(screenBounds.size.width/2,screenBounds.size.height/2);
This code assumes the view's superView's bounds is the same size as the screenBounds..
First: Subclass UIView (create a MYUIView).
Second: override the method
- (void)layoutSubviews {
[super layoutSubviews];
// .. put your code...
}
and perform the frame update manually inside that method by reading the screen size.
auto-resize mask must be set to UIViewAutoresizingNone.