ViewOverlay: When, How and for What Purpose?

我的总结

1.ViewOverlay 可以为某个view添加一个drawable, 比如例子中的右上角的标签

2.GroupOverlay可以在View删除的时候添加一个动画.注意overlay.addView就会删除以前的View  如例子二

In Android 4.3, a new feature for developer has been added: Overlays. When announcing this feature, the first thing I did was looking at the source code to understand how it works. Right after, I tried to find good use cases to fully exploit the potential of this feature. So in this post, I’m going to tell you more about this useful feature.

Obviously, you must install the following apk on Android 4.3

Download Sample Application

Overlays, how it works ?

In a few words

The official documentation about overlays is quite clear and you should read it. For more details, you can read this Chet Haase’s post.

Important points to remember about overlays:

• two types of overlays : ViewOverlay (for Views) and ViewGroupOverlay (for ViewGroups)
• two methods to retrieve a view overlay : View.getViewOverlay / ViewGroup.getViewGroupOverlay
• you can add/remove a drawable in ViewOverlay and ViewGroupOverlay
• you can add/remove a view in ViewGroupOverlay
• the documentation says An overlay [...] on top of a View [...] drawn after all other content in that view [...]
• Chet Haase’s said [...] you are responsible for positioning/sizing the views/drawables where you want them in the overlay [...]

Reading the source code

Let’s start by looking at the View.getViewOverlay/ View.getViewGroupOverlay methods.

code snippet

12345678910111213

public ViewOverlay getOverlay() {    if (mOverlay == null) {        mOverlay = new ViewOverlay(mContext, this);    }    return mOverlay;}public ViewGroupOverlay getOverlay() {    if (mOverlay == null) {        mOverlay = new ViewGroupOverlay(mContext, this);    }    return (ViewGroupOverlay) mOverlay;}

A ViewOverlay/ViewGroupOverlay is created when the get method is called.

How ViewOverlay/ViewGroupOverlay works? Note that a ViewGroupOverlay extends ViewOverlay, so we can focus on the ViewOverlay implementation

ViewOverlay.java

ViewOverlay implementation is based on a OverlayViewGroup (static inner class in ViewOverlay). The OverlayViewGroup extends ViewGroup and contains a list of drawables. As you can see, there isn’t any method to layout drawables or child views that’s why you are responsible for positioning/sizing them.

Two more interesting things :

1. the documentation says view will be repositioned such that it is in the same relative location inside the activity.

OverlayViewGroup.add(View child)

123456

int[] parentLocation = new int[2];int[] hostViewLocation = new int[2];parent.getLocationOnScreen(parentLocation);mHostView.getLocationOnScreen(hostViewLocation);child.offsetLeftAndRight(parentLocation[0] - hostViewLocation[0]);child.offsetTopAndBottom(parentLocation[1] - hostViewLocation[1]);

1. all invalidation calls on a OverlayViewGroup are forwarded to its host view because the overlay is not a child of the host view and invalidation cannot therefore follow the normal path up through the parent hierarchy

code snippet

12345678910111213141516171819202122232425

@Overridepublic void invalidate(Rect dirty) {    super.invalidate(dirty);    if (mHostView != null) {        mHostView.invalidate(dirty);    }}@Overridepublic void invalidate(int l, int t, int r, int b) {    super.invalidate(l, t, r, b);    if (mHostView != null) {        mHostView.invalidate(l, t, r, b);    }}@Overridepublic void invalidate() {    super.invalidate();    if (mHostView != null) {        mHostView.invalidate();    }}[...]

Two real use cases

I underlined the word real because I didn’t want to explain you how to use Overlay with irrelevant examples. That’s why, I’m going to present you two problems solved thanks to Overlays : a button with a banner and how to animate a view deletion.

A button with a banner (ViewOverlay)

Here we want to add a banner with some text on top-right corner of a button as you can see below.

The main difficulty is that we don’t want the button’s behaviour to be changed by the banner (i.e. click, touch etc.).

A basic xml layout

Here we have a basic layout with one button.

code snippet

12345678910111213141516

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/button"android:text="Click me even if I'm a pirate"android:background="@drawable/badged"android:layout_width="250dp"android:layout_height="250dp"android:textColor="#FFF"android:fontFamily="sans-serif-condensed"android:layout_centerHorizontal="true"/></RelativeLayout>

A custom banner drawable

For more flexibility (change the banner color, text etc), you have to implement a custom drawable in order to draw a banner.

I’m not gonna explain how to draw a banner because this is not the main purpose of this post. If you have questions, don’t hesitate to ask me. So, here is the custom drawable.

code snippet

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283

class BannerDrawable extends Drawable {private static final double SQRT_2 = Math.sqrt(2);private final Rect mTextBounds;private Paint mPaintFill;private Paint mPaintText;private String mMessage = "I'M A PIRATE BANNER";private int mBannerWidth = 50;private int mTextSize;public BannerDrawable() {  initPaintFill();  initPaintText();  mTextBounds = new Rect();}private void initPaintFill() {  mPaintFill = new Paint(ANTI_ALIAS_FLAG);  mPaintFill.setStyle(Paint.Style.FILL);  mPaintFill.setColor(getResources().getColor(R.color.banner));}private void initPaintText() {  mPaintText = new Paint(ANTI_ALIAS_FLAG);  mPaintText.setStyle(Paint.Style.FILL);  mPaintText.setColor(Color.WHITE);  mPaintText.setTextSize(20);  mPaintText.setShadowLayer(4.0f, 2.0f, 2.0f, Color.BLACK);}@Overridepublic void draw(Canvas canvas) {  Rect bounds = getBounds();            if (bounds.isEmpty()) {                bounds = canvas.getClipBounds();            }            float width = bounds.width();            adaptTextSize((int) (width * 0.9), (int) (mBannerWidth * 0.9));            float bannerHyp = (float) (mBannerWidth * SQRT_2);            canvas.translate(0, bounds.centerY() - mBannerWidth);            canvas.rotate(45, bounds.centerX(), bounds.centerY() - mBannerWidth);            canvas.drawRect(bounds.left - bannerHyp, bounds.top, bounds.right + bannerHyp, bounds.top + mBannerWidth, mPaintFill);            canvas.drawText(mMessage, bounds.centerX() - mTextBounds.centerX(), mBannerWidth / 2 + mTextBounds.height() / 2, mPaintText);}private void adaptTextSize(float width, int height) {  if (mTextSize > 0) {      mPaintText.setTextSize(mTextSize);      return;  }  int textSize = 10;  int textHeight;  int textWidth;  boolean stop = false;  while (!stop) {      mTextSize = textSize++;      mPaintText.setTextSize(mTextSize);      mPaintText.getTextBounds(mMessage, 0, mMessage.length(), mTextBounds);      textHeight = mTextBounds.height();      textWidth = mTextBounds.width();      stop = textHeight >= height || textWidth >= width;  }}@Overridepublic void setAlpha(int alpha) {}@Overridepublic void setColorFilter(ColorFilter cf) {}@Overridepublic int getOpacity() {  return PixelFormat.OPAQUE;}}

Finally, use a ViewOverlay

This last step is quite simple. It consists in sizing and positioning a BannerDrawable and to add it to the button’s ViewOverlay when the button has been fully laid out.

Note that the drawable bounds is the top right square of the button.

code snippet

1234567891011

final View button = findViewById(R.id.button);final ViewOverlay overlay = button.getOverlay();final BannerDrawable bannerDrawable = new BannerDrawable();button.post(new Runnable() {  @Override  public void run() {      //top right square      bannerDrawable.setBounds(button.getWidth() / 2, 0, button.getWidth(), button.getHeight() / 2);      overlay.add(bannerDrawable);  }});

This is piece of cake, isn’t it ?

Animating a view deletion (ViewGroupOverlay)

This second use case is a bit more complicated. We’re gonna animate the deletion of a view (i.e. Button) in a parent (i.e. LinearLayout) with a eyecatching approach.

If you still have not understand the use case I want to explain to you, you can take a look on the animated gif below.

Step1: fill the parent

Assume that we have an xml layout with an empty LinearLayout (id=buttons) inside a ScrollView. We create 10 buttons inside the LinearLayout:

onCreate()

1234567891011121314151617181920

for(int i=0; i<10; i++) {final Button button = new Button(this);[... customize the button ...]buttons.addView(button, params);button.setOnClickListener(new View.OnClickListener() {  @Override  public void onClick(View v) {      Toast.makeText(AnimActivity.this, "You click on a button", Toast.LENGTH_SHORT).show();  }});button.setOnLongClickListener(new View.OnLongClickListener() {  @Override  public boolean onLongClick(View v) {      animatedDelete(button);      return true;  }});}

Each button show a toast onClick and is deleted onLongClick.

Step2: animate the deletion  难道ViewGroupOverlay只是为了在移除view的时候 还是删除这个view以后 播放动画??

On delete, we scale up the button and decrease the alpha property. To achieve that, we use multiple ObjectAnimators played together thanks to an AnimatorSet.

Before starting the animation, don’t forget to add the button to the ViewGroupOverlay of the top parent (i.e. the activity main view) in order not to clip the button in the ViewGroupOverlay by its direct parent (i.e. LinearLayout).

Finally, when the animation ends or is cancelled, remove the button from the ViewGroupOverlay.

It gives us the following method

animatedDelete(Button)

1234567891011121314151617

private void animatedDelete(final Button button) {final ViewGroupOverlay viewGroupOverlay = ((ViewGroup) findViewById(android.R.id.content)).getOverlay();viewGroupOverlay.add(button);AnimatorSet set = new AnimatorSet();set.playTogether(      ObjectAnimator.ofFloat(button, "scaleX", 1, 3f),      ObjectAnimator.ofFloat(button, "scaleY", 1, 3f),      ObjectAnimator.ofFloat(button, "alpha", 1, 0.0f));set.start();set.addListener(new AnimatorListenerAdapter() {  @Override  public void onAnimationEnd(Animator animation) {      viewGroupOverlay.remove(button);  }});}

And this is it!

Conclusion

I’ve shown you two real examples where using Overlay is clearly an appropriated method. The only serious disadvantage is that Overlays are only available since API level 18.

ViewGroupOverlay (view source) 

extends ViewOverlay

java.lang.Object   ↳android.view.ViewOverlay    ↳android.view.ViewGroupOverlay

Class Overview

---

A group overlay is an extra layer that sits on top of a ViewGroup (the "host view") which is drawn after all other content in that view (including the view group's children). Interaction with the overlay layer is done by adding and removing views and drawables.

ViewGroupOverlay is a subclass of ViewOverlay, adding the ability to manage views for overlays on ViewGroups, in addition to the drawable support in ViewOverlay.

See Also

• getOverlay()

Summary

---

Public Methodsvoidadd(View view)

Adds a View to the overlay.

voidremove(View view)

Removes the specified View from the overlay.

[Expand]

Inherited Methods

 From class android.view.ViewOverlay

 From class java.lang.Object

Public Methods

---

public void add (View view)

Added in API level 18

Adds a View to the overlay. The bounds of the added view should be relative to the host view. Any view added to the overlay should be removed when it is no longer needed or no longer visible.

Views in the overlay are visual-only; they do not receive input events and do not participate in focus traversal. Overlay views are intended to be transient, such as might be needed by a temporary animation effect.

If the view has a parent, the view will be removed from that parent before being added to the overlay. Also, if that parent is attached in the current view hierarchy, the view will be repositioned such that it is in the same relative location inside the activity. For example, if the view's current parent lies 100 pixels to the right and 200 pixels down from the origin of the overlay's host view, then the view will be offset by (100, 200).

Parameters

viewThe View to be added to the overlay. The added view will be drawn when the overlay is drawn.

See Also

• remove(View)
• add(Drawable)

public void remove (View view)

Added in API level 18

Removes the specified View from the overlay.

Parameters

viewThe View to be removed from the overlay.

See Also

• add(View)
• remove(Drawable)