Android Keyboard Development experience

<span id="Label3"></p><p><p>First of all, talk about the reasons for the development of the keyboard: such as financial products, banking and other app client login, especially to enter the password, will be blocked the system default input method, instead of their own input method! This is to consider security, as well as prevent the input method software record password and other issues! therefore, the security extremely high app will require the password and so on all uses own input method, this has the development demand!</p></p><p><p>What's the starting point for developing this software disk?</p></p>Step 1:<p><p>Look at the demo that Android gives us first<br>The demo on the soft keyboard can be found in the following directories:<br>.. \samples\android-22\legacy\softkeyboard</p></p>Step two: Keyboard Layout<p><p>As can be seen from the demo, keyboard development and interface development is not the same, although the keyboard also needs layout, but not the layout file, but in the XML directory file<br>Let's take a look:</p></p><p><p>Qwerty.xml file:</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Keyboard</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute"> Android:keywidth</span>=<span class="hljs-value">"10%p"</span><span class="hljs-attribute">android:horizontalgap</span>=<span class="hljs-value">"0px"</span><span class="hljs-attribute">android:verticalgap</span> =<span class="hljs-value">"0px"</span><span class="hljs-attribute">android:keyheight</span>=<span class="hljs-value">"@dimen/key_height"</span> > </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Row</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"113"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"q"</span> <span class="hljs-attribute">android: Keyedgeflags</span>=<span class="hljs-value">"left"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"119"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"w"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"101"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"e"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">r"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">t"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"121"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"y"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"117"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"u"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">i"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"111"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"o"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">p"</span> <span class="hljs-attribute">android: Keyedgeflags</span>=<span class="hljs-value">"right"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Row</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Row</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">a"</span> <span class="hljs-attribute"> Android:horizontalgap</span>=<span class="hljs-value">"5%p"</span><span class="hljs-attribute">android:keyedgeflags</span>=<span class="hljs-value">"left"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">s"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">d"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"102"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"f"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"103"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"g"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"104"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"h"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"106"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"j"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"107"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"k"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"108"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"l"</span> <span class="hljs-attribute"> Android:keyedgeflags</span>=<span class="hljs-value">"right"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Row</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Row</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">android:keyicon</span>=<span class="hljs-value">"@drawable/sym_keyboard_ Shift "</span><span class="hljs-attribute">android:keywidth</span>=<span class="hljs-value">" 15%p "</span> <span class="hljs-attribute">android:ismodifier</span>=<span class="hljs-value">" true "</span><span class="hljs-attribute">android: Issticky</span>=<span class="hljs-value">"true"</span> <span class="hljs-attribute">android:keyedgeflags</span>=<span class="hljs-value">"left"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"122"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"z"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">x"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">c"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"118"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"v"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"98"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"b"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"</span> <span class="hljs-attribute">android:keylabel</span>" = "<span class="hljs-value">n"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"109"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"m"</span>/ ></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"-5"</span> <span class="hljs-attribute">android:keyicon</span>=<span class="hljs-value">"@drawable/sym_keyboard_ Delete "</span><span class="hljs-attribute">android:keywidth</span>="<span class="hljs-value">15%p "</span> <span class="hljs-attribute">android:keyedgeflags</span>=<span class="hljs-value">" Right "</span> <span class="hljs-attribute"> Android:isrepeatable</span>=<span class="hljs-value">"true"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Row</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">android:rowedgeflags</span>=<span class="hljs-value">"bottom"</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"-3"</span> <span class="hljs-attribute">android:keyicon</span>=<span class="hljs-value">"@drawable/sym_keyboard_ Done "</span><span class="hljs-attribute">android:keywidth</span>="<span class="hljs-value">15%p "</span> <span class="hljs-attribute">android:keyedgeflags</span>=<span class="hljs-value">" left "</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"-2"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">"123"</span> <span class="hljs-attribute">android:keywidth</span>=<span class="hljs-value">"10%p"</span>/></span></span> <span class="hljs-comment"><span class="hljs-comment"><!--android:codes: -101 is not a framework-defined key code but a key code it is privately Defined in COM.EXAMPLE.ANDROID.SOFTKEYBOARD.LATINKEYBOARDVIEW. </span>-</span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">" -101"</span> <span class="hljs-attribute">android:keyicon</span>=<span class="hljs-value">"@drawable/sym_keyboard _language_switch "</span><span class="hljs-attribute">android:keywidth</span>=<span class="hljs-value">" 10%p "</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"+"</span> <span class="hljs-attribute">android:keyicon</span>=<span class="hljs-value">"@drawable/sym_keyboard_ Space "</span><span class="hljs-attribute">android:keywidth</span>=<span class="hljs-value">" 30%p "</span> <span class="hljs-attribute">android:isrepeatable</span>=<span class="hljs-value">" true "</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"46,44"</span> <span class="hljs-attribute">android:keylabel</span>=<span class="hljs-value">".,"</span> <span class="hljs-attribute">android:keywidth</span>=<span class="hljs-value">"15%p"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">Key</span> <span class="hljs-attribute">android:codes</span>=<span class="hljs-value">"ten"</span> <span class="hljs-attribute">android:keyicon</span>=<span class="hljs-value">"@drawable/sym_keyboard_ Return "</span><span class="hljs-attribute">android:keywidth</span>="<span class="hljs-value">20%p "</span> <span class="hljs-attribute">android:keyedgeflags</span>=<span class="hljs-value">" right "</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Row</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Keyboard</span>></span></span></code></pre><p><p><strong>analysis:</strong><br>1> from the above code can be seen, the layout is mainly in the keyboard file, each line to < row> start and end, the key is to < key> as the starting node, and the keyboard is the key to listen to the digital code for the main listener, label Just the keyboard display label;<br>2><br>and the attribute android:keywidth= "10%p" in the keyboard node refers to: if there is no such attribute in the node of key key, the width is 10% of the width of the whole screen, if there is this attribute in the node of key, the node attribute of key is the final value;<br>3>key node properties in android:codes= "46,44", codes for two, meaning: The first click is 46 of the string, the second click is 44 of the string, two clicks a second time;</p></p>Step three: Analyze the code<p><p>Keyboard components are inherited keyboardview, and custom, by using the Keyboard class to load the keyboard layout file, and through Keyboardview.setkeyboard (Keyboard Keyboard) method, The layout is assigned to the view , as Follows:<br>The 1> uses the keyboard class to load the XML file:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm">Keyboard keyboard=new Keyboard(context, R<span class="hljs-preprocessor">.xml</span><span class="hljs-preprocessor">.qwerty</span>)<span class="hljs-comment">;</span></code></pre></pre><p><p>2> assigns the keyboard to the view, uses the method in the Keyboardview Setkeyboard assigns the value</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs bash"><span class="hljs-keyword">set</span>Keyboard(keyboard);</code></pre></pre>Step four set a listener event for view<p><p>Set the Listener event setonkeyboardactionlistener, implement the OnKey method,</p></p>Step five: edittext using the scene layout<p><p>In the activity layout using the specified input method, add the following code</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">relativelayout</span><span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"fill_parent"</span><span class="hljs-attribute">android:layout_height </span>=<span class="hljs-value">"wrap_content"</span> > </span></span> <span class="hljs-tag"><<span class="hljs-title"><span class="hljs-title">Android.inputmethodservice.KeyboardView</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:id</span></span>=<span class="hljs-value"><span class="hljs-value">"@+id/keyboard_view"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_width</span></span>=<span class="hljs-value"><span class="hljs-value">"fill_parent"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_height</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_alignparentbottom</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">android:focusable</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:focusableintouchmode</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:background</span></span>=<span class="hljs-value"><span class="hljs-value">"@color/lightblack"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:keybackground</span></span>=<span class="hljs-value"><span class="hljs-value">"@drawable/btn_keyboard_key"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:keytextcolor</span></span>=<span class="hljs-value"><span class="hljs-value">"@color/white"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">android:visibility</span></span>=<span class="hljs-value"><span class="hljs-value">"gone"</span></span>/></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">relativelayout</span>></span></span></code></pre>When you develop your keyboard, you experience the following issues:<p><p>1> questions:<br>Click on the popup, the fonts are white, sometimes black, and the theme is related to the solution:<br>Keyboardview has a property, keypreviewlayout, which is the preview keyboard layout file, which can be defined by itself to TextView as the root node of the layout file<br>2> Preview Layout File The popup height is too high, how to adjust, want to adjust to square:<br>Keyboardview has an attribute keypreviewheight, which is the preview amount height, which can be adjusted</p></p> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>Android Keyboard Development experience</p></p></span>