利用ClipDrawable实现ImageView展开收缩-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

#实现 ##自定义控件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的数据，显示图片的一部分），一直还没成功。

转载于:https://my.oschina.net/u/1051338/blog/538507