2. 程式人生 > >Android自定義鍵盤詳解、自定義輸入法簡介

Android自定義鍵盤詳解、自定義輸入法簡介

阿新 • • 發佈：2019-01-22

概述

Android中有兩個系統類是用來實現鍵盤的，分別是Keyboard和KeyboardView。

Keyboard有個內部類Key，用於記錄每個鍵的資訊，如code、width、height等。而KeyBorad則持有一個List用於儲存所有Key，並對外提供介面。

KeyBoardView則是負責繪製所有Key，監聽Touch事件，根據Touch處的座標，計算出點選的是哪個Key，然後通過OnKeyboardActionListener通知呼叫處，點選的是哪個Key、code是多少，呼叫處再把該Key對應的string值設定到EidtText中。

大致流程就是這樣，但是有很多細節、坑需要注意，本文的主要內容就是來分析這些細節和坑。

這兩個類的原始碼都很短，只有1000行左右，但是這裡並不準備對所有原始碼進行分析，為什麼呢？因為這兩個類裡面的成員變數、方法幾乎都是private的，完全無法供我們修改、自定義。所以對於自定義鍵盤要求很高、很炫酷的需求，還是得完全重寫特定的“KeyBoradView”，KeyBorad倒是可以直接用。

自定義鍵盤

下面以一個最簡單的例子來講解如何使用，該注意的點就直接在程式碼中以註釋形勢給出。

1、首先在res目錄下建立xml目錄，在xml目錄下建立qwer.xml檔案，用於鍵盤佈局，程式碼如下：

<?xml version="1.0" encoding="UTF-8"?>
<Keyboard
 
 android:keyWidth="10%p" android:keyHeight="45dp"
    android:horizontalGap="3px" android:verticalGap="3px"
    xmlns:android="http://schemas.android.com/apk/res/android">
// KeyBoard標籤下的keyWidth="10%p"表示下面的每個鍵寬度佔parent寬度的10%，xxxGap屬性是鍵與鍵之間的水平和垂直間隔

    <Row>
        <Key android:codes="113" android:keyEdgeFlags
 
="left"
            android:keyLabel="q" />
        <Key android:codes="119" android:keyLabel="w" />
        <Key android:codes="101" android:keyLabel="e" />
        <Key android:codes="114" android:keyLabel="r" />
        <Key android:codes="116" android:keyLabel="t" />
        <Key android:codes="121" android:keyLabel="y" />
        <Key android:codes="117" android:keyLabel="u" />
        <Key android:codes="105" android:keyLabel="i" />
        <Key android:codes="111" android:keyLabel="o" />
        <Key android:codes="112" android:keyEdgeFlags="right"
            android:keyLabel="p" />
    </Row>
// codes屬性就是該Key對應的ASCII碼（其實也可以不一定得是ASCII碼，反正後面會在監聽事件中返回給你這個codes值，你想怎麼處理都行），keyLabel屬性就是該Key顯示在鍵盤上的string，還有個keyIcon屬性是該Key顯示在鍵盤上的drawable

    <Row>
        <Key android:horizontalGap="5%p" android:codes="97"
            android:keyEdgeFlags="left" android:keyLabel="a" />
        <Key android:codes="115" android:keyLabel="s" />
        <Key android:codes="100" android:keyLabel="d" />
        <Key android:codes="102" android:keyLabel="f" />
        <Key android:codes="103" android:keyLabel="g" />
        <Key android:codes="104" android:keyLabel="h" />
        <Key android:codes="106" android:keyLabel="j" />
        <Key android:codes="107" android:keyLabel="k" />
        <Key android:codes="108" android:keyEdgeFlags="right"
            android:keyLabel="l" />
    </Row>
// Key標籤下的horizontalGap屬性表示距離parent的距離

    <Row>
        <Key android:keyWidth="15p" android:codes="-1"
            android:keyEdgeFlags="left" android:keyLabel="Shift" />
        <Key android:codes="122" android:keyLabel="z" />
        <Key android:codes="120" android:keyLabel="x" />
        <Key android:codes="99" android:keyLabel="c" />
        <Key android:codes="118" android:keyLabel="v" />
        <Key android:codes="98" android:keyLabel="b" />
        <Key android:codes="110" android:keyLabel="n" />
        <Key android:codes="109" android:keyLabel="m" />
        <Key android:keyWidth="15p" android:codes="-5"
            android:keyEdgeFlags="right" android:isRepeatable="true"
            android:keyLabel="Delete" />
    </Row>
// Key標籤下的keyWidth屬性會覆蓋parent中賦的值，isRepeatable屬性表示是長按時是否重複輸入

    <Row android:rowEdgeFlags="bottom">
        <Key android:keyWidth="20%p" android:codes="-2"
            android:keyLabel="12#" />
        <Key android:keyWidth="15%p" android:codes="44"
            android:keyLabel="," />
        <Key android:keyWidth="30%p" android:codes="32"
            android:isRepeatable="true" android:keyLabel="Space" />
        <Key android:keyWidth="15%p" android:codes="46"
            android:keyLabel="." />
        <Key android:keyWidth="20%p" android:codes="-3"
            android:keyEdgeFlags="right" android:keyLabel="完成" />
    </Row>
</Keyboard>

2、建立自定義的MyKeyBoradView，主要用於處理邏輯，讓外界使用更加方便。網上很多文章沒有建立自定義View，用的XXXUtil也是一樣的。個人覺得建立自定義的View封裝好這些處理邏輯更好一些。

public class MyKeyBoardView extends LinearLayout {
    private EditText mEditText;

    public MyKeyBoardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        setOrientation(VERTICAL);
        LayoutInflater.from(context).inflate(R.layout.lyt_keyboard, this, true);

        KeyboardView kv = (KeyboardView) findViewById(R.id.kv_lyt_keyboard);
        // 載入上面的qwer.xml鍵盤佈局，new出KeyBoard物件
        Keyboard kb = new Keyboard(context, R.xml.qwer);

        kv.setKeyboard(kb); 
        kv.setEnabled(true);
        // 設定是否顯示預覽，就是某個鍵時，上面彈出小框顯示你按下的鍵，稱為預覽框
        kv.setPreviewEnabled(true); 
        // 設定監聽器
        kv.setOnKeyboardActionListener(mListener);
    }

    // 設定接受字元的EditText
    public void setStrReceiver(EditText et) {
        mEditText = et;
    }

    private KeyboardView.OnKeyboardActionListener mListener = new KeyboardView.OnKeyboardActionListener() {
        @Override
        public void swipeUp() {
        }

        @Override
        public void swipeRight() {
        }

        @Override
        public void swipeLeft() {
        }

        @Override
        public void swipeDown() {
        }

        @Override
        public void onText(CharSequence text) {
        }

        @Override
        public void onRelease(int primaryCode) {
            // 手指離開該鍵（擡起手指或手指移動到其它鍵）時回撥
        }

        @Override
        public void onPress(int primaryCode) {
            // 當某個鍵被按下時回撥，只有press_down時會觸發，長按不會多次觸發
        }

        @Override
        public void onKey(int primaryCode, int[] keyCodes) {
            // 鍵被按下時回撥，在onPress後面。如果isRepeat屬性設定為true，長按時會連續回撥

            Editable editable = mEditText.getText();
            int selectionPosition = mEditText.getSelectionStart();

            if (primaryCode == Keyboard.KEYCODE_DELETE) {
                // 如果按下的是delete鍵，就刪除EditText中的str
                if (editable != null && editable.length() > 0) {
                    if (selectionPosition > 0) {
                        editable.delete(selectionPosition - 1, selectionPosition);
                    }
                }
            } else {
                // 把該鍵對應的string值設定到EditText中
                editable.insert(selectionPosition, Character.toString((char) primaryCode));
            }
            // 其實還有很多code的判斷，比如“完成”鍵、“Shift”鍵等等，這裡就不一一列出了
            // 對於Shift鍵被按下，需要做兩件事，一件是把鍵盤顯示字元全部切換為大寫，呼叫setShifted()方法就可以了；另一件是把Shift狀態下接收到的正常字元（Shift、完成、Delete等除外）的code值-32再轉換成相應str，插入到EidtText中
        }
    };
}

3、自定義的MyKeyBoardView對應的layout檔案，以及預覽框對應的layout檔案：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.inputmethodservice.KeyboardView
        android:id="@+id/kv_lyt_keyboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#999" 
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:keyBackground="@color/colorWhite"
        android:keyTextColor="#333"
        android:shadowColor="#00000000" 
        android:keyPreviewHeight="100dp"
        android:keyPreviewLayout="@layout/lyt_preview"/>

    // background是整個鍵盤View的背景，設定了鍵的xxxgap後，中間的縫隙就會是這個背景色
    // keyBackground是每個鍵的背景
    // keyTextColor是每個鍵中字元的textColor
    // shadowColor是每個鍵中字元的shadow，請設定為全透明！！！
    // keyPreviewHeight是預覽框的高度！！！
    // keyPreviewLayout是預覽框對應的佈局，跟佈局必須是TextView！！！
</merge>

lyt_preview檔案程式碼：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_preview"
    android:gravity="center"
    android:paddingLeft="100dp"
    android:paddingRight="100dp"
    android:textColor="#000"
    android:textSize="30sp"
    android:textStyle="bold"/>

4、然後就是最後一個步驟，Activity中呼叫了。Activity的佈局檔案就不貼出了，就是最上面一個EditText，最下面一個MyKeyBoardView。

ublic class MainActivity extends Activity {
    private MyKeyBoardView mKeyView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        EditText editText = (EditText) findViewById(R.id.et_main);
        mKeyView = (MyKeyBoardView) findViewById(R.id.kv_main);
        mKeyView.setStrReceiver(editText);

        editText.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                imm.hideSoftInputFromWindow(v.getWindowToken(), 0);

                mKeyView.setVisibility(View.VISIBLE);
                return true;
            }
        });
    }
}

遇到的問題

1、預覽框的顯示效果
為了不讓文章太長，我就不列出各種可能的坑了，直接列出最正確的做法，這裡就得分析下原始碼了。下面所有原始碼都是android7.0的原始碼，其他版本可能會有細微不同。

看KeyBoardView中的showKey(）方法：

private void showKey(final int keyIndex) {
        final PopupWindow previewPopup = mPreviewPopup;
        final Key[] keys = mKeys;
        if (keyIndex < 0 || keyIndex >= mKeys.length) return;
        Key key = keys[keyIndex];
        if (key.icon != null) {
            mPreviewText.setCompoundDrawables(null, null, null, 
                    key.iconPreview != null ? key.iconPreview : key.icon);
            mPreviewText.setText(null);
        } else {
            mPreviewText.setCompoundDrawables(null, null, null, null);
            mPreviewText.setText(getPreviewText(key));
            if (key.label.length() > 1 && key.codes.length < 2) {
                mPreviewText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mKeyTextSize);
                mPreviewText.setTypeface(Typeface.DEFAULT_BOLD);
            } else {
                mPreviewText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mPreviewTextSizeLarge);
                mPreviewText.setTypeface(Typeface.DEFAULT);
            }
        }
        mPreviewText.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), 
                MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));

        // 計算預覽框的寬度，由TextView和Key寬度中較大的決定
        int popupWidth = Math.max(mPreviewText.getMeasuredWidth(), key.width 
                + mPreviewText.getPaddingLeft() + mPreviewText.getPaddingRight());

        // 確定預覽框的高度。這裡的mPreviewHeight是在構造方法中獲取xml屬性中的值，對應的屬性就是keyPreviewHeight
        // 是不是很坑爹，寬度在TextView中設定，高度在KeyBoardView的xml屬性中設定。。。
        final int popupHeight = mPreviewHeight;

        LayoutParams lp = mPreviewText.getLayoutParams();
        if (lp != null) {
            lp.width = popupWidth;
            lp.height = popupHeight;
        }

        // mPreviewCentered預設為false，7.0版本原始碼中沒有地方會改變其值，所有一定會進入下面的判斷
        if (!mPreviewCentered) {
            // 以Key的x座標為基準，計算預覽框的x座標
            // 這裡注意了，如果預覽TextView直接設定寬度，由於預覽框和Key的左邊是對齊的，如果預覽框和Key的寬度不一樣，顯示就很醜；
            // 所以正確的設定預覽框寬度的方法是通過設定padding值的大小來控制預覽框的寬度
            mPopupPreviewX = key.x - mPreviewText.getPaddingLeft() + mPaddingLeft;

            // 以Key的y座標為基準，計算預覽框的y座標
            // 這裡又要注意了，mPreviewOffset是從xml屬性中取的值，如果不設定該屬性就會取預設值，不同android版本的預設值是不一樣的。。。所以一定要設定一下這個屬性
            mPopupPreviewY = key.y - popupHeight + mPreviewOffset;
        } else {
            // TODO: Fix this if centering is brought back
            mPopupPreviewX = 160 - mPreviewText.getMeasuredWidth() / 2;
            mPopupPreviewY = - mPreviewText.getMeasuredHeight();
        }
        mHandler.removeMessages(MSG_REMOVE_PREVIEW);
        getLocationInWindow(mCoordinates);

        mCoordinates[0] += mMiniKeyboardOffsetX; // Offset may be zero
        mCoordinates[1] += mMiniKeyboardOffsetY; // Offset may be zero

        // Set the preview background state
        mPreviewText.getBackground().setState(
                key.popupResId != 0 ? LONG_PRESSABLE_STATE_SET : EMPTY_STATE_SET);
        mPopupPreviewX += mCoordinates[0];
        mPopupPreviewY += mCoordinates[1];

        // If the popup cannot be shown above the key, put it on the side
        getLocationOnScreen(mCoordinates);
        if (mPopupPreviewY + mCoordinates[1] < 0) {
            // If the key you're pressing is on the left side of the keyboard, show the popup on
            // the right, offset by enough to see at least one key to the left/right.
            if (key.x + key.width <= getWidth() / 2) {
                mPopupPreviewX += (int) (key.width * 2.5);
            } else {
                mPopupPreviewX -= (int) (key.width * 2.5);
            }
            mPopupPreviewY += popupHeight;
        }

        if (previewPopup.isShowing()) {
            previewPopup.update(mPopupPreviewX, mPopupPreviewY,
                    popupWidth, popupHeight);
        } else {
            previewPopup.setWidth(popupWidth);
            previewPopup.setHeight(popupHeight);
            previewPopup.showAtLocation(mPopupParent, Gravity.NO_GRAVITY, 
                    mPopupPreviewX, mPopupPreviewY);
        }
        mPreviewText.setVisibility(VISIBLE);
    }


2、鍵盤字型顯示模糊
KeyBoardView會遍歷所有key，然後繪製其鍵盤字元，下面看下繪製邏輯：

if (label != null) {
    // For characters, use large font. For labels like "Done", use small font.
    if (label.length() > 1 && key.codes.length < 2) {
        paint.setTextSize(mLabelTextSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD);
    } else {
        paint.setTextSize(mKeyTextSize);
        paint.setTypeface(Typeface.DEFAULT);
    }
    // Draw a drop shadow for the text
    // 看到沒，會在字元上面繪製一層shadow。。。所以在xml屬性中一定要將該屬性設定為全透明
    paint.setShadowLayer(mShadowRadius, 0, 0, mShadowColor);
    // Draw the text
    canvas.drawText(label,(key.width - padding.left - padding.right) / 2+ padding.left,(key.height - padding.top - padding.bottom) / 2+ (paint.getTextSize() - paint.descent()) / 2 + padding.top,paint);
    // Turn off drop shadow
    paint.setShadowLayer(0, 0, 0, 0);
}

自定義輸入法

輸入法以後再寫吧。。。。

相關推薦

Android自定義鍵盤詳解、自定義輸入法簡介

概述 Android中有兩個系統類是用來實現鍵盤的，分別是Keyboard和KeyboardView。 Keyboard有個內部類Key，用於記錄每個鍵的資訊，如code、width、height等。而KeyBorad則持有一個List用於儲存所有Key，並

android介面回撥詳解、簡單例子＋複雜例子

package test.ban.com.callback;/** * Created by apple on 16/8/30. */ import android.annotation.SuppressLint; import android.app.Activity; import android.

angular 自定義指令 詳解--restrict、restrict、replace

emp bold span 類型 ret space con 設置 註意 Angularjs 允許根據實際業務需要自定義指令, 通過angular全局對象下的 directive 方法實現。可以自定義屬性、自定義標簽、自定義功能 接下來定義一個名叫custom的指令，並利用

深究AngularJS——自定義服務詳解(factory、service、provider)

string targe 返回 config 屬性 doctype 三種方式 啟用 print 前言 3種創建自定義服務的方式。 Factory Service Provider 大家應該知道，AngularJS是後臺人員在工作之余發明的，他主要應用了後臺早就存

Android自定義view詳解

this boolean mar 處理 都是 並且 jdk text 命名 從繼承開始 懂點面向對象語言知識的都知道：封裝，繼承和多態，這是面向對象的三個基本特征，所以在自定義View的時候，最簡單的方法就是繼承現有的View 通過上面這段代碼，我定義了一個Ske

Android Gradle 自定義Task 詳解

png 發布 我們 批處理 使用總結 實用 shift fonts 博客 轉載請標明出處：http://blog.csdn.net/zhaoyanjun6/article/details/76408024 本文出自【趙彥軍的博客】 一：Gradle 是什麽 Gradl

Spring Boot 配置檔案詳解：自定義屬性、隨機數、多環境配置等

相信很多人選擇Spring Boot主要是考慮到它既能兼顧Spring的強大功能，還能實現快速開發的便捷。我們在Spring Boot使用過程中，最直觀的感受就是沒有了原來自己整合Spring應用時繁多的XML配置內容，替代它的是在pom.xml中引入模組化的Starter POMs，其中各個模組都有自己的預

Android中通過友盟統計上傳自定義錯誤詳解

友盟統計中，其中有一個錯誤統計板塊，可以自動上傳錯誤統計，或者上傳自定義的錯誤統計，不過友盟中的這一部分，只是說了這麼幾句話，沒有詳細的說明怎麼使用 **************************************************************

Android-Handler機制詳解並自定義Handler

之前研究過Android的Handler機制，但是一直沒有機會自己實現一次。最近又看到這個Handler機制，於是決定自己實現以下這個Handler機制。 首先，簡單介紹以下Handler機制。 Handler機制在Android中通常用來更新UI：子執行緒

Android事件傳遞機制詳解（巢狀自定義View示例）

一、概述   自定義View如果嵌套了自定義View，可能簡單寫一個onTouchEvent處理事件已經不能解決你的需要。簡單舉個例子： 你自定義了一個容器View，簡稱為父View，在這裡監聽點選事件，做事情A，監聽滑動做事情B 然後你又自定了一個View，放入該容器

【朝花夕拾】Android自定義View篇之（四）自定義View的三種實現方式及自定義屬性詳解

前言        儘管Android系統提供了不少控制元件，但是有很多酷炫效果仍然是系統原生控制元件無法實現的。好在Android允許自定義控制元件，來彌補原生控制元件的不足。但是在很多初學者看來，自定義View似乎很難掌握。其中有很大一部分原因是我們平時看到的自定

Android 自定義 View 詳解

View 的繪製系列文章： Android View 繪製流程之 DecorView 與 ViewRootImpl Android View 的繪製流程之 Measure 過程詳解 (一) Android View 的繪製流程之 Layout 和 Draw 過程詳解 (二) Android V

angular 自定義指令詳解 Directive

聲明 其他 原型繼承 創建 tool 兩個 模板 變化 組合 廢話不多說，下面就直接上代碼 //angular指令的定義，myDirective ，使用駝峰命名法 angular.module(‘myApp‘, []) .directive(‘myDirective‘,

AngularJs自定義指令詳解（5） - link

演示 hang cursor off drag font 雙向 事件 date 在指令中操作DOM，我們需要link參數，這參數要求聲明一個函數，稱之為鏈接函數。 寫法： link: function(scope, element, attrs) {　　// 在這裏操作DO

Spring Boot 自定義日誌詳解

本節內容基於 Spring Boot 2.0. 你所需具備的基礎 什麼是 Spring Boot? Spring Boot 核心配置檔案詳解 Spring Boot 開啟的 2 種方式 Spring Boot 自動配置原理、實戰 Spring Boot 2.x 啟動全過程原始碼分析

Service 服務詳解 及自定義服務模板

文章目錄 1、服務簡介 2、服務的生命週期 1） Service 的 啟動 停止 2)、服務的生命週期的方法 3、使用startService 啟動後服務

我的springboot之路(2)----springboot自定義配置詳解

一、前言 我的springboot之路(1)介紹了springboot的誕生背景以及優點等，我們知道springboot簡化了程式設計配置，它體現出了一種 約定優於配置，也稱作按約定程式設計，是一種軟體設計正規化，旨在減少軟體開發人員需做決定的數量，獲得簡單的好處，而又不失靈活性。 一般

SpringBoot-配置檔案詳解之自定義配置檔案

今天我們一起來學習一下如何自定義配置檔案，在這之前我們可能會把配置項寫在application.properties或者application.yml中。這是springboot預設讀取的配置檔案，但是

自定義View詳解(3)

大家教師節快樂啊，不知道勤學的Coder們有沒有去嘗試下繪製上篇文章中最後留下的進階效果，不管怎樣，還是一起動手寫一遍吧！看看套路是否一致。 水波紋 首先來看圖-水波紋中的效果，其具有以下特點： 從內到外四層，內圓外環； 從內到外四個色值；

Android中XML的名稱空間、自定義屬性

基本概念介紹 名稱空間(namespace) XML 名稱空間提供避免元素命名衝突的方法。 打個比方,A學校有名學生叫做林小明,B學校也有名學生叫林小明,那我們如何識別這兩名擁有相同名字的同學呢?這時候名稱空間就派上用場了。A和B此時就可以被當成是名稱空間了。也就是說，