自定义控件之模仿W8界面

1准备图片

2自定义类MyImageView实现自定义控件功能

public class MyImageView extends ImageView {

    //private static final String TAG = "MyImageView";
    private static final int SCALE_REDUCE_INIT = 0;
    private static final int SCALING =1;
    private static final int SCALE_ADD_INIT = 6;

    // 控件的宽
    private int mWidth;
    // 控件的高
    private int mHeight;

    // 控件的宽1/2
    private int mCenterWidth;
    //控件的高 1/2
    private int mCenterHeight;

    //设置一个缩放的常量
    private float mMinScale = 0.85f;

    //缩放是否结束
    private boolean isFinish = true;
    public MyImageView(Context context) {
        this(context,null);
    }

    public MyImageView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    private OnViewClickListener mOnViewClickListener;

    public interface OnViewClickListener
    {
        void onViewClick(MyImageView view);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if(changed){
            mWidth = getWidth() - getPaddingLeft()- getPaddingRight();
            mHeight = getHeight() - getPaddingTop() - getPaddingBottom();
            mCenterWidth = mWidth / 2;
            mCenterHeight = mHeight / 2;
            Drawable drawable = getDrawable();
            BitmapDrawable bd = (BitmapDrawable)drawable;
            bd.setAntiAlias(true);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN :
               mScaleHandler.sendEmptyMessage(SCALE_REDUCE_INIT);
                break;
            case MotionEvent.ACTION_UP :
                mScaleHandler.sendEmptyMessage(SCALE_ADD_INIT);
                break;
        }
        return true;
    }
    // 控制缩放的Handler
    private Handler mScaleHandler = new Handler(){

        private int count = 0;

        private float s;

        //是否已经调用了点击事件
        private boolean isClicked;

        private Matrix matrix = new Matrix();
        @Override
        public void handleMessage(Message msg) {
            matrix.set(getImageMatrix());
            switch (msg.what){
                case SCALE_REDUCE_INIT :
                    if(!isFinish){
                        mScaleHandler.sendEmptyMessage(SCALE_REDUCE_INIT);
                    }else {
                        isFinish = false;
                        count = 0;
                        s = (float)Math.sqrt(Math.sqrt(mMinScale));
                        beginScale(matrix,s);
                        mScaleHandler.sendEmptyMessage(SCALING);
                    }
                    break;
                case SCALING :
                    beginScale(matrix,s);
                    if(count < 4){
                        mScaleHandler.sendEmptyMessage(SCALING);
                    }else {
                        isFinish = true;
                        if(MyImageView.this.mOnViewClickListener != null && !isClicked){
                            isClicked = true;
                            MyImageView.this.mOnViewClickListener.onViewClick(MyImageView.this);
                        }else
                            isClicked = false;

                    }
                    count ++;
                    break;
                case 6 :
                    if(!isFinish)
                        mScaleHandler.sendEmptyMessage(SCALE_ADD_INIT);
                    else {
                        isFinish = false;
                        count = 0;
                        s = (float)Math.sqrt(Math.sqrt(1.0f / mMinScale));
                        beginScale(matrix,s);
                        mScaleHandler.sendEmptyMessage(SCALING);
                    }
                    break;

            }
        }
    };
    // 缩放
    private synchronized void beginScale(Matrix matrix, float scale){
        matrix.postScale(scale,scale,mCenterWidth,mCenterHeight);
        setImageMatrix(matrix);
    }
    public void setOnClickIntent(OnViewClickListener onViewClickListener){
        this.mOnViewClickListener = onViewClickListener;
    }

}

3建立布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:background="@mipmap/bkg_img_default"
    android:gravity="center"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <com.example.imitationw8.MyImageView
                    android:id="@+id/c_joke"
                    android:layout_margin="2dp"
                    android:scaleType="matrix"
                    android:src="@mipmap/left_top"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
                <com.example.imitationw8.MyImageView
                    android:id="@+id/c_idea"
                    android:layout_margin="2dp"
                    android:scaleType="matrix"
                    android:src="@mipmap/left_bottom"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>
            <com.example.imitationw8.MyImageView
                android:id="@+id/c_constellation"
                android:layout_margin="2dp"
                android:scaleType="matrix"
                android:src="@mipmap/right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <com.example.imitationw8.MyImageView
            android:id="@+id/c_recommend"
            android:layout_margin="2dp"
            android:scaleType="matrix"
            android:src="@mipmap/bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

4自定义控件点击响应

public class MainActivity extends Activity {

    MyImageView joke;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        joke = (MyImageView)findViewById(R.id.c_joke);
        joke.setOnClickIntent(new MyImageView.OnViewClickListener(){
            @Override
            public void onViewClick(MyImageView view) {
                Toast.makeText(getApplicationContext(), "Joke", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

源码下载