I am creating a customview which is a subclass of UIScrollView. I am adding UIButtons inside UIScrollView dynamically along with images and actions. But scrollview is not scrolling horizontally with buttons. I know this topic is discussed many times on SO. I tried all posts posted on SO, but not getting expected result. Any suggestion about where i am going wrong will be helpful.
MyCustomView.h
#interface MyCustomView : UIScrollView
#property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
+ (id)customView;
#end
MyCustomView.m
#implementation MyCustomView
#synthesize scrollView;
+ (id)customView
{
MyCustomView *customView = [[[NSBundle mainBundle] loadNibNamed:#"MyCustomView" owner:nil options:nil] lastObject];
if ([customView isKindOfClass:[MyCustomView class]])
return customView;
else
return nil;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
- (void)drawRect:(CGRect)rect
{
[self setupHorizontalScrollView];
}
- (void)setupHorizontalScrollView
{
//scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor blueColor]];
[scrollView setCanCancelContentTouches:YES];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = NO;
scrollView.scrollEnabled = YES;
//scrollView.pagingEnabled = YES;
CGFloat cx = 0;
NSArray *buttons = #[#{#"Tag":#1,#"Image":[UIImage imageNamed:#"borderImage1.png"]},
#{#"Tag":#2,#"Image":[UIImage imageNamed:#"borderImage2.png"]},
#{#"Tag":#3,#"Image":[UIImage imageNamed:#"borderImage3.png"]},
#{#"Tag":#4,#"Image":[UIImage imageNamed:#"borderImage4.png"]},
#{#"Tag":#1,#"Image":[UIImage imageNamed:#"borderImage1.png"]},
#{#"Tag":#2,#"Image":[UIImage imageNamed:#"borderImage2.png"]},
#{#"Tag":#3,#"Image":[UIImage imageNamed:#"borderImage3.png"]},
#{#"Tag":#4,#"Image":[UIImage imageNamed:#"borderImage4.png"]},
#{#"Tag":#1,#"Image":[UIImage imageNamed:#"borderImage1.png"]}
];
// CGRect frame = CGRectMake(0.0f, 0.0f, 50.0f, 30.0f);
for (NSDictionary *dict in buttons)
{
UIButton *button =[UIButton buttonWithType:UIButtonTypeRoundedRect];
CGRect rect = button.frame;
rect.size.height = 40;
rect.size.width = 40;
rect.origin.x = cx;
rect.origin.y = 0;
button.frame = rect;
button.tag = [dict[#"Tag"] integerValue];
[button setImage:dict[#"Image"]
forState:UIControlStateNormal];
// [button addTarget:self action:#selector(buttonAction:)
// forControlEvents:UIControlEventTouchUpInside];
[self.scrollView addSubview:button];
//frame.origin.x+=frame.size.width+20.0f;
cx += button.frame.size.width+5;
}
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
#end
I went through below SO links, but didn't get solution.
LINK1 LINK2LINK3 LINK4
To be able to scroll you need to keep a view over scrollview that goes out of the bound of the screen. So drag a view and enlarge it beyong the device bounds so that it would be able to hold your subviews.
Its better to use UICollectionView for this kind of a problem. It is easier to implement and also will help you do all necessary manipulations.
Your MyCustomView is a subClass of UIScrollView. So you don't need to add UIScrollView property to your class. Delete scrollView property and replace all self.scrollView with self
Related
I am trying to add header and footer (both of them as UIViews) but for some reason my footer sticks to the bottom, I'm using the KVO method for watching my content size.
I'm presenting here the method where I think the problem is:
- (void)updateLayout
{
// Update the frame of the header view so that it scrolls with the webview content
CGRect newHeaderFrame = self.headerView.frame;
CGRect newFooterFrame = self.footerView.frame;
newHeaderFrame.origin.y = -CGRectGetMinY([self.webView convertRect:self.innerHeaderView.frame toView:self.webView.scrollView]);
newFooterFrame.origin.y = self.webView.scrollView.contentSize.height;
[self.headerView setFrame:newHeaderFrame];
[self.footerView setFrame:newFooterFrame];
if ([self didTapToFullScreen])
{
// The delegate was already called in this case, in the tap gesture callback method
return;
}
BOOL fullScreen = (newHeaderFrame.origin.y < 0);
if (([self isZooming] && [self didSwitchToFullScreen]) || (fullScreen == [self isFullScreen]))
{
return;
}
[self setSwitchToFullScreen:fullScreen];
[self setFullScreen:fullScreen];
// Call the delegate for the full screen
[self.fullScreenDelegate emailView:self showFullScreen:fullScreen];
}
Here's the full project
How I can place the footer to the bottom of the UIWebView ?
You can set the views on UIWebView scroll view, and fiddle with the offsets.
#interface ViewController ()<UIWebViewDelegate>
#property (weak, nonatomic) IBOutlet UIWebView *webView;
#property (nonatomic, strong) UIView *headerView;
#property (nonatomic,strong) UIView *footerView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.headerView = [[UIView alloc] initWithFrame:CGRectMake(0, -100, [UIScreen mainScreen].bounds.size.height, 100)];
self.headerView.backgroundColor = [UIColor blueColor];
self.footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
self.footerView.backgroundColor = [UIColor yellowColor];
NSString *urlText = #"http://stackoverflow.com/questions/15921974/how-to-load-url-on-launch-in-a-webview-osx-project";
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:urlText]]];
self.webView.delegate = self;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - WebView delegate
-(void) webViewDidFinishLoad:(UIWebView *)webView {
self.webView.scrollView.contentInset = UIEdgeInsetsMake(100.0,0.0,100.0,0.0);
if(![self.headerView superview])
{
[webView.scrollView addSubview:self.headerView];
[webView.scrollView bringSubviewToFront:self.headerView];
}
NSString *result = [webView stringByEvaluatingJavaScriptFromString:#"document.body.offsetHeight;"];
NSInteger height = [result integerValue];
self.footerView.frame = CGRectMake(0, height, [UIScreen mainScreen].bounds.size.height, 100);
if(![self.footerView superview])
{
[webView.scrollView addSubview:self.footerView];
[webView.scrollView bringSubviewToFront:self.footerView];
}
[self.webView.scrollView setContentOffset:
CGPointMake(0, -self.webView.scrollView.contentInset.top) animated:NO];
}
#end
Another option would be to add top padding to the HTML ("margin-top:100px") and then the header view would not be in minus offset.
I have a UIView that I am using as a simple onboarding view. I simply shows n images, that the user can swipe through.
The only image that loads is the very first image "OnBoard-1". The other images are there when I debug the what is being added to the image view.
What am I doing wrong?
.h
#import <UIKit/UIKit.h>
#interface OnBoardingView : UIView
- (void)setImages:(NSArray *)newImages;
#end
Here is the .m file
#import "OnBoardingView.h"
#interface OnBoardingView () <UIScrollViewDelegate>
{
UIPageControl *pageControl;
NSArray *contentImages;
}
#property (nonatomic, retain) UIPageControl *pageControl;
#property (nonatomic, retain) NSArray *contentImages;
#end
#implementation OnBoardingView
#synthesize pageControl;
#synthesize contentImages;
- (id) initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) { }
return self;
}
#pragma mark - Override contentImages setter
- (void)setImages:(NSArray *)newImages {
if (newImages != self.contentImages) {
self.contentImages = newImages;
[self setup];
}
}
#pragma mark - Carousel setup
- (void)setup {
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
[scrollView setDelegate:self];
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setPagingEnabled:YES];
[scrollView setBounces:NO];
CGSize scrollViewSize = scrollView.frame.size;
for (NSInteger i = 0; i < [self.contentImages count]; i++) {
CGRect slideRect = CGRectMake(scrollViewSize.width * i, 0, scrollViewSize.width, scrollViewSize.height);
UIView *slide = [[UIView alloc] initWithFrame:slideRect];
[slide setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0]];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.frame];
[imageView setImage:[UIImage imageNamed:[self.contentImages objectAtIndex:i]]];
NSLog(#"Image named: %#", [self.contentImages objectAtIndex:i]);
[slide addSubview:imageView];
[scrollView addSubview:slide];
}
UIPageControl *tempPageControll = [[UIPageControl alloc] initWithFrame:CGRectMake(0, scrollViewSize.height - 20, scrollViewSize.width, 20)];
[self setPageControl:tempPageControll];
[self.pageControl setNumberOfPages:[self.contentImages count]];
[scrollView setContentSize:CGSizeMake(scrollViewSize.width * [self.contentImages count], scrollViewSize.height)];
[self addSubview:scrollView];
[self addSubview:self.pageControl];
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat pageWidth = scrollView.frame.size.width;
int page = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
[self.pageControl setCurrentPage:page];
}
#end
You initialise the imageView with the frame of the scrollView, that's in any case not right and may be the cause of your problem.
BTW:
Your property handling looks a bit strange (why the synthesizing instead of just using a normal property only?), and why do you compare the arrays by pointer (newImages != self.contentImages)?
If you want to show the images in paging directly you can assign the number of pages count.And apply the swipe gesture(left and right) to imageview.And based on left and right swipe,you can change the image of imageview.
I am sublassing either an UIImageView or UIView for generating simple color tiles with digits. If I am using UIImageView, I use initWithImage method. If I use UIView, the method initWithFrame is being used.
Either red square image or programmatically generated red view is used for initialization.
The problem can be seen on two screenshots: when initWithImage is being used - everything works fine. If initWithFrame method is being used, I am ending with multiple white views without any information created in even order with normal views. All the screenshots and code attached.
This how it looks when initializing using initWithImage:
- (id)initWithImage:(UIImage *)image {
self = [super initWithImage:image];
if (self) {
//Some non-important, label-related stuff.
[self addSubview:self.numberLabel];
}
return self;
}
And this is how it looks with initWithFrame:
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.redView = [self redViewWithFrame:frame];
[self addSubview:self.redView];
//label-related stuff
}
return self;
}
- (UIView *)redViewWithFrame:(CGRect)frame {
UIView *view = [[UIView alloc] initWithFrame:frame];
view.backgroundColor = [UIColor redColor];
view.alpha = 1;
return view;
}
And the for-loop, calling these initializers from another class (UIScrollView subclass). The label value is being set after the view had been initialized.
- (void)setNumberOfBlocks:(NSInteger)numberOfBlocks {
_blocks = [[NSMutableArray alloc] init];
CGSize contentSize;
contentSize.width = BLOCK_WIDTH * (numberOfBlocks);
contentSize.height = BLOCK_HEIGHT;
self.contentSize = contentSize;
for (int i = 0; i < numberOfBlocks; i++) {
CGFloat totalWidth = BLOCK_WIDTH * i;
CGRect frame = CGRectMake(0, 0, BLOCK_WIDTH, BLOCK_HEIGHT);
frame.origin.x = totalWidth;
BlockView *view = [[BlockView alloc] initWithImage:[UIImage imageNamed:#"block.png"]];
OR!!!
BlockView *view = [[BlockView alloc] initWithFrame:frame];
view.frame = frame;
NSString *number = [NSString stringWithFormat:#"%ld", (long)i + 1];
view.numberLabel.text = number;
[self addSubview:view];
[_blocks addObject:view];
}
}
Googling gave me the impression that this is very common problem, but I haven't found any solution how to beat this. Moreover, I still do not understand, why numbers are in totally right order, the only problem is view position.
The problem is that you're setting the frame of the red view to the superview's frame instead of its bounds. Since the red view is a subview of the BlockView, its frame needs to be relative to its superview, which you get with bounds (its not clear why you even need the red view, as opposed to setting the background color of the block view to red).
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.redView = [self redViewWithFrame:self.bounds];
[self addSubview:self.redView];
//label-related stuff
}
return self;
}
I think you should set the frame origin to (0,0) in redViewWithFrame in ordre to hâve superposed views
I'm trying to figure out an approach to build something like the image below, which is a list of items that when a section is clicked slides out content. It's a really common UX on most websites and what not. My idea is to have each gray box (button) slide out a UIView containing some other items. I'm still new to iOS development but I'm struggling to find how you can animate a UIView to slide down and push the content below it down as well. Hoping some one can give me a good starting point or point to some info outside the realm of the apple docs.
Thanks!
So if you just have a few views, I would not recommend the UITableView approach, since it is not so easy to customize with animations and table views usually want to fill the whole screen with cells. Instead write a expandable UIView subclass that has the desired two states. Add a method to switch between extended and collapsed state. On expanding/collapsing adjust their positions so that they always have enough space.
I provide you an example of views adjusting their frames. I guess it should be easy to do the same with auto layout constraints: give the views a fixed height constraint and change this on collapsing/expanding. The same way set the constraints between the views to be 0 so that they are stacked on top of each other.
Expandable View:
#interface ExpandingView(){
UIView *_expandedView;
UIView *_seperatorView;
BOOL _expanded;
}
#end
#implementation ExpandingView
- (id)init
{
self = [super initWithFrame:CGRectMake(15, 0, 290, 50)];
if (self) {
_expanded = NO;
self.clipsToBounds = YES;
_headerView = [[UIView alloc] initWithFrame:self.bounds];
_headerView.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1];
[self addSubview:_headerView];
_seperatorView = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height-1, self.bounds.size.width, 1)];
_seperatorView.backgroundColor = [UIColor lightGrayColor];
[self addSubview:_seperatorView];
_expandedView = [[UIView alloc] initWithFrame:CGRectOffset(self.bounds, 0, self.bounds.size.height)];
_expandedView.backgroundColor = [UIColor blueColor];
[self addSubview:_expandedView];
}
return self;
}
- (void)layoutSubviews{
[self adjustLayout];
}
- (void)adjustLayout{
_headerView.frame = CGRectMake(0, 0, self.bounds.size.width, 50);
_seperatorView.frame = CGRectMake(0, 49, self.bounds.size.width, 1);
_expandedView.frame = CGRectMake(0, 50, self.bounds.size.width, self.bounds.size.height-50);
}
- (void)toggleExpandedState{
_expanded = !_expanded;
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, _expanded?200:50);
[self adjustLayout];
}
#end
ViewController:
#interface ExpandingViewController (){
NSArray *_expandingViews;
}
#end
#implementation ExpandingViewController
- (void)viewDidLoad
{
[super viewDidLoad];
_expandingViews = #[
[[ExpandingView alloc] init],
[[ExpandingView alloc] init],
[[ExpandingView alloc] init],
];
for(ExpandingView *view in _expandingViews){
[view.headerView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(expandingViewTapped:)]];
[self.view addSubview:view];
}
}
- (void)viewWillLayoutSubviews{
int y = 100;
for(ExpandingView *view in _expandingViews){
view.frame = CGRectOffset(view.bounds, (CGRectGetWidth(self.view.bounds)-CGRectGetWidth(view.bounds))/2, y);
y+=view.frame.size.height;
}
}
- (void)expandingViewTapped:(UITapGestureRecognizer*)tapper{
ExpandingView *view = (ExpandingView*)tapper.view.superview;
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:0 animations:^{
[view toggleExpandedState];
[self.view layoutIfNeeded];
} completion:nil];
}
I have a UIScrollView with a UIView inside it, in side the UIView I made a button to add textLabels to it.
and ideally I would want a really big canvas and be able to put text on it and pan and zoom around. however with the UIScrollView it does zoom, but does not pan at all
It seems that when I remove the UIView that i add inside the UIScrollView it works fine.
heres viewDidLoad:
[super viewDidLoad];
CGFloat mainViewWidth = 700;
CGFloat mainViewHeight = 500;
//scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * kNumberOfPages, scrollView.frame.size.height * kNumberOfPages);
//self.mainScrollView.bounds = CGRectMake(0., 0., 3000, 3000);
self.mainScrollView.scrollsToTop = NO;
self.mainScrollView.delegate = self;
self.mainScrollView.maximumZoomScale = 50.;
self.mainScrollView.minimumZoomScale = .1;
self.mainScrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
self.mainView = [[UIView alloc] initWithFrame: CGRectMake(0, 0, mainViewWidth, mainViewHeight)];
[self.mainView setUserInteractionEnabled:NO];
self.mainView.backgroundColor = [[UIColor alloc] initWithRed:0.82110049709463495
green:1
blue:0.95704295882687884
alpha:1];
[self.mainScrollView setContentSize:CGSizeMake(5000, 5000)];
[self.mainScrollView insertSubview:self.mainView atIndex:0];
Edit:
Heres the all I have for UIScrollViewDelegate
#pragma mark - Scroll View Delegate
- (void)scrollViewDidScroll:(UIScrollView *)sender {
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
//
return self.mainView;
}
- (void)scrollViewDidEndZooming:(UIScrollView *)zoomedScrollView withView:(UIView *)view atScale:(float)scale
{
}
I just went through this exact same dilemma.
My UIScrollView exists within the storyboard, and if I add a UIView (containerView) within that storyboard to the UIScrollView, the image fails to pan. And all sorts of other centering weirdness occurs too.
But if I do it through code:
// Set up the image we want to scroll & zoom
UIImage *image = [UIImage imageNamed:#"plan-150ppi.jpg"];
self.imageView = [[UIImageView alloc] initWithImage:image];
self.containerView = [[UIView alloc] initWithFrame:self.imageView.frame];
[self.containerView addSubview:self.imageView];
[self.scrollView addSubview:self.containerView];
// Tell the scroll view the size of the contents
self.scrollView.contentSize = self.containerView.frame.size;
... then it works just fine.