StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can have a child <code>View</code> of a <code>ViewGroup</code> that exceeds the bounds of the parent. So, for example, let's say that the clear part of your image above is the parent view, and the <code>ImageView</code> is it's child view, then we just need to scale up or down the image. To do this, start with a <code>FrameLayout</code> with specific bounds. For example in <code>XML</code>:</p> <pre><code><FrameLayout android:id="@+id/image_parent" android:layout_width="200dip" android:layout_height="200dip" /> </code></pre> <p>or programmatically:</p> <pre><code>FrameLayout parent = new FrameLayout(this); DisplayMetrics dm = getResources().getDisplayMetrics(); //specify 1/5 screen height and 1/5 screen width ViewGroup.LayoutParams params = new FrameLayout.LayoutParams(dm.widthPixles/5, dm.heightPixles/5); parent.setLayoutParams(params); //get a reference to your layout, then add this view: myViewGroup.addView(parent); </code></pre> <p>Next, add the <code>ImageView</code> child. You can either declare it in <code>XML</code>:</p> <pre><code><FrameLayout android:id="@+id/image_parent" android:layout_width="200dip" android:layout_height="200dip" > <ImageView android:id="@+id/image" android:layout_width="200dip" android:layout_height="200dip" android:scaleType="fitXY" /> </FrameLayout> </code></pre> <p>and retrieve it using</p> <pre><code>ImageView image = (ImageView) findViewById(R.id.image); </code></pre> <p>Or, you can create it programmatically:</p> <pre><code>ImageView image = new ImageView(this); image.setScaleType(ScaleType.FIT_XY); parent.addView(image); </code></pre> <p>Either way, you will need to manipulate it. To set the <code>ImageView</code> bounds to exceed its parent, you can do this:</p> <pre><code>//set the bounds to twice the size of the parent FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(parent.getWidth()*2, parent.getHeight()*2); image.setLayoutParams(params); //Then set the origin (top left corner). For API 11+, you can use setX() or setY(). //To support older APIs, its simple to use NineOldAndroids (http://nineoldandroids.com) //This is how to use NineOldAndroids: final float x = (float) (parent.getWidth()-params.width)/2; final float y = (float) (parent.getHeight()-params.height)/2; ViewHelper.setX(image, x); ViewHelper.setY(image, y); </code></pre> <p>Finally, you can use the <a href="http://bit.ly/droidquery" rel="nofollow">droidQuery</a> library to easily handle your <code>View</code> animations (and <code>NineOldAndroids</code> is included in <code>droidQuery</code>, so you can just add <code>droidquery.jar</code> to your <code>libs</code> directory and be able to do everything discussed so far. Using <em>droidQuery</em> (<code>import self.philbrown.droidQuery.*</code>. Auto-imports may screw up), you can handle the clicks, and animations, as follows:</p> <pre><code>$.with(image).click(new Function() { @Override public void invoke($ droidQuery, Object... params) { //scale down if (image.getWidth() != parent.getWidth()) { droidQuery.animate("{ width: " + parent.getWidth() + ", " + "height: " + parent.getHeight() + ", " + "x: " + Float.valueOf(ViewHelper.getX(parent)) + ", " +//needs to include a decimal in the string so droidQuery knows its a float. "y: " + Float.valueOf(ViewHelper.getY(parent)) + //needs to include a decimal in the string so droidQuery knows its a float. "}", 400,//or some other millisecond value for duration $.Easing.LINEAR,//specify the interpolator $.noop());//don't do anything when complete. } //scale up else { droidQuery.animate("{ width: " + parent.getWidth()*2 + ", " + "height: " + parent.getHeight()*2 + ", " + "x: " + x + ", " +//needs to include a decimal in the string so droidQuery knows its a float. "y: " + y + //needs to include a decimal in the string so droidQuery knows its a float. "}", 400,//or some other millisecond value for duration $.Easing.LINEAR,//specify the interpolator $.noop());//don't do anything when complete. } } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload