키보드들에서 키 누르면 바로 뜨는 이미지? 팝업?에 대해서 질문드립니다.

Question

안녕하세요.

질문 드립니다.

보통 은행 어플의 보안 키보드나 일반 소프트 키보드 사용 시에

키보드 키를 누르면 누른 버튼 위치에 회색의 조그마한 팝업같은게 뜨면서 내가 누른 키의 텍스트가 나오지 않습니까?

그런 팝업을 보면 거의 대부분이 형태가 비슷하던데 이게 기본적으로 제공하는 것인지

아니면 다들 그런 이미지를 작업해서 버튼 클릭시에 이벤트를 주는 것인지 궁금합니다.

답변 부탁드립니다.

 

새해 복 많이 받으세요!!

Answer 1

KeyboardView를 상속받아 키보드 구현시

style="@style/SkinCustomBlack"

아래 스타일 적용할 때 <!-- -->로 주석 처리된 부분에 적절한 레이아웃 설정하시면 될거에요.

저도 한지 오래되서 기억이 않나네요.

<style name="SkinCustomBlack" parent="android:Widget.KeyboardView">

        <item name="android:background">#00000000</item>

        <item name="android:keyBackground">@drawable/btn_keyboard_key</item>

        <item name="android:keyTextSize">22sp</item>

        <item name="android:keyTextColor">#FFFFFFFF</item>

        <!--<item name="android:keyPreviewLayout">@layout/keyboard_key_preview</item>-->

        <item name="android:keyPreviewOffset">-12dp</item>

        <item name="android:keyPreviewHeight">80dp</item>

        <item name="android:labelTextSize">14sp</item>

        <!--<item name="android:popupLayout">@layout/keyboard_popup_keyboard</item>-->

        <item name="android:verticalCorrection">-10dip</item>

        <item name="android:shadowColor">#BB000000</item>

        <item name="android:shadowRadius">2.75</item>

    </style>    

그리고 참조하는 keyboard의 xml 에서

각 키별 android:popupCharacters 속성을 설정하면 나오는 기능일 겁니다.

http://developer.android.com/reference/android/inputmethodservice/Keyboard.Key.html 참고하세요.

참고하시라고 keyboard.xml 은 아래에

<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"

android:keyWidth="134px" android:horizontalGap="1px"

android:verticalGap="6px" android:keyHeight="74px">

 

<Row>

<Key android:codes="8" android:keyEdgeFlags="left" android:keyIcon="@drawable/dia_1_selector"/>

<Key android:codes="9" android:keyIcon="@drawable/dia_2_selector"/>

<Key android:codes="10"  android:keyIcon="@drawable/dia_3_selector" />

</Row>

 

<Row>

<Key android:codes="11"  android:keyIcon="@drawable/dia_4_selector" android:keyEdgeFlags="left" />

<Key android:codes="12"  android:keyIcon="@drawable/dia_5_selector" />

<Key android:codes="13"  android:keyIcon="@drawable/dia_6_selector" android:keyEdgeFlags="right" />

</Row>

 

<Row>

<Key android:codes="14"  android:keyIcon="@drawable/dia_7_selector" android:keyEdgeFlags="left" />

<Key android:codes="15"  android:keyIcon="@drawable/dia_8_selector" />

<Key android:codes="16"  android:keyIcon="@drawable/dia_9_selector" android:keyEdgeFlags="right" />

</Row>

 

<Row>

<Key android:codes="67"  android:keyIcon="@drawable/dia_next_selector"

android:keyEdgeFlags="left" android:isRepeatable="true"/>

<Key android:codes="7"  android:keyIcon="@drawable/dia_0_selector" />

<Key android:codes="66" android:keyEdgeFlags="right"

android:keyIcon="@drawable/dia_con_selector" />

</Row>

 

</Keyboard>

 

keyboard.xml 적용 부분 

 

Keyboard keyboard = new Keyboard(this, R.xml.keyboard);

keyboardView = (CustomKeyboardView) findViewById(R.id.keyboard_view);

keyboardView.setPreviewEnabled(false); <-- 이부분 true로 설정.

keyboardView.setKeyboard(keyboard);

 

Comments

이런 방법이 있었군요!!! 정말 감사드립니다,.
새해 복 많이 받으세요!