I am working on a small game, in which the user can drag rows and columns of images to solve a puzzle.
The puzzle does not use the whole screen, the "puzzle area" is in a rectangle area from 0,160 to 320,480.
Now, if the user drags a column of the images up, the top image in that column would be displayed "out of" that puzzle area. How could I only have that portion of the image shown, that remains within the puzzle area. Like not showing the whole 50x50 Pixel of the image, but only the lower 40x50 Pixel etc.?
You just need to set the frames on your views properly. If your puzzle views frame ends at the (0,160) point on top, any subviews you've added to it; such as the puzzle pieces will be hidden when they move out of the frame.
Hopefully I'm not oversimplifying the problem, but one of the easier ways I can think of working this scenario is by maintaining a proper view structure while moving the puzzle pieces.
i.e. as long as the view on the top half of the screen is higher up on the view hierarchy than the puzzle pieces (you could ensure this by properly maintaining the subviews), the puzzle pieces will be hidden under the top view if they move beneath it.
Is this what you need?
Cheers.
I am just tryin to give u some ideas.. Hope u can implement with that...
First use touchesBegan and touchesMoved methods to detect how much pixels the image has been dragged. Simultaneously u can also move the frame of the image to a new coordinate , hiding a portion of the image....tat is out of puzzle area.....
Hope this helps....
myImageView.frame=CGRectMake(0,0,50,50);
Let the above one be the actual frame. Now u have received the amt of pixels thru which the user has moved the image from touches method. Let it be some y1. To hide a part of the imageview reframe the imageview like this ,
myImageView.frame=CGRectMake(0,-y1,50,50);
negative y1 since u want to move out of the screen..
Hope this helps.
Related
I'm trying to build a custom, reusable UIScrollView that can be added to multiple views. The scroll view is going to be a weight picker. For the life of me, I can't find a decent example for how to implement this neatly or cleanly.
I would love for someone to point me to an existing library or tutorial that shows me how to do this. I've hacked apart a few examples, but so far, nothing is very good or reusable. Please help!!
For what it's worth, I have an image that individual ticks for the weight. So I can select to the tenth of the number (e.g. 160.4). The image has the first tick bold and larger than the remaining 9. I'd like to have the weight/number centered over the large tick. I'll update the points to my label/datasource after scrolling stops.
UPDATE
I need to make this. I have the custom font, background, and ticker image.
I would not do this through an UIScrollView. I think it would be more complex and you would certainly end up having issues when trying to add you custom picker into another scroll view.
What I would do is:
building the picker view by means of a series of CALayers, each one representing a "building block" of your picker view; see attached image:
each building block would represent a specific value by mixing a UILabel (the text) and an image;
use a pan gesture recognizer, or alternatively define touchesBegin/Moved/Ended method to deal with panning;
when a pan is done, you displace the view content to the left or right according to the panning;
when panning, you also add new building blocks to the left or right end of the picker to account for empty areas that would be revealed by the displacement done at point 4.
I think that having a look at another kind of custom control source code would be of great help to you. You would not possibly find your custom picker already implemented, but could get some guidance. Have a look then at cocoa controls.
Hope this helps.
If I were going to implement this, I would create a really wide image that had every weight on it I'd ever need - I would probably create this in code when the app started up. This image is then used as the contentView of your picker. You get all the scrolling features "for free", and you could even update the values shown in the other parts of the view during scrolling (or dragging.
The scrollView is just the area with the tick marks and weight numbers, and resides in a subview above the background, but below the centered vertical line that shows the actual weight.
EDIT: on second thought, forget the image. If you have the code to draw the image, you can do the drawing in a custom UIView. So you get the draw rect, you know the contentOffset, so you can draw just what you need.
Hi all,
The images above are taken from the "Nike Boom" App. I am wondering how to do a magnified effect on the number list as shown in the images. I also want to point out that it is very very smooth animation, so screen capturing certain part of a screen and projected it back on UIView may not work (I tried that)
Thankz in advance,
Pondd
Update:
Hey,
Just so for anyone who might comes across this topic, I've made a simple sample based on Nielsbot's suggestion and posted up on github here
Please feel free to fork it, improve it and pass it on :)
Best,
Pondd
It's done with 2 scroll views, one in front of the other. One scroll view (A) contains the small numbers. The second scroll view (B) contains the zoomed numbers. The frame of (B) is the transparent window. When you scroll (A), you scroll (B) programmatically, but you move it farther than (A). (I.e. if (A) scrolls 10 pixels, you might scroll (B) 20 pixels.)
Make sense?
If you've ever used Convert.app from TapTapTap they use a similar effect.
I trying to figure out how to create a Custom Map like the following:
http://itunes.apple.com/us/app/mall-book-california/id342584415?mt=8
http://www.macworld.com/appguide/app.html?id=541350&expand=false
I just don't know where to start from, do I use UIWebView or MapKit?
Any help will be appreciated.
Thanks
What we did in our app is use a UIImageView on a UIScrollView. You need to take a screenshot of the object you will map on the google-map and precisely draw your overlay over it. Also you need to take the top left coordinate and bottom right coordinate of the screenshot you took from the map. Then put the overlay image inside an imageview, image view on scrollview, and scale your coordinate system on the scrollview with the coordinates you took from the map. Now you can precisely plot POI-s on your overlay. A note: The first thing we did is we overlaid the g-map with custom image view but it was really slow when scrolled, so don't even try it. Good luck with coding.
[EDIT] you take a large screenshot of an area on google map like this
http://www.metacafe.com/watch/1073912/google_maps_hack_how_to_save_large_maps/
I'm building a cell-based game that essentially works like dominoes: you start with one tile in the center, then connect additional tiles to it that can branch out in all directions. I have my game table all set up and working great... now I just need to make it scroll to accommodate the expanding content.
So, this doesn't seem to fit easily into a UIScrollView's built-in behavior. For one thing, cells expand in all directions – potentially going into the negative coordinate space of the UIScrollView. As far as I can tell, UIScrollView does not allow an actual CGRect with size AND origin to be defined for the scrolling content area. It appears you can only define a width and height for the content area that extends from point (0,0). Is this true, or am I missing something?
Assuming my understanding of the content area limitations are correct, how would one ideally handle this problem? My go-to idea would be to shift all subviews into positive coordinate space as the game board expands, then update the ScrollView's contentOffset property to counter the shift and make the transition invisible. I just want to make sure I'm not reinventing an inferior wheel before I start developing this.
Thanks in advance for any and all ideas!
I believe your idea is the good one, every time a tile is added, you may need to adjust your content view in order to be able to center on the tile that just was added.
Hence if this is "backward" (-x or -y) and your on top of your view (or nearly), you'll have to extend your contentView (surely the same way you do for +x, +y) and thus, adjust every of your tiles with the translation you did to your contentView's down-right corner.
Following up... yep, that did it. I set up the display so that it redraws the grid of cells from the upper-left corner. Whenever a new row or column of cells is added to the top or the left, the UIScrollView's contentOffset shifts by the newly added pixels to hide the change in content position.
I hardly know how to explain my case other than to point to the excellent Absolute vodka app, Drink Spiration.
I am trying to make a carousel like image browsing with a little spice. I would really like to find a simple core animation explanation on how to accomplish something like the above app.
I hope someone can help with this. The solution doesn't have to be exactly the same, but just explain what is happening and it would be best if it was simple and no opengl. Just something to point me in the right direction. I don't think using just a scrollview with uiimageviews is enough.
I wrote something similar and its quite easy once you figure it out in your mind. All done justing using regular old views and animating transforms on them.
Say its 3 images on screen, and you can rotate new ones on and off ... then you will need 5 views set up (most simply just a UIImageView with a relevant image set). They are the currently selected image, the two either side of it and the ones that are, or will be animating on or off when the user flicks left or right.
Each of these 5 images has a position, an angle and an image. When the user flicks left or right each gets animated to the next position and angle, views that are about to come onscreen have their image updated to the next image in the set. If the user keeps on flicking in the same direction you simply reposition views on one side as they come off the other.
With this setup you can do lots of cool carousel like things very simply.