Android UI：自定义GIF视图在RelativeLayout中的位置

Question

So, I have created my own custom GIFView component to show animated GIFs. My problem is that the Android wont lay it correctly to the center position. I tried to look for this from various sources, but most were about how to do this dynamically while I would like to do this purely with XML layouts.

The problem is this:

1. If I do not overwrite "onMeasure()", then my GIFView seems to take all the space in the screen. This causes that all elements in the layout are drawn to the very top of the screen. My GIF is like a progress bar (height = 8px, width = 152px), so it does not take much height. Anyways the Android thinks so and gives it the whole screen (my interpretation based on MeasureSpecs given to onMeasure method). The animation is now just below the TextView, but not in the center area. Instead, it is located to the top left corner of the area.

2. If I do overwrite "onMeasure()", then the TextView is drawn correctly in the middle of the screen and the progress animation under it. But, also in this case the location of the animated GIF is top left of the area while it should be in the middle of it.

3. If I do overwrite the "onMeasure()", then set the measurements with call to "setMeasuredDimension()" as required, but do not call super.onMeasure(), then it behaves just like in case (1). Meaning that the layout takes the whole screen and my TextView can be found from the very top of the screen.

I am not sure if I made any sense, so I try to give you the idea in mathematical sense here (I was not able to post screenshots because I am a new user). So, relative layout gives area just below TextView that is as wide as the screen (screenWidth) and as tall as required (paddingTop + paddingBottom + GIFView.getHeight()). Now I would like to see my animation to start drawing from position where: (x = paddingLeft + (screenWidth - paddingLeft - paddingRight - GIFView.getWidth())/2) and (y = paddingTop). Instead I see the Android drawing it to position (x = 0) and (y = 0).

I am sure the problem here is something that I have just overlooked, but I would really appreciate if someone had the time to look into this...

So, the snippets that I get this problem with:

Styleable declaration:

<declare-styleable name="GIFView">
    <attr name="resourceId" format="reference" />
</declare-styleable>

Main layout XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:paddingLeft="10dip"
   android:paddingRight="10dip"
   android:isScrollContainer="true"
   android:background="#EFEFEF" >  

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:custom="http://schemas.android.com/apk/res/com.myown.smthg"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:orientation="vertical"
      android:background="@drawable/background_white_gray"
      android:paddingLeft="16dip"
      android:paddingRight="16dip"
      android:isScrollContainer="true" >

  <TextView
     android:id="@+id/TextViewWaitReason"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:gravity="center"
         android:paddingTop="12dip"
         android:paddingLeft="12dip"
         android:paddingRight="12dip"
         android:textColor="#343434"
         android:textSize="20sp" />

  <com.myown.smthg.util.GIFView
     custom:resourceId="@drawable/progress_bar"
     android:id="@+id/progressGIF"
     android:layout_below="@id/TextViewWaitReason"
     android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:gravity="center"
         android:paddingTop="0dip"
         android:paddingLeft="24dip"
         android:paddingRight="24dip"
         android:paddingBottom="16dip" />
  </RelativeLayout>

Then the code of GIFView.java:

public class GIFView extends View {
// The resource id of the GIF
private int mResourceId;

// Movie to be shown
private Movie mMovie;
private long mStartTime;

// Size of this View
private int mHeight, mWidth;

/**
 * Constructor
 * 
 * @param context
 * @param attributes
 */
public GIFView( Context context, AttributeSet attributes ) {
    super( context, attributes );

    // Get the attribute for resource id
    TypedArray t = context.getTheme().obtainStyledAttributes( 
            attributes, R.styleable.GIFView, 0, 0 );

    mResourceId = -1;
    mMovie = null;
    mStartTime = 0;
    mHeight = 0;
    mWidth = 0;

    // This call might fail
    try
    {
        mResourceId = t.getResourceId ( R.styleable.GIFView_resourceId, -1 );

        mMovie = Movie.decodeStream( context.getResources().openRawResource( mResourceId ) );
        if( mMovie != null )
        {
            mWidth = mMovie.width();
            mHeight = mMovie.height();
        }
    }
    finally
    {
        t.recycle();
    }
}

@Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
{   
    final int desiredHSpec = MeasureSpec.makeMeasureSpec( mHeight, MeasureSpec.EXACTLY );
    final int desiredWSpec = MeasureSpec.makeMeasureSpec( mWidth, MeasureSpec.EXACTLY );
    setMeasuredDimension( desiredWSpec, desiredHSpec );

    super.onMeasure( desiredWSpec, desiredHSpec );
}

@Override
protected void onDraw( Canvas canvas )
{
    super.onDraw( canvas );

    // Return if we have no movie
    if( mMovie == null ) return;

    // Catch the time now
    long now = System.currentTimeMillis();

    // Catch the start time if needed
    if( mStartTime == 0 ) mStartTime = now;

    int relTime = (int)( (now- mStartTime) % mMovie.duration() );
    mMovie.setTime( relTime );
    mMovie.draw( canvas, 0, 0 );

    this.invalidate();
}

}

And if this is important, then the activity constructor looks like this:

super.onCreate( savedInstanceState );
// Set the content view
setContentView( R.layout.layout_wait );

// Get the String to be shown
Intent intent = getIntent();
String waitStr = intent.getStringExtra( myService.EXTRA_TEXT );

// Set the done text
TextView t = (TextView)findViewById( R.id.TextViewWaitReason );
if( t != null && waitStr != null )
    t.setText( waitStr );

So, why cannot I get that animation to run below the text and in the center of the screen? I will post the fix here if I can figure it out before... It has something to do with the onMeasure() method as overwriting it changes everything.

Disclaimer on snippets: I am not going to leave that invalidate() in the end of the onDraw()...

Br, Teemu

Answer 1

Ok, thanks for all those that had time to look into this problem. I did so too, and as I expected, the solution was rather simple...

The problem was that I did not declare correct size to my View and just declared it to be exactly as wide as the GIF was. So, fixing onMeasure to set dimension to take all the given width, then taking the padding into consideration and drawing to correct place fixed everything. Fixed code snippets:

New variable:

private int mDrawLeftPos;

Fixed onMeasure

@Override
protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec )
{   
    int p_top = this.getPaddingTop(), p_bottom = this.getPaddingBottom();

    // Calculate new desired height
    final int desiredHSpec = MeasureSpec.makeMeasureSpec( mHeight + p_top + p_bottom , MeasureSpec.EXACTLY );

    setMeasuredDimension( widthMeasureSpec, desiredHSpec );
    super.onMeasure( widthMeasureSpec, desiredHSpec );

    // Update the draw left position
    mDrawLeftPos = Math.max( ( this.getWidth() - mWidth ) / 2, 0) ;
}

Fixed onDraw

@Override
protected void onDraw( Canvas canvas )
{
    super.onDraw( canvas );

    // Return if we have no movie
    if( mMovie == null ) return;

    // Catch the time now
    long now = System.currentTimeMillis();

    // Catch the start time if needed
    if( mStartTime == 0 ) mStartTime = now;

    int relTime = (int)( (now- mStartTime) % mMovie.duration() );
    mMovie.setTime( relTime );
    mMovie.draw( canvas, mDrawLeftPos, this.getPaddingTop() );
}

Br, Teemu