So. Iv'e got a straight forward relative layout which I add multiple ImageViews to.
I don't want the images to obscure each other so as they are added they are translated so they don't.
As more ImageViews are added they need to be translated further and further away from the centre of the layout so as not to overlap other images and so they fall off the edge of the user's screen - no problem so far ...
I need to give the user the ability to pan to see the images that are off screen and also zoom in and out (with gestures not buttons) to see all images or focus in on one.
I think the solution to this problem is to modify the layout to allow pinch and pan but all I can find is how to create views that support pinch and pan.
I need each image to be in a separate ImageView.
Forgive me if this is the wrong way to come at this problem but any help would be much appreciated.
This might help explain:
want to scroll about and zoom around this layout (click to see)
Related
So I'm working on piano app in Corona SDK (I'd like to say that I'm still a newbie to it). Basically the app layout is 'static' as I call it (there's no any scrollview etc.). Keyboard is situated on top of the screen and it covers like 1/5 of whole background, so every key is tiny, unplayable. And I don't know how to make zoom function containing buttons feature. If out there would be 2 buttons; one with '+' and one with '-', situated in bottom's 2 corners. I want them to don't change their size and position while zooming. Then when it's zoomed, no matter how deep, app work would be easily scrollable. I'd love the both, zooming and scrolling to be smooth, so you were be able to individually select your playing setup in your own preference. Can you help me and give some code suggestions, please? (as I said before I'm new..)
Thank you
First of all I suggest you to look into group programming guide. As I understand you need to place Keyboard in separate group and use xScale/yScale properties to zoom it.
--setup keyboard
keyboardGroup = display.newGroup()
sceneGroup:insert(keyboardGroup) -- sceneGroup may have different name in your code
--insert keys example
keyboardGroup:insert(yourKeyObject)
Zoom function:
function setZoom(xValue, yValue)
keyboardGroup.xScale = xValue
keyboardGroup.yScale = yValue
end
Zoom buttons should be placed in another display group, so they will not be affected by scaling
In my android app, I have a linearlayout where I put many linearlayouts with images in it. It will go past the screen border horizontally and vertically.
I want the user to pinch zoom in or out and pan around. I tried putting it in a horizontal scroll and vertical scroll, but it wont let me zoom, and I can only move in 1 direction at 1 time, like it wont let me move diagonally.
I tried this plugin
https://code.google.com/p/android-zoom-view/downloads/list
But it won't let me pan around. It only lets me do it on the stuff thats visible on the screen...
Does anyone know how to make this work?
Thanks
The easiest way I can think of is to put your images in HTML and use webview to display it.Webview automatically handles zooming and panning of content.
I have recently completed a simple drag and drop shapes game. It had the user drag a shape (ImageView) to another "empty place holder" ImageView.
I now want to make this a little more advanced, instead of dragging a simple shape, I want to make a puzzle of various non-orthogonal shapes, for example breaking a circle into 5 different pieces. What I'm having a problem with right now is how to design the layout. I do not know how to make a truly "custom" shaped ImageView, as far as I can find from my research it's not possible. So my idea for now is to overlap a number of square ImageViews, each of which will have only a subset of an image and the rest transparent. Thus the final output will look like it's a number of custom shaped ImageViews.
Example:
+ + +
Because only the internal sections are "visible" and the rest of the circle is transparent, when all of these pieces are placed in the same spot on the screen, the final image will look like:
I haven't tried this yet... but I foresee at least one problem. When I go to drag the pieces over to this puzzle, they will all "snap" into place when dragged to the same place. Because in reality all I really have here is a picture of a circle inside a ImageView which has some invisible rectangular boundary around it.
Hopefully this situation is clear. Now my questions:
Is it possible to have truly custom shaped ImageViews instead of my idea of overlapping images?
If what I'm thinking is the best way to handle this puzzle idea, then what property can be changed such that the "drop" action does not happen at the same place for all of these puzzle pieces? If I wanted to "drop" the pizza shaped piece, I'd like it to only snap into place when it go close to the top left of the circle.
Note: I am new to Android programming, and somewhat new to Java/XML as well, it’s very likely I’m overlooking something, so please feel free to suggest other approaches as you see fit.
Not really. Overlapping views is generally the way it's done. You could also use one View and override the drawing action yourself (multiple bitmaps drawn at relative locations within the View), but that would make the drag-drop aspect significantly harder.
If the Views are all the same size, with the visible portions in the correct relative placement in each, they should snap together correctly. This is because the snap is (I believe) based on the position of the upper-left corner of the View. If the pizza-shaped piece's visible portion is correct with regards to that, it should snap in at exactly the right spot.
So you have certain places you want to accept the drops, and I'm assuming you know their coordinates, say (d_x,d_y).
Then why not simply monitor the coordinate of the center (p_x,p_y) of image view of the piece you are dragging, say the "pizza" piece, and when the distance between the the piece and drop point is within an acceptable amount accept the drop.
But if you are asking if there is some way to make non-rectangular image views I don't believe that is possible.
However I don't think it is necessary in your case, because I believe even if you want them to drag the piece precisely into place you can calculate the coordinates where the draggable rectangle needs to go with knowledge of the shape of the piece and the assumption that the rectangle wraps the piece.
I am working on a project that involves painting on images.
To delete the unwanted lines or curves i have to draw a border and X button to delete it.
I have a relative layout where i have the freehand drawing canvas. on edit mode i should make them as u see in the pic, where i have to create button on a varying x,y positions.
i am confused how to achieve this.
Thanks in advance.
Jana.
I suggest doing this manually rather than using the Button widget. Override the onTouchEvent on the view holding your painting and use MotionEvent.getX and MotionEvent.getY in combination with MotionEvent.getAction to determine behaviour when the user touches the 'button'. Skipping widget creation will improve performance and open up doors to other types of functionality.
You could use the deprecated AbsoluteLayout container for this or keep the RelativeLayout and use layoutMargins to set the location of the buttons. The former is the route you should take despite the container being deprecated as the later breaks the layout paradigm by misusing margins...
You should keep in mind that there are a variety of devices with different screen sizes and setting explicit, pixel based locations is going to be awkward.
I'm in the process of developing an android game. I have an activity that has a custom class that extends the view and where everything is drawn. Everything works fine and I have implemented a way to draw levels and it looks good.
The problem that I have is that the levels are clearly too big for just 1 screen and re-designing them is not an option as it affects the user experience. The only solution that I see is making the screen scrollable so that you can move around the rendered stuff and zooming. What I'm looking for is double tapping anywhere to zoom in and out and scrolling to move around the map.
What I need help with is how to do this. I know how to detect that the user has scrolled or double tapped but I don't know what I should do to actually zoom in and out and scroll (if a scroll is detected).
I have been looking around and saw some very simple tutorials but all of them deal with zooming in/out of an image which is not what I need. My level is rendered using many different bitmaps so I know I need to redraw all of them when updating the screen (zoom or scroll).
Is my case the same as having a single image. When it comes to scrolling I think what need to be done is calculating how much the screen is "moved" then update the and redraw the view bitmaps with the new scaled coordinates, is this correct? What about zooming?
Any help would be much appreciated. Thanks
Zooming should be easy once you have detected where you are currently at (zoom level i.e.)
image.setBounds((getWidth()/2)-zoomControler, (getHeight()/2)-zoomControler, (getWidth()/2)+zoomControler, (getHeight()/2)+zoomControler);
Something like that should help you zoom out/in on the image. When the zoom levels cross a certain level, you can consider swapping out an image that is more detailed that the one you are currently rendering.