自定义数字键盘

由于最近公司做的一个项目中有一个地方是用到了输入金额数字，但是由于美观原因不能使用系统自带数字键盘，所以就自己写了一个自定义数字键盘的小demo，现记录一下。先看效果图

ScreenGif.gif

xml布局文件,使用表格布局

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp">

    <TableRow
        android:layout_marginLeft="10dp"
        android:layout_height="60dp"
        android:layout_marginRight="10dp">

        <Button
            android:id="@+id/keypad_btn_one"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="1"
            android:textSize="20sp"
            style="?android:attr/borderlessButtonStyle"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_two"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            style="?android:attr/borderlessButtonStyle"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="2"
            android:textSize="20sp"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_three"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            style="?android:attr/borderlessButtonStyle"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="3"
            android:textSize="20sp"
            android:textColor="@color/colorTextGray" />
    </TableRow>

    <TableRow
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="2dp">

        <Button
            android:id="@+id/keypad_btn_fore"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="4"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="20sp"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_five"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_weight="1"
            style="?android:attr/borderlessButtonStyle"
            android:background="@drawable/selector_button_pay_num"
            android:text="5"
            android:textSize="20sp"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_six"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            style="?android:attr/borderlessButtonStyle"
            android:layout_weight="1"
            android:textSize="20sp"
            android:background="@drawable/selector_button_pay_num"
            android:text="6"
            android:textColor="@color/colorTextGray" />

    </TableRow>

    <TableRow
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="2dp">

        <Button
            android:id="@+id/keypad_btn_seven"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="20sp"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="7"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_eight"
            android:layout_width="0dp"
            android:textSize="20sp"
            style="?android:attr/borderlessButtonStyle"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="8"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_nine"
            android:layout_width="0dp"
            style="?android:attr/borderlessButtonStyle"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_weight="1"
            android:textSize="20sp"
            android:background="@drawable/selector_button_pay_num"
            android:text="9"
            android:textColor="@color/colorTextGray" />
    </TableRow>

    <TableRow
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="2dp">

        <Button
            android:id="@+id/keypad_btn_del"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="回删"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="18sp"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_zero"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="0"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="20sp"
            android:textColor="@color/colorTextGray" />

        <Button
            android:id="@+id/keypad_btn_ok"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="2dp"
            android:layout_weight="1"
            android:background="@drawable/selector_button_pay_num"
            android:text="完成"
            style="?android:attr/borderlessButtonStyle"
            android:textSize="18sp"
            android:textColor="@color/colorTextGray" />
    </TableRow>
</TableLayout>

</LinearLayout>
</pre>

自定义view类

<pre>

public class NumKeyPad extends LinearLayout implements View.OnClickListener {
private View mView;
private NumKeyPadClickListener numKeyPadClickListener = null;

private StringBuffer sb_PwdNum;

private Context mContext;

private int maxLength = 5;//最大输入长度

private Button btn_num_one, btn_num_two, btn_num_three, btn_num_fore, btn_num_five, btn_num_six, btn_num_seven, btn_num_eight, btn_num_nine, btn_num_zero, btn_ok, btn_del;


public NumKeyPad(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    getView(context);
}

public NumKeyPad(Context context, AttributeSet attrs) {
    super(context, attrs);
    getView(context);
}

public NumKeyPad(Context context) {
    super(context);
    getView(context);
}


@Override
public void onClick(View v) {

    switch (v.getId()) {

        case R.id.keypad_btn_one:
            InputNumber(1);
            break;
        case R.id.keypad_btn_two:
            InputNumber(2);
            break;
        case R.id.keypad_btn_three:
            InputNumber(3);
            break;
        case R.id.keypad_btn_fore:
            InputNumber(4);
            break;
        case R.id.keypad_btn_five:
            InputNumber(5);
            break;
        case R.id.keypad_btn_six:
            InputNumber(6);
            break;
        case R.id.keypad_btn_seven:
            InputNumber(7);
            break;
        case R.id.keypad_btn_eight:
            InputNumber(8);
            break;
        case R.id.keypad_btn_nine:
            InputNumber(9);
            break;
        case R.id.keypad_btn_zero:
            InputNumber(0);
            break;
        case R.id.keypad_btn_del:

          DelNumber();
            break;
        case R.id.keypad_btn_ok:
          numKeyPadClickListener.OkPwd(mView,sb_PwdNum);
            break;


    }
}

/**
 * 数字键盘输入
 *
 * @param num
 */
private void InputNumber(int num) {

    if (sb_PwdNum.length() >= maxLength) {
        return;
    }

    sb_PwdNum.append(num);
    numKeyPadClickListener.inputPwd(mView, sb_PwdNum);
}



/**
 * 数字键盘回删
 */
private void DelNumber() {

    if (sb_PwdNum.length() <= 0) {
        return;
    }
    sb_PwdNum.deleteCharAt(sb_PwdNum.length() - 1);

    numKeyPadClickListener.deletePwd(mView, sb_PwdNum);

}


/**
 * 得到视图
 */
private void getView(Context mContext) {

    this.mContext = mContext;

    sb_PwdNum = new StringBuffer();
    mView = LayoutInflater.from(mContext).inflate(R.layout.view_kaypad, null);
    ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    mView.setLayoutParams(params);
    addView(mView);
    btn_num_one = (Button) mView.findViewById(R.id.keypad_btn_one);
    btn_num_two = (Button) mView.findViewById(R.id.keypad_btn_two);
    btn_num_three = (Button) mView.findViewById(R.id.keypad_btn_three);
    btn_num_fore = (Button) mView.findViewById(R.id.keypad_btn_fore);
    btn_num_five = (Button) mView.findViewById(R.id.keypad_btn_five);
    btn_num_six = (Button) mView.findViewById(R.id.keypad_btn_six);
    btn_num_seven = (Button) mView.findViewById(R.id.keypad_btn_seven);
    btn_num_eight = (Button) mView.findViewById(R.id.keypad_btn_eight);
    btn_num_nine = (Button) mView.findViewById(R.id.keypad_btn_nine);
    btn_num_zero = (Button) mView.findViewById(R.id.keypad_btn_zero);
    btn_del = (Button) mView.findViewById(R.id.keypad_btn_del);
    btn_ok = (Button) mView.findViewById(R.id.keypad_btn_ok);

    btn_num_one.setOnClickListener(this);
    btn_num_two.setOnClickListener(this);
    btn_num_three.setOnClickListener(this);
    btn_num_fore.setOnClickListener(this);
    btn_num_five.setOnClickListener(this);
    btn_num_six.setOnClickListener(this);
    btn_num_seven.setOnClickListener(this);
    btn_num_eight.setOnClickListener(this);
    btn_num_nine.setOnClickListener(this);
    btn_num_zero.setOnClickListener(this);
    btn_del.setOnClickListener(this);
    btn_ok.setOnClickListener(this);

}


public void setNumKeyPadClickListener(NumKeyPadClickListener listener) {

    this.numKeyPadClickListener = listener;
}

public interface NumKeyPadClickListener {

    void deletePwd(View v, StringBuffer number);

    void OkPwd(View v, StringBuffer number);

    void inputPwd(View v, StringBuffer number);
}

}
</pre>

在项目中的使用

首先在布局文件中填写控件，然后在代码中如下使用
<pre>
mNumKeyPad= (NumKeyPad) findViewById(R.id.keyboard);
mNumKeyPad.setNumKeyPadClickListener(new NumKeyPad.NumKeyPadClickListener() {
@Override
public void deletePwd(View v, StringBuffer number) {
mTextView.setText(number);
}

       @Override
       public void OkPwd(View v, StringBuffer number) {
                mNumKeyPad.setVisibility(View.GONE);
       }

       @Override
       public void inputPwd(View v, StringBuffer number) {
           mTextView.setText(number);

       }
   });

</pre>
view中接口预留的三个方法分别对应回删，完成和点击数字按键执行的操作，可以根据不同需求进行相应的处理，这个自定义数字键盘属于比较简单的自定义组合view，希望能对各位有所帮助。

最后编辑于：2017.12.04 05:46:12

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,636评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,890评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,680评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,766评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,665评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,045评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,515评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,182评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,334评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,274评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,319评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,002评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,599评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,675评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,917评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,309评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,885评论 2赞 341

自定义数字键盘

xml布局文件,使用表格布局

自定义view类

在项目中的使用

推荐阅读更多精彩内容