利用ClipDrawable實現ImageView展開收縮

#效果演示 圖片展開收縮

#實現 ##自定義控件ImageViewProgressively

public class ImageViewProgressively extends ImageView{

	Context mContext;
	
	//圖片展開或收縮方向，默認爲horizontal;
	private int orientation_progress = 1;
	//圖片展開形式，默認從top到bottom
	private int expend_type = 0x30;
	//遞增或遞減的幅度（level的範圍在0-10000），能夠爲負數
	private int level_change_step = 1000;
	//爲了使動畫效果明顯，設置延遲修改的時間間隔,默認爲50ms
	private int level_change_delayed = 50;
	
	
	public ImageViewProgressively(Context context) {
		super(context);
		mContext = context;
		// TODO Auto-generated constructor stub
		
	}
	
	public ImageViewProgressively(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		
		TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ImageViewProgressively);
		orientation_progress = array.getInt(R.styleable.ImageViewProgressively_orientation_progress, 1);
		expend_type = array.getInt(R.styleable.ImageViewProgressively_expend_type, 0x30);
		level_change_step = array.getInt(R.styleable.ImageViewProgressively_level_change_step, 1000);
		level_change_delayed = array.getInt(R.styleable.ImageViewProgressively_level_change_delayed, 50);
		
		Drawable d = this.getDrawable();
        if (d != null) {
            setImageDrawable(d);
        }
        array.recycle();
	}

	@Override
	public void setImageDrawable(Drawable drawable) {
		// TODO Auto-generated method stub
		ClipDrawable mClipDrawable = new ClipDrawable(drawable, expend_type, orientation_progress);
		super.setImageDrawable(mClipDrawable);
		if(level_change_step > 0){
			mClipDrawable.setLevel(0);
		}else{
			mClipDrawable.setLevel(10000);
		}
		
		this.post(animateImage);
	}
	
	@Override
	public void setImageBitmap(Bitmap bm) {
		// TODO Auto-generated method stub
		setImageDrawable(new BitmapDrawable(mContext.getResources(), bm));
	}
	
	private Runnable animateImage = new Runnable() {
		
		@Override
		public void run() {
			doTheAnimation(getDrawable());
		}
	};
	
    private void doTheAnimation(Drawable mDrawable){
    	mDrawable.setLevel(mDrawable.getLevel() + level_change_step);
    	if (mDrawable.getLevel() <= 10000 && mDrawable.getLevel() >=0) {
			this.postDelayed(animateImage, level_change_delayed);
		}else {
			this.removeCallbacks(animateImage);
		}
    }
}

##attr定義

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageViewProgressively">
        <!-- 展開方向,多個用'|'分割-->
        <attr name="orientation_progress" format="integer">
        	<flag name="horizontal_ivp" value="1" />
        	<flag name="vertical_ivp" value="2"/>
        </attr>
        <!-- 展開方式，從上到下，重中間向兩邊等等,多個用'|'分割,經過設置ClipDrawable對象在容器中的位置 參考ClipDrawable的android:gravity-->
        <attr name="expend_type" format="integer">
            <flag name="top" value="0x30"/>
            <flag name="bottom" value="0x50"/>
            <flag name="left" value="0x03"/>
            <flag name="right" value="0x05"/>
            <flag name="center_vertical" value="0x10"/>
            <flag name="fill_vertical" value="0x70"/>
            <flag name="center_horizontal" value="0x01"/>
            <flag name="fill_horizontal" value="0x07"/>
            <flag name="center" value="0x11"/>
            <flag name="fill" value="0x77"/>
            <flag name="clip_vertical" value="0x80"/>
            <flag name="clip_horizontal" value="0x08"/>
        </attr>
        <!-- 遞增或遞減的幅度（level的範圍在0-10000），能夠爲負數-->
        <attr name="level_change_step" format="integer"></attr>
        <!-- 爲了使動畫效果明顯，設置延遲修改的時間間隔 -->
       	<attr name="level_change_delayed" format="integer"></attr>
    </declare-styleable>
</resources>

##用法

<com.custom.view.ImageViewProgressively
        android:layout_weight="1"
        android:id="@+id/imp_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test"
        app:expend_type="top"
        app:orientation_progress="vertical_ivp"
        app:level_change_delayed="50"
        app:level_change_step="500" />
    <com.custom.view.ImageViewProgressively
        android:id="@+id/imp_2"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test"
        app:expend_type="center_horizontal"
        app:orientation_progress="horizontal_ivp"
        app:level_change_delayed="50"
        app:level_change_step="-500" />

實現效果比較簡單，源碼。 這個是之前見到有些網頁上出現這種效果，不知道是由於圖片數據沒下載完整，能夠一部分一部分的顯示，仍是特地作的這種效果，想實現部分圖片數據逐步加載顯示（一張1m的圖片，只下載0.5m的數據，顯示圖片的一部分），一直還沒成功。