클릭가능한 이미지뷰 부분적으로 겹칠 수 있을까요? (그림 첨부)

Question

안녕하세요.

정말 초보가 질문 하나 드릴게요.

(이해를 돕기 위해, 그림판에서 급조했습니다.)

위 그림처럼 이미지뷰를 배치하고, 각 이미지뷰를 클릭했을 때, 

클릭 이벤트가 발생하도록 하고 싶은데요.

각 이미지의 크기가 너무 커서, 다른 이미지뷰의 영역을 서로 침범하게 됩니다.

(디자인 때문에,) 이미지뷰의 크기를 줄이지 않고, 

저 상태 저대로 이미지뷰를 배치하고 싶은데, 방법이 있을까요?

 

그리고, 비율 유지해서 해상도 다른 화면에서도 보일 수 있을까요?

즉, 리니어 레이아웃의 weight 속성을 이용해서 다른 해상도에서도 비율을 유지할 수 있다고 하는데,

리니어 레이아웃을 써버리면, 이미지뷰를 겹칠 수가 없어서, 뷰가 굉장히 작아져 버리네요. ㅠㅠ

 

혹시 가능한지 여부랑, 가능하면 어떻게 해야하는지 방법 좀 알려주시면 감사하겠습니다.

 

Answer 1

기존의 OnClickListener으로는 불가능 합니다.

다음과 같이 CustomImageView를 사용하면 가능합니다.

제가 한번 만들어 봤습니다. 이미지의 투명한 부분은 click이 되지 않습니다.

<com.your.package.ObjectClickImageView
	android:id="@+id/test_image"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:adjustViewBounds="true"
	android:src="@drawable/test_image" />

 

ObjectClickImageView objectView = (ObjectClickImageView)findViewById(R.id.test_image);
objectView.setOnObjectClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		...
	}
});

 

package com.your.package;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by leetid@naver.com on 2018-04-09.
 */

public class ObjectClickImageView extends AppCompatImageView { // or ImageView

    private OnTouchListener mOnTouchListener;
    private OnClickListener mOnObjectClickListener;

    public ObjectClickImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        super.setOnTouchListener(mOnObjectTouchListener);
    }

    @Override
    public void setOnTouchListener(OnTouchListener l) {
        mOnTouchListener = l;
    }

    public void setOnObjectClickListener(@Nullable OnClickListener l) {
        mOnObjectClickListener = l;
    }

    private final OnTouchListener mOnObjectTouchListener = new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            boolean consumed = false;

            if (mOnTouchListener != null)
                consumed = mOnTouchListener.onTouch(v, event);

            if (consumed)
                return true;

            if (mOnObjectClickListener != null) {
                int x = (int)event.getX();
                int y = (int)event.getY();

                switch(event.getAction()) {
                    case MotionEvent.ACTION_UP:
                        if (isOnObject(x, y))
                            return true;

                        break;

                    case MotionEvent.ACTION_DOWN:
                        if (isOnObject(x, y)) {
                            mOnObjectClickListener.onClick(v);
                            return true;
                        }

                        break;
                }
            }

            return false;
        }
    };

    private boolean isOnObject(int x, int y) {
        setDrawingCacheEnabled(true);
        Bitmap bitmap = Bitmap.createBitmap(getDrawingCache());
        setDrawingCacheEnabled(false);

        if (bitmap == null)
            return false;

        if (Color.alpha(bitmap.getPixel(x, y)) > 0)
            return true;

        return false;
    }
}

 

Comments

답변 너무 감사합니다. 일단 정성에 감동먹어서, 채택눌렀습니다. 코드분석해서 적용해보도록 하겠습니다. 감사합니다

Answer 2

 각 이미지뷰를 클릭했을 때,  클릭 이벤트가 발생하도록 하고 싶은데요.

=>   public boolean onTouch(View v, MotionEvent event) 의 반환값을 false로 하면 뒤의 레이아웃으로 onTouch 이벤트가 들어가고, true로 하면, 뒤의 레이아웃으로 onTouch 이벤트가 안 들어가니. 이를 응용해 보세요.

 

비율 유지해서 해상도 다른 화면에서도 보일 수 있을까요?

=> ScalableLayout 를 이용해 보세요. 

 

 

Comments

답변 너무 감사합니다. 아직 초보라 모르는게 많은데, onTouch랑 ScalableLayout도 좀 더 공부해보겠습니다.