Android 仿微信自定義數(shù)字鍵盤(pán)的實(shí)現(xiàn)代碼

更新時(shí)間：2017年07月19日 14:07:27 作者：ayuhani

本篇文章主要介紹了Android 仿微信自定義數(shù)字鍵盤(pán)的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，有興趣的可以了解一下

本文介紹了Android 仿微信自定義數(shù)字鍵盤(pán)的實(shí)現(xiàn)代碼，分享給大家，希望對(duì)大家有幫助

最終效果：

實(shí)現(xiàn)這個(gè)自定義鍵盤(pán)的思路很簡(jiǎn)單：

要寫(xiě)出一個(gè)數(shù)字鍵盤(pán)的布局；
與 Edittext 結(jié)合使用，對(duì)每個(gè)按鍵的點(diǎn)擊事件進(jìn)行處理；
禁用系統(tǒng)軟鍵盤(pán)。

有了思路，實(shí)現(xiàn)起來(lái)就不難了。

1. 實(shí)現(xiàn)鍵盤(pán)的 xml 布局

網(wǎng)格樣式的布局用 GridView 或者 RecyclerView 都可以實(shí)現(xiàn)，其實(shí)用 GridView 更方便一些，不過(guò)我為了多熟悉 RecyclerView 的用法，這里選擇用了 RecyclerView。

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

  <View
    android:layout_width="match_parent"
    android:layout_height="2px"
    android:background="@color/btn_gray"/>

  <RelativeLayout
    android:id="@+id/rl_back"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/iv_back_bg"
    android:padding="10dp">

    <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:src="@mipmap/keyboard_back"/>
  </RelativeLayout>

  <View
    android:layout_width="match_parent"
    android:layout_height="1px"
    android:background="@color/btn_gray"/>

  <android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/keyboard_bg"
    android:overScrollMode="never"></android.support.v7.widget.RecyclerView>

</LinearLayout>

RecyclerView 用來(lái)實(shí)現(xiàn)鍵盤(pán)布局，上面的 RelativeLayout 則是為了實(shí)現(xiàn)收起鍵盤(pán)的點(diǎn)擊事件。

2. 在代碼中實(shí)現(xiàn)鍵盤(pán)布局，填充數(shù)據(jù)、增加點(diǎn)擊事件

我們新建類(lèi) KeyboardView 繼承自 RelativeLayout，關(guān)聯(lián)上面的布局文件，然后做一些初始化操作：對(duì) RecyclerView 填充數(shù)據(jù)、設(shè)置適配器，設(shè)置出現(xiàn)和消失的動(dòng)畫(huà)效果，寫(xiě)一些會(huì)用到的方法等。

public class KeyboardView extends RelativeLayout {

  private RelativeLayout rlBack;
  private RecyclerView recyclerView;
  private List<String> datas;
  private KeyboardAdapter adapter;
  private Animation animationIn;
  private Animation animationOut;


  public KeyboardView(Context context) {
    this(context, null);
  }

  public KeyboardView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public KeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs, defStyleAttr);
  }

  private void init(Context context, AttributeSet attrs, int defStyleAttr) {
    LayoutInflater.from(context).inflate(R.layout.layout_key_board, this);
    rlBack = findViewById(R.id.rl_back);
    rlBack.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) { // 點(diǎn)擊關(guān)閉鍵盤(pán)
        dismiss();
      }
    });
    recyclerView = findViewById(R.id.recycler_view);

    initData();
    initView();
    initAnimation();
  }

  // 填充數(shù)據(jù)
  private void initData() {
    datas = new ArrayList<>();
    for (int i = 0; i < 12; i++) {
      if (i < 9) {
        datas.add(String.valueOf(i + 1));
      } else if (i == 9) {
        datas.add(".");
      } else if (i == 10) {
        datas.add("0");
      } else {
        datas.add("");
      }
    }
  }

  // 設(shè)置適配器
  private void initView() {
    recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));
    adapter = new KeyboardAdapter(getContext(), datas);
    recyclerView.setAdapter(adapter);
  }

  // 初始化動(dòng)畫(huà)效果
  private void initAnimation() {
    animationIn = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_in);
    animationOut = AnimationUtils.loadAnimation(getContext(), R.anim.keyboard_out);
  }

  // 彈出軟鍵盤(pán)
  public void show() {
    startAnimation(animationIn);
    setVisibility(VISIBLE);
  }

  // 關(guān)閉軟鍵盤(pán)
  public void dismiss() {
    if (isVisible()) {
      startAnimation(animationOut);
      setVisibility(GONE);
    }
  }

  // 判斷軟鍵盤(pán)的狀態(tài)
  public boolean isVisible() {
    if (getVisibility() == VISIBLE) {
      return true;
    }
    return false;
  }

  public void setOnKeyBoardClickListener(KeyboardAdapter.OnKeyboardClickListener listener) {
    adapter.setOnKeyboardClickListener(listener);
  }

  public List<String> getDatas() {
    return datas;
  }

  public RelativeLayout getRlBack() {
    return rlBack;
  }
}

Adapter 里面都是很簡(jiǎn)單的代碼，這里就不貼出了，文章末尾我會(huì)給出源碼下載地址。

到這里為止，自定義數(shù)字鍵盤(pán)基本就算寫(xiě)好了，不過(guò)最重要的還是要和 Edittext 結(jié)合使用。

3. 與 Edittext 結(jié)合使用

1. 禁用系統(tǒng)軟鍵盤(pán)

if (Build.VERSION.SDK_INT <= 10) {
   etInput.setInputType(InputType.TYPE_NULL);
} else {
   getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
   try {
     Class<EditText> cls = EditText.class;
     Method setShowSoftInputOnFocus = cls.getMethod("setShowSoftInputOnFocus", boolean.class);
     setShowSoftInputOnFocus.setAccessible(true);
     setShowSoftInputOnFocus.invoke(etInput, false);
   } catch (Exception e) {
     e.printStackTrace();
   }
}

在網(wǎng)上找了一些方法，但是點(diǎn)擊 Edittext 的時(shí)候系統(tǒng)軟鍵盤(pán)依然會(huì)彈出。最后找到了這個(gè)方法，利用反射強(qiáng)制不彈出軟鍵盤(pán)，效果不錯(cuò)。

2. 處理各個(gè)按鍵的點(diǎn)擊事件

  @Override
  public void onKeyClick(View view, RecyclerView.ViewHolder holder, int position) {
    switch (position) {
      case 9: // 按下小數(shù)點(diǎn)
        String num = etInput.getText().toString().trim();
        if (!num.contains(datas.get(position))) {
          num += datas.get(position);
          etInput.setText(num);
          etInput.setSelection(etInput.getText().length());
        }
        break;
      default: // 按下數(shù)字鍵
        if ("0".equals(etInput.getText().toString().trim())) { // 第一個(gè)數(shù)字按下0的話，第二個(gè)數(shù)字只能按小數(shù)點(diǎn)
          break;
        }
        etInput.setText(etInput.getText().toString().trim() + datas.get(position));
        etInput.setSelection(etInput.getText().length());
        break;
    }
  }

  @Override
  public void onDeleteClick(View view, RecyclerView.ViewHolder holder, int position) {
    // 點(diǎn)擊刪除按鈕
    String num = etInput.getText().toString().trim();
    if (num.length() > 0) {
      etInput.setText(num.substring(0, num.length() - 1));
      etInput.setSelection(etInput.getText().length());
    }
  }

邏輯也非常簡(jiǎn)單，看代碼就明白了。最終的效果就是第一張圖的樣子。

這個(gè)鍵盤(pán)很簡(jiǎn)單，打算之后寫(xiě)一個(gè)模仿微信或者支付寶的支付密碼輸入布局。

->->->點(diǎn)擊下載源碼<-<-<-

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: