[안드로이드/Android] 카카오톡 이모티콘 선택 뷰 만들기

카카오톡에서 이모티콘을 보낼 때 키보드 위로 덮이는 뷰를 팝업 윈도우를 사용해서 개발했습니다.

 

 

분석

이모티콘 선택할 때 키보드가 나타는 것과 동일하게 채팅 입력창 아래로 나타나며, 키보드가 있는 상태에서는 overlay 되는 구조입니다. 키보드와 같은 높이를 갖고 있어 자연스럽게 show/hide 합니다. 

키보드 높이는 키보드가 나타나기 전에는 알 수 없어 default로 비슷한 값인 350dp로 설정하고, 키보드가 나타났을 때 그 높이를 측정해 사용합니다.

 

구현

Init

	View popupView = getLayoutInflater().inflate(R.layout.view_keyboard, null);

	PopupWindow popupWindow = new PopupWindow(popupView,
                LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
	popupWindow.setAnimationStyle(0);

setAnimationStyle은 팝업이 나타날 때 애니메이션 설정으로, defalut는 -1 입니다.

- 0은 no animation 

 

 

show

       if (keyboardHeight < 200) {
            // 키보드가 노출된적 없을때
            height = ConvertSize.dp2pixel(350, this);
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) getBinding().spInput.getLayoutParams();
            params.height = height;
            getBinding().spInput.setLayoutParams(params);
            getBinding().spInput.requestLayout();
        } else {
            // 키보드가 한번이라도 노출된 경우
            height = keyboardHeight;
        }
        popupWindow.setHeight(height);
        popupWindow.showAtLocation(getBinding().rlMain, Gravity.BOTTOM, 0, getBinding().editTextInput.getHeight());

 

팝업 윈도우는 말 그대로 뷰 위에 띄우는 구조다 보니깐 입력창 아래 Space View(spInput)를 두고 높이를 변경해 입력창 아래 팝업 윈도우가 뜬 것처럼 구현했습니다.

showAtLocation(View parent, int gravity, int x , int y)
- parent : 팝업 윈도우를 띄울 부모 뷰
- gravity : 팝업 윈도우의 위치 
- x : 좌표
- y : 좌표 

 

hide

        if (keyboardHeight < 200) {
            // 키보드가 노출된적 없을때
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) getBinding().spInput.getLayoutParams();
            params.height = 0;
            getBinding().spInput.setLayoutParams(params);
            getBinding().spInput.requestLayout();
        }

        popupWindow.dismiss();

 

감사합니다.