Scrollview paging with image showing slightly left or right (begin / end) - ios

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);
}

Related

Cannot pan UIScrollView after zooming

I've programatically created a UIScrollView using the following code:
.h:
#interface MainController : UIViewController <UIScrollViewDelegate>
#property (nonatomic, retain) UIScrollView *mainScrollView;
#property (nonatomic, retain) UIView *mainView;
.m:
- (void) initVariables
{
// Setters
screenRect = [[UIScreen mainScreen] bounds];
screenWidth = screenRect.size.width;
screenHeight = screenRect.size.height;
// Alloc-init methods
mainScrollView = [[UIScrollView alloc] init];
mainView = [[UIView alloc] init];
}
- (void) setUpScrollView
{
mainScrollView.frame = CGRectMake(0.0f, 0.0f, screenWidth, screenHeight);
mainScrollView.contentSize = CGSizeMake(screenWidth*2, screenHeight*2);
mainScrollView.minimumZoomScale = 1.0;
mainScrollView.maximumZoomScale = 4.0;
mainScrollView.backgroundColor = [UIColor blueColor];
mainScrollView.scrollEnabled = YES;
mainScrollView.delegate = self;
mainView.frame = CGRectMake((screenWidth/2) - 25.0f, (screenHeight/2) - 25.0f, 50.0f, 50.0f);
UIImageView *testImageView = [[UIImageView alloc] init];
testImageView.backgroundColor = [UIColor redColor];
testImageView.frame = CGRectMake(0.0f, 0.0f, 50.0f, 50.0f);
// Add subviews
[self.view addSubview:mainScrollView];
[mainScrollView addSubview:mainView];
[mainView addSubview:testImageView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return mainView;
}
The zoom works well now. However, I can only pan when the UIScrollView is at the minimum zoom. All other times, when I pinch-zoom in, when I release my fingers the UIView shifts slightly off-centre, despite being centred when I was zooming, and I can no longer pan the UIScrollView.
Also, after zooming in, if I zoom back out again to minimum zoom, I still cannot pan.
TL;DR - In other words, UIScrollView's pan only before using the pinch zoom feature, after which it breaks.
How can I prevent this from happening, and allow the UIScrollView's pan to always be enabled? All help appreciated.
Try to add another view in scrollView with same size of screen and then add mainView and imageView. It may solve your proble. :)

How to change the size of your custom UIView in iOS

I want to use custom view as a toolbar at bottom of my view controller and then design it in my own way. I am using UIView for this purpose and then add as a subview. Somehow, the height of my custom tool bar is not changing. Even, I turned off constraints for it but somehow, it auto adjusts. How can, I do this? Below is my code snippet.
//CameraActivity.h class
#interface CameraActivity : UIViewController
//Custom UIView.
#property (nonatomic, strong) UIView *toolbar;
#end
//CameraActivity.m class, in viewDidLoad.
_toolbar.translatesAutoresizingMaskIntoConstraints = YES;
[self.view removeConstraints:self.view.constraints];
[_toolbar removeConstraints:_toolbar.constraints];
CGRect frame = CGRectMake(0, [[UIScreen mainScreen] bounds].size.height - 44, [[UIScreen mainScreen] bounds].size.width, 150);
_toolbar = [[UIView alloc]initWithFrame:frame];
[_toolbar setBackgroundColor:[UIColor colorWithRed:116.0/255.0 green:174.0/255.0 blue:220.0/255.0 alpha:0.75]];
[self.view addSubview:_toolbar];
Make an outlet of your UIView height constraint. Then try to change its height based on device's type as follow:-
In ViewController.h file, Create an outlet:-
#property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewHeightConstraint;
In ViewController.m file, Change your height's constraint like this:-
if (Device is iPhone 4s) {
viewHeightConstraint.constant = 30.0; //Your desired height
}
else if (Device is iPhone 5 || Device is iPhone 5s || Device is iPhone 5c) {
viewHeightConstraint.constant = 40.0; //Your desired height
}
else if (Device is iPhone 6) {
viewHeightConstraint.constant = 50.0; //Your desired height
}
else if (Device is iPhone 6 Plus) {
viewHeightConstraint.constant = 60.0; //Your desired height
}
Happy Coding!!
Before creating (i.e _toolbar = [[UIView alloc]initWithFrame:frame];) your view toolbar, using it will cause this issue.
Hence, change the line order to this :
CGRect frame = CGRectMake(0, [[UIScreen mainScreen] bounds].size.height - 44, [[UIScreen mainScreen] bounds].size.width, 150);
_toolbar = [[UIView alloc]initWithFrame:frame];
_toolbar.translatesAutoresizingMaskIntoConstraints = YES;
[self.view removeConstraints:self.view.constraints];
[_toolbar removeConstraints:_toolbar.constraints];
[_toolbar setBackgroundColor:[UIColor colorWithRed:116.0/255.0 green:174.0/255.0 blue:220.0/255.0 alpha:0.75]];
[self.view addSubview:_toolbar];
Also I suggest setting frame must done in
-(void) viewDidLayoutSubviews beacause viewDidLoad is not a good place for this! so,
-(void) viewDidLayoutSubviews
{
_toolbar.frame = CGRectMake(0, [[UIScreen mainScreen] bounds].size.height - 44, [[UIScreen mainScreen] bounds].size.width, 150);
}
I added UIView from objects library instead of adding it programmatically and then sets its width according to screen width of device and height to constant. Also assigned some constraints solve my problem.
//CameraActivity.h class
#interface CameraActivity : UIViewController
//This time not custom UIView but IBOutlet.
#property (nonatomic, strong) IBOutlet UIView *toolbar;
#end
//CameraActivity.m class
#import "CameraActivity.h"
#implementation CameraActivity
-(void)viewDidLoad
{
[super viewDidLoad];
//Get your device screen width.
CGFloat width = [UIScreen mainScreen].bounds.size.width;
_toolbar.frame = CGRectMake(0, 44, width, 150);
}

Laying out equal sections on a view in xcode

Im wanting to setup my view within the storyboard so it lays out like the above image. The view has 2 seperate sections when landscape the share 50/50 horizontally then when portrait it rotates to 50/50 vertically.
What is the most appropriate way to set this up inside xcode interface builder? Can I use constraints to achieve this? This will need to be designed so it will scale to ipad and iphone as well.
I build a project to test. It works, check the screenshot
iPad in Portrait
iPad in Landscape
It can't be done in Storyboard, because iPad only got one layout in Storyboard.
but it's very simple to achieve what you need programmatically .
//ViewController.m
#import "ViewController.h"
#interface ViewController ()
#property (nonatomic, strong) UIView *firstView;
#property (nonatomic, strong) UIView *secondView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.firstView = [[UIView alloc] initWithFrame:CGRectZero];
self.firstView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.firstView];
self.secondView = [[UIView alloc] initWithFrame:CGRectZero];
self.secondView.backgroundColor = [UIColor blueColor];
[self.view addSubview:self.secondView];
[self setupSubViewLayout];
}
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
[self setupSubViewLayout];
}
- (void)setupSubViewLayout {
CGFloat viewWidth = self.view.frame.size.width;
CGFloat viewHeight = self.view.frame.size.height;
CGRect firstRect;
CGRect secondRect;
if (viewWidth > viewHeight) {
firstRect = CGRectMake(0, 0, viewWidth/2.0, viewHeight);
secondRect = CGRectMake(viewWidth/2.0, 0, viewWidth/2.0, viewHeight);
}else {
firstRect = CGRectMake(0, 0, viewWidth, viewHeight/2.0);
secondRect = CGRectMake(0, viewHeight/2.0, viewWidth, viewHeight/2.0);
}
self.firstView.frame = firstRect;
self.secondView.frame = secondRect;
}

Changing UIImageView height dynamically while scrolling

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.

What scrollview and imageview settings should be used to display a zoomable picture in iOS?

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;
}

Resources