1

I'm making a custom 2D map filled with ImageViews using this layout:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.nkraft.mobiletomblocator.ZoomableScrollView2D 
        android:id="@+id/scrollView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

            <com.nkraft.mobiletomblocator.CustomGridLayout
                android:id="@+id/map_grid"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ffdedbba" >

                <!-- filling this up at run time, maybe a ~300x100 cells -->

            </com.nkraft.mobiletomblocator.CustomGridLayout>

    </com.nkraft.mobiletomblocator.ZoomableScrollView2D>

    <!-- Don't mind below this -->

    <LinearLayout
        android:id="@+id/popupDialogParent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:padding="30dp" >

        <include layout="@layout/custom_toast"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />

    </LinearLayout>

</RelativeLayout>

Where:

  • ZoomableScrollView2D is a 2 dimensional scroller w/c can scroll in both direction at the same time and where I attached my pinch zoom effect w/c I have found HERE
  • CustomGridLayout is just a normal GridLayout that I overrides the onDraw() to draw other stuff.

After I have set this all up, I get this unexpected output:

before zoom:

enter image description here

after zoom:

enter image description here

How do I maintain the clipping bounds of that CustomGridLayout after zooming? You know, the one that anyone would expect when zooming.

Community
  • 1
  • 1
mr5
  • 3,438
  • 3
  • 40
  • 57
  • Your problem is the type of scaling you are doing. You don't scale the content of the grid but the layout itself. So basically change the scaling to apply on the content and not the layout. – WarrenFaith Oct 01 '14 at 09:52
  • @WarrenFaith Does that mean, I will need to scale every cells inside the grid layout? – mr5 Oct 01 '14 at 10:07
  • There are different approaches that you can try. The first thing is to scale the canvas where you draw on directly and do via math a calculation how much of new space you need to fill with cells (adapt to the new "bounds"). Another possibility is to scale everything you draw itself. I would prefer the one-time scaling of the canvas via `canvas.scale()` or `canvas.[pre|post]Scale()`. Basically it depends on how easy you can access the canvas you are drawing on. – WarrenFaith Oct 01 '14 at 10:12
  • @WarrenFaith I have tried scaling the grid layout itself, but because of my design flaw, the app crashes with `OutOfMemoryException` so scaling each cell would be a no go for me. Well for the canvas of the grid layout, I haven't tried it yet. Uhm, will the `View` be still clickable if I have scaled them in through the canvas approach? – mr5 Oct 01 '14 at 10:24
  • Not sure how you implemented the click itself. Might be that you need to do some math to adapt the touch with the scaling to "hit" the right view. – WarrenFaith Oct 01 '14 at 10:33

0 Answers0