How to place a PageControl in ScrollView having multiple images? - ios

I have a scroll view which contain a view and view have five images in want a pagecontrol to show the navigation status but the page control hides behind the images. I tried everything searched internet but cant fined anything.
Implementation.h
#interface ScrollSecondViewController : UIViewController
{
IBOutlet UIView *scrContentSizeView;
IBOutlet UIScrollView * scrollView;
}
#property (nonatomic, weak) IBOutlet UIPageControl *pageControl;
#end
Implementation.m
- (void)viewDidLoad {
[super viewDidLoad];
[self.navigationItem setTitle:#"Scroll View"];
scrollView.contentSize = CGSizeMake(scrContentSizeView.frame.size.width, scrollView.frame.size.height);
scrollView.clipsToBounds = YES;
[scrollView setContentOffset:CGPointMake(750, 0) animated:YES];
// Do any additional setup after loading the view.
}
- (void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
_pageControl.currentPage = scrollView.contentOffset.x / scrollView.frame.size.width;
}

In the viewDidLoad method you should add the following code as the last method you call after adding all subviews.
- (void)viewDidLoad {
[super viewDidLoad];
//do what u want
//this should be last
[self.view bringSubviewToFront:self.pageControl];
}

Related

When using JSQMessagesViewController as detailView in UISplitviewCOntroller, KeyBoardToolBar needs to appear in DetailViewController only

When using JSQMessagesViewController as detailView in UISplitViewController, KeyBoardToolBar needs to appear in DetailViewController only
late answer...
if u want to reduce the inputToolbar you need to create a subclass of JSQMessagesToolbarContentView and provide your own view for the tool bar's content view.
below i am giving the sample example, create a subcalss of JSQMessagesToolbarContentView name it as JSQMessagesToolbarContentView_custom in the subcalss add below code,
#import "JSQMessagesToolbarContentView.h"
#interface JSQMessagesToolbarContentView_custom : JSQMessagesToolbarContentView
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *holderViewLeadingConstraint;
#end
and in JSQMessagesToolbarContentView_custom.m file,
#import "UIView+JSQMessages.h"
#import "JSQMessagesToolbarContentView_custom.h"
#implementation JSQMessagesToolbarContentView_custom
+ (UINib *)nib
{
return [UINib nibWithNibName:NSStringFromClass([JSQMessagesToolbarContentView_custom class])
bundle:[NSBundle bundleForClass:[JSQMessagesToolbarContentView_custom class]]];
}
#pragma mark - Initialization
- (void)awakeFromNib
{
[super awakeFromNib];
[self setTranslatesAutoresizingMaskIntoConstraints:NO];
self.backgroundColor = [UIColor clearColor];
}
//below method will place the contentview to desired position
- (void)layoutSubviews
{
[super layoutSubviews];
self.holderViewLeadingConstraint.constant = 320;
}
#pragma mark - Setters
- (void)setBackgroundColor:(UIColor *)backgroundColor
{
[super setBackgroundColor:backgroundColor];
self.leftBarButtonContainerView.backgroundColor = backgroundColor;
self.rightBarButtonContainerView.backgroundColor = backgroundColor;
}
- (void)setLeftBarButtonItem:(UIButton *)leftBarButtonItem
{
[super setLeftBarButtonItem:leftBarButtonItem];
}
- (void)setLeftBarButtonItemWidth:(CGFloat)leftBarButtonItemWidth
{
// self.leftBarButtonContainerViewWidthConstraint.constant = leftBarButtonItemWidth;
[self setNeedsUpdateConstraints];
}
- (void)setRightBarButtonItem:(UIButton *)rightBarButtonItem
{
[super setRightBarButtonItem:rightBarButtonItem];
}
- (void)setRightBarButtonItemWidth:(CGFloat)rightBarButtonItemWidth
{
// self.rightBarButtonContainerViewWidthConstraint.constant = rightBarButtonItemWidth;
[self setNeedsUpdateConstraints];
}
- (void)setRightContentPadding:(CGFloat)rightContentPadding
{
// self.rightHorizontalSpacingConstraint.constant = rightContentPadding;
[self setNeedsUpdateConstraints];
}
- (void)setLeftContentPadding:(CGFloat)leftContentPadding
{
// self.leftHorizontalSpacingConstraint.constant = leftContentPadding;
[self setNeedsUpdateConstraints];
}
#pragma mark - UIView overrides
- (void)setNeedsDisplay
{
[super setNeedsDisplay];
[self.textView setNeedsDisplay];
}
//return the custom view that we are going to create next
- (JSQMessagesToolbarContentView_custom *)loadToolbarContentView
{
NSArray *nibViews = [[NSBundle bundleForClass:[JSQMessagesToolbarContentView_custom class]] loadNibNamed:NSStringFromClass([JSQMessagesToolbarContentView_custom class]) owner:nil options:nil];
return nibViews.firstObject;
}
after this you need to create add new .xib file name it as JSQMessagesToolbarContentView_custom.xib this file contains our small content view for the inputToolbar and more importantly set the out let connections as doing the demo example and aslo set the view class name to JSQMessagesToolbarContentView_custom. hear i can only add image of the custom view.
now create a outlet for leading constraint to reduce the size of the content view as give below,
and add the constraints outlet's as given in the demo. so if u add some constrians without modifying the base class it will give error or runtime error so edit the base class also
now go to JSQMessagesToolbarContentView.h and add the blow properties form JSQMessagesToolbarContentView.m just cut and past and make it public.
#interface JSQMessagesToolbarContentView : UIView
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftBarButtonContainerViewWidthConstraint;
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *rightBarButtonContainerViewWidthConstraint;
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftHorizontalSpacingConstraint;
#property (weak, nonatomic) IBOutlet NSLayoutConstraint *rightHorizontalSpacingConstraint;
//...rest of the code
now in the JSQMessagesInputToolbar.m file, in order to make the tool bar transperent for half of the splitview,
- (void)awakeFromNib
{
[super awakeFromNib];
//...rest of the code
[self setBackgroundImage:[UIImage new]//imageNamed:#"topbar"]
forToolbarPosition:UIToolbarPositionAny
barMetrics:UIBarMetricsDefault];
[self setShadowImage:[UIImage new] forToolbarPosition:UIBarPositionAny];
[self setBackgroundColor:[UIColor clearColor]];
}
thats it now run the project, and change the leading constraints constant you see below output,

Multiple UIScrollViews as child view controller's in UIScrollView not scrolling to top

I did search first, and have seen somewhat similar issues, but no definitive answer on how to solve it. The problem I'm having with my app is that I have 3 navigation controllers that are added as child view controllers into a UIScrollView. I originally wanted to use a UIPageViewController instead, but that turned out to be a mess since you can't disable the bouncing on it. For each navigation controller, a tableView controller is embedded within it in storyboard.
viewDidAppear and viewDidDisappear are not called for my child view controllers because their views are added as subviews to the paging scroll view at runtime, and I kindof believe is why I can't figure out how to solve this.
I need each of my table view controller's to respond to the user touching the status bar for the respective tableView to scroll to the top.
Here is the code I'm using for the setup of the app's main scroll view and adding the 3 view controller's views to it:
I appreciate any help offered!
MainViewController.h
#import <UIKit/UIKit.h>
#interface MainViewController : UIViewController <UIScrollViewDelegate>
#end
MainViewController.m:
#import "MainViewController.h"
#interface MainViewController ()
#property (nonatomic, strong) UINavigationController *settings;
#property (nonatomic, strong) UINavigationController *hehTwo;
#property (nonatomic, strong) UINavigationController *hehOne;
#property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
#end
#implementation MainViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.settings = [self.storyboard instantiateViewControllerWithIdentifier:#"Settings"];
self.hehTwo = [self.storyboard instantiateViewControllerWithIdentifier:#"HehTwo"];
self.hehOne = [self.storyboard instantiateViewControllerWithIdentifier:#"HehOne"];
[self addChildViewController:self.settings];
[self addChildViewController:self.hehTwo];
[self addChildViewController:self.hehOne];
CGRect hehTwoFrame = self.hehTwo.view.frame;
hehTwoFrame.origin.x = 320;
self.hehTwo.view.frame = hehTwoFrame;
CGRect hehOneFrame = self.hehOne.view.frame;
hehOneFrame.origin.x = 640;
self.hehOne.view.frame = hehOneFrame;
[self.scrollView addSubview:self.settings.view];
[self.scrollView addSubview:self.hehTwo.view];
[self.scrollView addSubview:self.hehOne.view];
// Setting offset so the farthest right controller is heh One
[self.scrollView setContentOffset:CGPointMake(640,0)];
self.scrollView.delegate = self;
self.scrollView.bounces = NO;
self.scrollView.delaysContentTouches = NO;
self.scrollView.contentSize = CGSizeMake(960, self.view.frame.size.height);
self.scrollView.scrollsToTop = NO;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat width = scrollView.frame.size.width;
NSInteger page = (scrollView.contentOffset.x + (0.5f * width)) / width;
if (page == 0)
{
// Settings
}
else if (page == 1)
{
// Heh Two
}
else
{
// Heh One
}
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
#end
First of all, you need to set self.tableView.scrollsToTop = NO; on HehTwo and HehOne (if these two are initially hidden) in their viewDidLoad implementation.
And now, update this method:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat width = scrollView.frame.size.width;
NSInteger page = (scrollView.contentOffset.x + (0.5f * width)) / width;
if (page == 0)
{
// Settings
((UITableViewController *)self.settings.viewControllers[0]).tableView.scrollsToTop = YES;
((UITableViewController *)self.hehOne.viewControllers[0]).tableView.scrollsToTop = NO;
((UITableViewController *)self.hehTwo.viewControllers[0]).tableView.scrollsToTop = NO;
}
else if (page == 1)
{
// Heh Two
((UITableViewController *)self.settings.viewControllers[0]).tableView.scrollsToTop = NO;
((UITableViewController *)self.hehOne.viewControllers[0]).tableView.scrollsToTop = NO;
((UITableViewController *)self.hehTwo.viewControllers[0]).tableView.scrollsToTop = YES;
}
else
{
// Heh One
((UITableViewController *)self.settings.viewControllers[0]).tableView.scrollsToTop = NO;
((UITableViewController *)self.hehOne.viewControllers[0]).tableView.scrollsToTop = YES;
((UITableViewController *)self.hehTwo.viewControllers[0]).tableView.scrollsToTop = NO;
}
}
That's all! This should fix it.

Add UIViewController as subview of UIScrollView

I am building an app with some scrolling inside. In short, this is my configuration:
1) class_1: a view with a set of elements inside (something similar to camera row) listed by using a collection view
2) class_2: a modal view called by class_1 where I show each singular element selected (from class_1). Inside the same class I have also implemented the horizontal scroll of all the elements
3) class_3: a simple viewcontroller with an imageview inside which will contain the element I will show in class_2
Running my app looks like class_3 is not added as subview of class_2 and all the singular content I try to load are not visible.
Below is my class_2 code
Interface:
#import <UIKit/UIKit.h>
#import "class_3.h"
#interface class_2 : UIViewController
#property (strong, nonatomic) IBOutlet UIPageControl *pageControl;
#property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
#property (weak, nonatomic) NSArray *imageList;
#end
Implementation:
#interface class_2 () {
NSMutableArray *_viewControllers;
}
- (void)loadScrollViewWithImage:(NSUInteger)indexImage;
#end
#implementation class_2
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
// _imageList is passed from class_1 when I call class_2. Contains an array of images
self.pageControl.numberOfPages = [_imageList count];
self.pageControl.currentPage = 0;
// I store inside an array N objects as the number f images I have to show. At the beginning the array has only null objects, then it will contains the views based on the images I have scrolled.
//I am storying my images inside a view because maybe I will show more controls and not just the image. It will be much easier manage them.
_viewControllers = [[NSMutableArray alloc] init];
for (NSUInteger i = 0; i < [_imageList count]; i++) {
[_viewControllers addObject:[NSNull null]];
}
// I set some properties of my scrollview defined as outlet
self.scrollView.frame = CGRectMake(0, 0, 320, 345);
self.scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.scrollView.frame) * [_imageList count], CGRectGetHeight(self.scrollView.frame));
self.scrollView.pagingEnabled = YES;
// this is set to NO, I switched to YES just now for debug (at least I can see how big the area is since there are no images visible)
self.scrollView.showsHorizontalScrollIndicator = YES;
self.scrollView.showsVerticalScrollIndicator = NO;
self.scrollView.scrollsToTop = NO;
self.scrollView.delegate = self;
// for testing now I always take the first and second elements of my array. I load both so when I move from the first image to the second is already there and there is no gap/flashing effect
[self loadScrollViewWithImage:0];
[self loadScrollViewWithImage:1];
}
#pragma mark - Private methods
- (void)loadScrollViewWithImage:(NSUInteger)indexImage {
// I scrolled until the last image, from here I can only go back
if (indexImage >= [_imageList count])
return;
// I replace the placeholder (null) object
class_3 *controller = [_viewControllers objectAtIndex:indexImage];
if ((NSNull *)controller == [NSNull null]) {
controller = [[class_3 alloc] init];
[_viewControllers replaceObjectAtIndex:indexImage withObject:controller];
}
// I add the controller's view to the scroll view - in case this is the first time I'm scrolling this image
if (controller.view.superview == nil) {
// I set my controller frame as the scrollview works as container
CGRect frame = self.scrollView.frame;
frame.origin.x = CGRectGetWidth(frame) * indexImage;
frame.origin.y = 0;
controller.view.frame = frame;
// I finally add my viewcontroller as child of my superview and subview of the scrollview
[self addChildViewController:controller];
[self.scrollView addSubview:controller.view];
[controller didMoveToParentViewController:self];
// I set an image corrisponding with the element selected from class_1
controller.imageView.image = [_imageList objectAtIndex:indexImage]
// I also tried with a fake image...just in case. No one of them is visible
//controller.imageView.image = [UIImage imageNamed:#"tempPhoto"];
}
}
My class_3 is a viewcontroller which hosts only an image view shoulb be populated with the corresponding image selezted before.
The pagecontroller is used to show where I scrolling (letf/right) and how many elements there are. The scrolling is phisically managed with the scrollview.
Here is my class_3 definition
Interface:
#import <UIKit/UIKit.h>
#import "class_3.h"
#interface class_3 : UIViewController
#property (strong, nonatomic) IBOutlet UIImageView *imageView;
#end
Implementation (nothing really impressive)
#import "class_3.h"
#interface class_3 ()
#end
#implementation class_3
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.imageView.image = [UIImage imageNamed:#"tempPhoto"];
}
#end
What am I missing?
Tnx
Your class_3 should be a UIView, instead of a UIViewController, subclass. See here

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

Attempting to incorporate apple's page control example into a storyboard viewcontroller

I have some images I'm trying to load within a scroll view similar to apple's page control example. My app crashes with an error of
'NSInvalidArgumentException', reason: '-[TutorialViewController
loadScrollViewWithPage:]: unrecognized selector sent to instance
0x687d0b0'
I think I understand enough of this that it's telling me that I don't have a method for the selector... but I'm not sure how to fix it! Thank you in advance.
Header File
//TutorialViewController.h
#import
#interface TutorialViewController : UIViewController <UIScrollViewDelegate>
{
// To be used when scrolls originate from the UIPageControl
BOOL pageControlUsed;
int pageNumber;
}
#property (nonatomic, retain) NSArray *iPhoneTutorial;
#property (nonatomic, retain) IBOutlet UIScrollView *scrollView;
#property (nonatomic, retain) IBOutlet UIPageControl *pageControl;
#property (nonatomic, retain) NSMutableArray *viewControllers;
- (IBAction)changePage:(id)sender;
#end
Implementation File
//TutorialViewController.m
#import "TutorialViewController.h"
static NSUInteger kNumberOfPages = 3;
static NSString *NameKey = #"nameKey";
static NSString *ImageKey = #"imageKey";
#interface TutorialViewController (PrivateMethods)
- (void)loadScrollViewWithPage:(int)page;
- (void)scrollViewDidScroll:(UIScrollView *)sender;
#end
#implementation TutorialViewController
#synthesize scrollView, pageControl;
- (void)awakeFromNib
{
// load our data from a plist file inside our app bundle
NSString *path = [[NSBundle mainBundle] pathForResource:#"iPhoneTutorial" ofType:#"plist"];
self.iPhoneTutorial = [NSArray arrayWithContentsOfFile:path];
// view controllers are created lazily
// in the meantime, load the array with placeholders which will be replaced on demand
NSMutableArray *controllers = [[NSMutableArray alloc] init];
for (unsigned i = 0; i < kNumberOfPages; i++)
{
[controllers addObject:[NSNull null]];
}
//self.viewControllers = controllers;
//[controllers release];
// a page is the width of the scroll view
scrollView.pagingEnabled = YES;
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height);
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.scrollsToTop = NO;
scrollView.delegate = self;
pageControl.numberOfPages = kNumberOfPages;
pageControl.currentPage = 0;
// pages are created on demand
// load the visible page
// load the page on either side to avoid flashes when the user starts scrolling
//
[self loadScrollViewWithPage:0];
[self loadScrollViewWithPage:1];
}
// load the view nib and initialize the pageNumber ivar
- (id)initWithPageNumber:(int)page
{
pageNumber = page;
return self;
}
- (void)scrollViewDidScroll:(UIScrollView *)sender
{
// We don't want a "feedback loop" between the UIPageControl and the scroll delegate in
// which a scroll event generated from the user hitting the page control triggers updates from
// the delegate method. We use a boolean to disable the delegate logic when the page control is used.
if (pageControlUsed)
{
// do nothing - the scroll was initiated from the page control, not the user dragging
return;
}
// Switch the indicator when more than 50% of the previous/next page is visible
CGFloat pageWidth = scrollView.frame.size.width;
int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
pageControl.currentPage = page;
// load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
[self loadScrollViewWithPage:page - 1];
[self loadScrollViewWithPage:page];
[self loadScrollViewWithPage:page + 1];
// A possible optimization would be to unload the views+controllers which are no longer visible
}
// At the begin of scroll dragging, reset the boolean used when scrolls originate from the UIPageControl
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
pageControlUsed = NO;
}
// At the end of scroll animation, reset the boolean used when scrolls originate from the UIPageControl
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
pageControlUsed = NO;
}
- (IBAction)changePage:(id)sender
{
int page = pageControl.currentPage;
// load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
[self loadScrollViewWithPage:page - 1];
[self loadScrollViewWithPage:page];
[self loadScrollViewWithPage:page + 1];
// update the scroll view to the appropriate page
CGRect frame = scrollView.frame;
frame.origin.x = frame.size.width * page;
frame.origin.y = 0;
[scrollView scrollRectToVisible:frame animated:YES];
// Set the boolean used when scrolls originate from the UIPageControl. See scrollViewDidScroll: above.
pageControlUsed = YES;
}
- (void)viewDidLoad
{
// Do any additional setup after loading the view, typically from a nib.
[super viewDidLoad];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
You have to add an
- (void)loadScrollViewWithPage:(int)page
method where you add your view
like
switch(page) {
case 0:
myView1 = [[MyView1ViewController alloc] initWithNibName:#"MyView1ViewController" bundle:nil];
[scrollView addSubview: myViewPage1.view];
break;
}
But the Apple Demo "PageControl" has such a method in File PhoneContentViewController.m

Resources