Moving Images on a UIScrollView

[Missing.Matter]

Hi all. I've recently started developing an app, and these forums have been very helpful in answering my questions.

I'll start off with my question and then give some detail: I need to know how to move subViews of a UIScrollView.

The app I'm writing is a strategy board game with a very large board, so I'm displaying it in a UIScrollView to allow scaling and translation.

Then I add game tokens as a subview of the board, so they scale and translate with it.

So in pseudocode, my viewDidLoad looks something like this:

- (void)viewDidLoad {
 [[self view] addSubview:UIScrollView];
 [[self UIScrollView] addSubview:gameBoard];
 [gameBoard addSubView:tokens];
}

Where the gameBoard and the tokens are UIImageViews.

So of course what I want to do is move tokens on the gameboard, but I'm having trouble figuring out how and were to implement this behavior, since the board itself wants to scroll.

I've looked at the Apple example in the ScrollView Suite called "autoscroll" and there seems to be some behavior there I want, but that particular example is beyond my experience level and I'm not sure where exactly the functionality is in the code.

Any examples or guidance is appreciated in helping me answer this question.

[fest]

Originally Posted by Missing.Matter

Hi all. I've recently started developing an app, and these forums have been very helpful in answering my questions.

I'll start off with my question and then give some detail: I need to know how to move subViews of a UIScrollView.

The app I'm writing is a strategy board game with a very large board, so I'm displaying it in a UIScrollView to allow scaling and translation.

Then I add game tokens as a subview of the board, so they scale and translate with it.

So in pseudocode, my viewDidLoad looks something like this:

- (void)viewDidLoad {
 [[self view] addSubview:UIScrollView];
 [[self UIScrollView] addSubview:gameBoard];
 [gameBoard addSubView:tokens];
}

Where the gameBoard and the tokens are UIImageViews.

So of course what I want to do is move tokens on the gameboard, but I'm having trouble figuring out how and were to implement this behavior, since the board itself wants to scroll.

I've looked at the Apple example in the ScrollView Suite called "autoscroll" and there seems to be some behavior there I want, but that particular example is beyond my experience level and I'm not sure where exactly the functionality is in the code.

Any examples or guidance is appreciated in helping me answer this question.

You have to add the stuff to the scrollview, then you can move them, I did mess about with this in my second app, but after getting memory issues from other aspects the moving didn't work for me any more.
Looking at your code tho...you don't seem to be assigning the scrollview as an object. Try adding it in your header:

IBOutlet UIScrollView *scrollView;

and you have to assign it a property:

@property (nonatomic, retain) UIView *scrollView;

then synthesize it:

@synthesize scrollView;

I would strongly recommend you take a look at some youtube tutorials on setting up scrollviews tho, cos to me, your code just looks wrong.

[Missing.Matter]

Originally Posted by fest

You have to add the stuff to the scrollview, then you can move them, I did mess about with this in my second app, but after getting memory issues from other aspects the moving didn't work for me any more.

Looking at your code tho...you don't seem to be assigning the scrollview as an object. Try adding it in your header:

I would strongly recommend you take a look at some youtube tutorials on setting up scrollviews tho, cos to me, your code just looks wrong.

Thanks for the response!

What I provided was just some pseudocode to show how the subview hierarchy. My actual code is based from the example in this thread:

http://www.iphonedevsdk.com/forum/ip...w-uiimage.html

Here is the actual code:

RootViewController.h

@interface RootViewController : UIViewController <UIScrollViewDelegate> {

            UIScrollView *mainScroller;
	UIImageView *gameBoard;
	NSMutableArray *touchPoints;
}

-(void)showDetail:(id)sender;
-(void)addTokenToMapAtPoint:(CGPoint)p withTag:(NSInteger)t;

@property (nonatomic, retain) UIScrollView *mainScroller;
@property (nonatomic, retain)UIImageView *gameBoard;
@property (nonatomic, retain)NSMutableArray *touchPoints;

@end

RootViewController.m

#import "RootViewController.h"

@implementation RootViewController
@synthesize mainScroller,mainImage,touchPoints;

- (void)viewDidLoad {

            [super viewDidLoad];
	UIImage *map = [UIImage imageNamed:@"6n.jpg"];

             //Add scrollview to view
	[self setMainScroller:[[UIScrollView alloc] init]];
	[[self mainScroller] setFrame:CGRectMake(0, 0, 320, 416)];
	[[self mainScroller] setContentSize:CGSizeMake(map.size.width, map.size.height)];
	[[self mainScroller] setDelegate:self];
	[[self view] addSubview:mainScroller];	

             //Add map to scrollview
	[self setMainImage:[[UIImageView alloc] init]];
	[[self mainImage] setFrame:CGRectMake(0, 0, map.size.width, map.size.height)];
	[[self mainImage] setImage:map];
	[[self mainImage] setUserInteractionEnabled:YES];
	[[self mainScroller] addSubview:mainImage];	

             //Add Tokens
	for (NSInteger i=1; i<=5; i++){
		[self addTokenToMapAtPoint:CGPointMake(100*i, 30*i) withTag:i];
	}
}

-(void)addTokenToMapAtPoint:(CGPoint)p withTag:(NSInteger)t{

            UIImageView *tokenView = [[UIImageView alloc] init];
	UIImage *token = [UIImage imageNamed:@"Token.png"];
	[tokenView setImage:token];
	[tokenView setFrame:CGRectMake(p.x, p.y, 50, 50)];
	[tokenView setTag:t];
	[mainImage addSubview:tokenView];
	[tokenView release];
}

Now, this code works fine. The gameBoard loads to the scrollView and it translates when touched. The tokens also are added to the gameBoard and translate with it.

So, what I would like to do now is tap and drag those tokens on the gameboard (like moving a piece in checkers), without also dragging the map.

This is done in the "Autoscroll" example by Apple, where you can rearrange the posters, but I'm having trouble following the code since the example is much more involved and I'm still very new to this.

You said "You have to add the stuff to the scrollview, then you can move them." Do you mean, add each token as a subview of the UIScrollView? If I did this, wouldn't they move independently of the gameBoard?

Thanks for your help, and I hope this clarifies my question.

EDIT: I've answered my own question. For anyone reading this in the future, what you have to do is subclass UIView and tell it to handle all the touch events. Add an instance of that class as a subview of the scrollView, and set the scroll view property to not cancel touch events. You should be good to go.