I have a question pretty similar to iPhone: Expand UITextView when scrolling
My App is also supposed to have a picture on top of the detail view and a textview below it. When scrolling the picture is supposed to shrink so there is more space for the text. A smilir effect can be found in Music Apps like Shazam or Rdio with the Album-Cover on top and information to the album below.
So far I managed to get the picture to resize by using - (void)scrollViewDidScroll:(UIScrollView *)scrollView, but it is only working if the UIImageView is set to Aspect Fit, I need it to be Aspect Fill though, as I don't want the picture to be squished when resizing the frame.
Can anybody help me achieve that effect?
This is what I used so far. I'm pretty new to programming, so if you have any other comments to the code I write I really appreciate that, too!
Viewcontroller.h
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController < UIScrollViewDelegate>
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#property (weak, nonatomic) IBOutlet UIImageView *imageView;
#property (weak, nonatomic) IBOutlet UITextView *textView;
#end
Viewcontroller.m
#interface ViewController ()
{
CGFloat draggedOffsetY;
CGFloat newHeight;
}
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.scrollView setContentSize:CGSizeMake(320, 800)];
CGPoint offset = CGPointMake(0, 0);
[self.scrollView setContentOffset:offset];
self.scrollView.delegate = self;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
draggedOffsetY = self.scrollView.contentOffset.y;
NSLog(#"View was dragged to: %f", draggedOffsetY);
newHeight = self.imageView.frame.size.height-draggedOffsetY;
if (newHeight > 75 && newHeight < 150 ){
[self.imageView setFrame:CGRectMake(0, 0, self.view.frame.size.width, newHeight)];
CGFloat topCoordiate = self.imageView.frame.size.height;
self.textView.frame = CGRectMake(0, topCoordinate, self.textView.frame.size.width, self.textView.frame.size.height);
}
}
If I don't get wrong, I think the reason of the problem is that you don't understant the "Aspect Fit" and "Aspect Fill" yet. With setting to "Aspect Fill", you must change both width and height of imageView to implemetion of image shrink.
Related
My xib of BetRecordAniChooserView :
My ViewController in simulator:
You can see the background view of the chooser-view height is reduce.
My code is below:
BetRecordAniChooserView.h:
#import <UIKit/UIKit.h>
typedef void(^ChooseBlock)(NSString *choosedStr);
#interface BetTRecordAniChooserView : UIView
#property (nonatomic, assign) UIViewController *owener;
#property (nonatomic, assign) BOOL isShow;
#property (nonatomic, copy) ChooseBlock block;
- (void)showSelf;
- (void)hideSelf;
#end
BetRecordAniChooserView.m:
#import "BetTRecordAniChooserView.h"
#interface BetTRecordAniChooserView ()
#property (weak, nonatomic) IBOutlet UIButton *all_button;
#property (weak, nonatomic) IBOutlet UIButton *check_pending_button;
#property (weak, nonatomic) IBOutlet UIButton *deposited_button;
#property (weak, nonatomic) IBOutlet UIButton *have_cancel_button;
#end
#implementation BetTRecordAniChooserView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (void)awakeFromNib {
[super awakeFromNib];
self.frame = CGRectMake(0, 0, self.bounds.size.width, 100);
self.all_button.selected = YES;
}
#pragma mark - actions
- (IBAction)allAction:(UIButton *)sender {
self.block(sender.titleLabel.text);
}
- (IBAction)checkPendingAction:(UIButton *)sender {
self.block(sender.titleLabel.text);
}
- (IBAction)haveDepositeAction:(UIButton *)sender {
self.block(sender.titleLabel.text);
}
- (IBAction)haveCancelAction:(UIButton *)sender {
self.block(sender.titleLabel.text);
}
#pragma mark - methods
- (void)showSelf {
CGRect temp_frame = self.frame;
self.isShow = YES;
[UIView animateWithDuration:0.3 animations:^{
self.frame = CGRectMake(temp_frame.origin.x, temp_frame.origin.y + temp_frame.size.height, temp_frame.size.width, temp_frame.size.height);
}];
}
- (void)hideSelf {
CGRect temp_frame = self.frame;
self.isShow = NO;
[UIView animateWithDuration:0.3 animations:^{
self.frame = CGRectMake(temp_frame.origin.x, temp_frame.origin.y - temp_frame.size.height, temp_frame.size.width, temp_frame.size.height);
} completion:^(BOOL finished) {
}];
}
#end
In my ViewController.m:
#import "ViewController.h"
#import "BetTRecordAniChooserView.h"
#interface ViewController ()
{
BetTRecordAniChooserView *_chooser_view;
}
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
_chooser_view = [[NSBundle mainBundle] loadNibNamed:#"BetTRecordAniChooserView" owner:self options:nil].firstObject;
//float width = self.view.bounds.size.width;
//float height = 100.f;
//_chooser_view.frame = CGRectMake(0, -height + 64, width, height);
_chooser_view.owener = self;
[self.view addSubview:_chooser_view];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (IBAction)actionA:(UIButton *)sender {
if (_chooser_view.isShow) {
[_chooser_view hideSelf];
} else {
[_chooser_view showSelf];
}
}
#end
You can see in the BetRecordAniChooserView's awakeFromnNib method:
The frame height I set 100:
self.frame = CGRectMake(0, 0, self.bounds.size.width, 100);
But when I start my simulator it become 36(the gray color view under the buttons).
(lldb) po self.frame
(origin = (x = 0, y = 0), size = (width = 375, height = 36))
I found the reason:
At first I was use the trailing, leading, bottom, top of the gray back view to its superview, I get this issue.
And then I delete the Bottom Space Constraint, and add the height constraint to it.
Then I do not have the issue again, and I can drag out the height Constraint to the .m file too, convenience to change the height.
But I don't know if there is a method I do not use my set height constraint method, still use the trailing, leading, bottom, top constraints to get the requirement effect.
I have made a demo for zoom image using UIScrollView. My ViewController only contains one image.
The problem is the image cannot zoom in iO7 (I have tested on iPhone4S-iOS7) but work perfectly in iOS8/iOS9.
Any ideas on how to fix it?
Here is my code
#import "ViewController.h"
#interface ViewController ()<UIScrollViewDelegate>
#property (weak, nonatomic) IBOutlet UIScrollView *scrollview;
#property (weak, nonatomic) IBOutlet UIView *contentview;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
float minimumScale = [_contentview frame].size.width /[_scrollview frame].size.width;
_scrollview.maximumZoomScale = 5; //Change as per you need
_scrollview.minimumZoomScale = minimumScale; //Change as you need
_scrollview.zoomScale = minimumScale;
_scrollview.delegate =self;
_scrollview.clipsToBounds = YES;
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return self.contentview;
}
#end
Here is the layout structure
Screen.png constraint
ContentView constraint
ScrollView constraint
Here is my demo project
https://drive.google.com/file/d/0B679aXO0SBmMeUVHTUdOcmxJSXM/view
The height and width constraints are causing this in iOS 7. A workaround would be, removing those constraints for iOS 7 and calculate minimumScale manually. in IOS 8 and above, do not change anything.
- (void)viewDidLoad {
[super viewDidLoad];
float minimumScale = 1;
if (floor(NSFoundationVersionNumber) < NSFoundationVersionNumber_iOS_8_0) {
[self.view removeConstraints:self.heightWidthConstraints];
minimumScale = self.scrollview.frame.size.width / self.imageView.image.size.width;
}
_scrollview.maximumZoomScale = 5; //Change as per you need
_scrollview.minimumZoomScale = minimumScale; //Change as you need
//_scrollview.zoomScale = minimumScale;
_scrollview.delegate = self;
//_scrollview.clipsToBounds = YES;
[self.scrollview setZoomScale:minimumScale animated:YES];
}
Remove width and height contraint of contentView.
Add centralHorizontal constraint of contentView with scrollView
Let me know if it works.
I try to create a horizontal page slider like you see it in most quiz games.
Basically each page has and image/button showing slightly at the right of the screen,
to indicate that there are more pages.
On the last page the user should see no image at the right, but the image on the left, as it it the last page.
So in between of images are showing left and right.
Is there a way to do this with the inspector or only programmatically?
I tried both and ended up with some weird side effects where it bounces back to the center position of the image.
See illustration below:
https://plus.google.com/u/0/101813614111502094997/posts
Use this code
in .h file use
#property (weak, nonatomic) IBOutlet UIScrollView *imageScrollView;
#property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
in .m class
#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )
-(void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
NSArray *viewsToRemove = [self.imageScrollView subviews];
for (UIView *subviewElement in viewsToRemove) {
[subviewElement removeFromSuperview];
}
UIImageView *img1= [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, IS_IPHONE_5?370:284)];
img1.image=[UIImage imageNamed:#"yourImage1"];
[img1.image stretchableImageWithLeftCapWidth:320 topCapHeight:IS_IPHONE_5?370:284 ];
UIImageView *img2= [[UIImageView alloc] initWithFrame:CGRectMake(320, 0, 320, IS_IPHONE_5?370:284)];
img2.image=[UIImage imageNamed:#"yourImage2"];
[img2.image stretchableImageWithLeftCapWidth:320 topCapHeight:IS_IPHONE_5?370:284 ];
UIImageView *img3= [[UIImageView alloc] initWithFrame:CGRectMake(640, 0, 320, IS_IPHONE_5?370:284)];
img3.image=[UIImage imageNamed:#"yourImage3"];
[img3.image stretchableImageWithLeftCapWidth:320 topCapHeight:IS_IPHONE_5?370:284 ];
[self.imageScrollView addSubview:img1];
[self.imageScrollView addSubview:img2];
[self.imageScrollView addSubview:img3];
}
- (void)viewDidLayoutSubviews
{
self.imageScrollView.contentSize= CGSizeMake((imageScrollView.frame.size.width*3) , imageScrollView.frame.size.height);
}
I am getting some strange behaviour when trying to zoom in on a png in an image view, inside a scroll view. I think I've set the constraints or settings in my utilities pane wrong. What should they be if I want to see the entire picture first and then zoom in on it?
The image renders, but then when I try to pinch zoom in and out, only the height of the picture changes bigger or smaller, with the width stuck at the iPhone screen width. If I fiddle enough however, I can zoom in further, but everything gets distorted and spinney. Any ideas what I'm doing wrong?
Here's the code I have in the View Controller implementation file now:
#interface ZooViewController ()
#property (weak, nonatomic) IBOutlet UIImageView *imageView;
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#end
#implementation ZooViewController
#synthesize imageView;
#synthesize scrollView;
-(void)viewDidLoad
{
[super viewDidLoad];
[self.imageView setContentMode:UIViewContentModeScaleAspectFit];
self.scrollView.contentSize = self.imageView.image.size;
self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
}
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView{
return self.imageView;
}
-(void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
-(void)viewDidUnload{
[self setImageView:nil];
[self setScrollView:nil];
[super viewDidUnload];
}
#end
First set image content mode to UIViewContentModeScaleAspectFit
[self.imageView setContentMode:UIViewContentModeScaleAspectFit];
After that set scrollview content size
self.scrollView.contentSize = self.areaImageView.frame.size;
Don't forget to set scrollview delegates
// For supporting zoom,
scrollView.minimumZoomScale = 0.5;
scrollView.maximumZoomScale = 2.0;
...
// Implement a single scroll view delegate method
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)aScrollView {
return imageView;
}
There is my .m code.
#import "ScrollZoomViewController.h"
#interface ScrollZoomViewController () <UIScrollViewDelegate>
#property (weak, nonatomic) IBOutlet UIImageView *imageView;
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#end
#implementation ScrollZoomViewController
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
NSLog(#"zooming");
return self.imageView;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView.minimumZoomScale = 0.5f;
self.scrollView.maximumZoomScale = 5.0f;
self.scrollView.delegate = self;
self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
self.scrollView.contentSize = self.imageView.image.size;
}
I'm using Xcode 4.5 and iOS 6.0 and AutoLayout closed.
Image can scroll but can't zoom. Is this because iOS 6?
You need set value for zoomScale property so as to start zooming.
Add following line after setting contentSize of scrollView.
self.scrollView.zoomScale = minimumZoomScale;
Try to remove this code:
self.scrollView.contentSize = self.imageView.image.size;
and add more content size, instead of image size.
Ex: you need to add like self.scrollView.contentSize = CGSizeMake(1770, 2346);
Hope this will solve.