自定义控件-----用自定义linearLayout实现数字键盘

先上效果图，类似这种的

一、首先我们自定义一个继承自LinearLayout的类，如下KeyBoardLinearLayout

package bai.bai.bai.demo;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class KeyBoardLinearLayout extends LinearLayout implements AdapterView.OnItemClickListener, View.OnClickListener {

    String[] datas = {"1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "del"};//数字键盘上的显示内容
    private int mItemHeight; //行高
    private float mItemTextSize; //item文字大小
    private String mInputNum; //输入数字
    private KeyBoardNumAdapter mAdapter;

    private KeyBoartTouchListener mKeyBoartTouchListener;


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

    public KeyBoardLinearLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

	//-------1-------下面的layout为整体布局的layout
        View view = LayoutInflater.from(context).inflate(R.layout.keyboard_linearlayout, null);
        setLinearLayoutStyle(context, attrs, view);
        addView(view);

    }

    private void setLinearLayoutStyle(Context context, AttributeSet attrs, View view) {
	//------2-------这个styleable为自己写在value文件夹的attrs里的自定义style，用于自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.KeyBoardLinearLayoutStyle);
        mItemHeight = array.getDimensionPixelSize(R.styleable.KeyBoardLinearLayoutStyle_itemHeight, 100);
        mItemTextSize = array.getDimension(R.styleable.KeyBoardLinearLayoutStyle_itemTextSize, 30);

        GridView gvKeyBoardNum = (GridView) view.findViewById(R.id.gr_keyboard_num); //左侧键盘
        gvKeyBoardNum.setOnItemClickListener(this);
        mAdapter = new KeyBoardNumAdapter(context, Arrays.asList(datas));
        gvKeyBoardNum.setAdapter(mAdapter);

        TextView tvKeyBoardEmpty = (TextView) view.findViewById(R.id.tv_keyboard_empty); //右侧清空按钮
        tvKeyBoardEmpty.setOnClickListener(this);
        tvKeyBoardEmpty.setTextSize(mItemTextSize);

        TextView tvKeyBoardOk = (TextView) view.findViewById(R.id.tv_keyboard_ok); //右侧确定按钮
        tvKeyBoardOk.setOnClickListener(this);
        tvKeyBoardOk.setTextSize(mItemTextSize);
    }


	//为清空、确定按钮添加监听
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_keyboard_empty:
                mKeyBoartTouchListener.onEmptyTouch();
                break;
            case R.id.tv_keyboard_ok:
                mKeyBoartTouchListener.onOkTouch();
                break;
        }
    }

	//为数字键盘添加监听
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        mKeyBoartTouchListener.onNumberTouch(mAdapter.getItem(position) + "");
    }

	//在引用的时候必须要实现此接口，就像要实现button的监听必须要实现OnClickListener接口一样
    public interface KeyBoartTouchListener {
        void onNumberTouch(String inputNumber);

        void onEmptyTouch();

        void onOkTouch();
    }
	//同button的setOnClickListener一样
    public void setKeyBoartTouchListener(KeyBoartTouchListener listener) {
        this.mKeyBoartTouchListener = listener;
    }

	//数字键盘的adapter
    private class KeyBoardNumAdapter extends BaseAdapter {

        private Context mContext;
        private List<String> mNumbers;
        private LayoutInflater inflater;

        public KeyBoardNumAdapter(Context mContext, List<String> mNumbers) {
            this.mContext = mContext;
            this.mNumbers = getNumbers(mNumbers);
            this.inflater = LayoutInflater.from(mContext);
        }

        private List<String> getNumbers(List<String> mNumbers) {
            if (mNumbers == null) {
                mNumbers = new ArrayList<>();
            }
            return mNumbers;
        }

        @Override
        public int getCount() {
            return mNumbers.size();
        }

        @Override
        public Object getItem(int position) {
            return mNumbers.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHodler hodler;
            if (convertView == null) {
                hodler = new ViewHodler();
		//------3------这个layout是数字键盘的layout
                convertView = inflater.inflate(R.layout.item_key_button, null);
                hodler.mTvStyle = (TextView) convertView.findViewById(R.id.tv_style);
                hodler.mTvStyle.setTextSize(mItemTextSize);
                hodler.mLlStyle = (LinearLayout) convertView.findViewById(R.id.ll_style);

                convertView.setTag(hodler);
            } else {
                hodler = (ViewHodler) convertView.getTag();
            }
            setViewHeight(hodler.mTvStyle);
            setViewHeight(hodler.mLlStyle);

            String number = mNumbers.get(position);
            hodler.mTvStyle.setText(number);

	//这个是为了把返回键变为图片的返回键
            if (position == 11) {
                hodler.mTvStyle.setVisibility(GONE);
                hodler.mLlStyle.setVisibility(VISIBLE);
            }

            return convertView;
        }

        /**
         * 设置子控件的高度
         */
        private void setViewHeight(View view) {
            LayoutParams params = (LayoutParams) view.getLayoutParams();
            params.height = mItemHeight;
            view.setLayoutParams(params);
        }

        private class ViewHodler {
            private TextView mTvStyle;
            private LinearLayout mLlStyle;

        }

    }


}

二、现在是上面红色的三个准备条件

1、整体键盘的layout布局，里面的具体dimen、drawable、color可根据自己的来设置

<?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">

    <!--输入键盘-->
    <LinearLayout
        android:id="@+id/ll_key_board"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/main_key_board_line_color">

        <GridView
            android:id="@+id/gr_keyboard_num"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_weight="3"
            android:background="@color/main_key_board_line_color"
            android:horizontalSpacing="@dimen/main_key_board_line"
            android:numColumns="3"
            android:verticalSpacing="@dimen/main_key_board_line" />
        <!-- android:verticalSpacing="1dp" -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_keyboard_empty"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/select_key_board_tv_empty"
                android:gravity="center"
                android:text="清空"
                android:textColor="#eee"
                android:textSize="@dimen/button_text_size" />

            <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/main_key_board_line"
                android:background="@color/main_key_board_line_color" />

            <TextView
                android:id="@+id/tv_keyboard_ok"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="3"
                android:background="@drawable/select_key_board_tv_ok"
                android:gravity="center"
                android:text="确定"
                android:textColor="#eee"
                android:textSize="@dimen/button_text_size" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

1.1、此时可补充一下按键的选择器，比如ok键的选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:drawable="@color/input_cash_press" android:state_pressed="true" />-->
    <!--<item android:drawable="@color/input_cash_press" android:state_selected="true" />-->
    <!--<item android:drawable="@color/input_cash_normal" android:state_enabled="true" />-->

    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <!-- 按下 -->
            <solid android:color="#655f" />
            <!--<stroke android:width="1dp" android:color="@color/main_calculate_text_color" />-->
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <!-- 抬起 -->
            <solid android:color="#e39f" />
            <!--<stroke android:width="1dp" android:color="@color/main_calculate_text_color" />-->
        </shape>
    </item>

</selector>

2、在res --> values文件夹下的attrs文件（如果没有就自己新建一个）里添加，自定义属性

<?xml version="1.0" encoding="utf-8"?>


<resources>
    <declare-styleable name="KeyBoardLinearLayoutStyle">
        <attr name="itemHeight" format="dimension"/>//item的行高
        <attr name="itemTextSize" format="dimension"/>//文字大小
    </declare-styleable>
</resources>

3、数字键盘的item

<?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="100dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_style"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@drawable/select_key_board_tv_num"
        android:gravity="center"
        android:text="del"
        android:textSize="@dimen/button_text_size" />

    <LinearLayout
        android:id="@+id/ll_style"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@drawable/select_key_board_tv_num"
        android:gravity="center"
        android:visibility="gone">

        <ImageView
            android:layout_width="@dimen/button_image_size"
            android:layout_height="@dimen/button_image_size"
            android:src="@drawable/ic_launcher_background" />

    </LinearLayout>
    

</LinearLayout>

三、引用自定义控件

package bai.bai.bai.demo;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends Activity implements KeyBoardLinearLayout.KeyBoartTouchListener{ //要实现接口

    KeyBoardLinearLayout keyBoardLinearLayout;

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

        keyBoardLinearLayout = (KeyBoardLinearLayout)findViewById(R.id.kbll_keyboard);
        keyBoardLinearLayout.setKeyBoartTouchListener(this);

    }


    @Override
    public void onNumberTouch(String inputNumber) {
        Toast.makeText(MainActivity.this, "我点击了数字:" + inputNumber, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onEmptyTouch() {
        Toast.makeText(MainActivity.this, "我点击了清空按钮", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onOkTouch() {
        Toast.makeText(MainActivity.this, "我点击了确定按钮", Toast.LENGTH_SHORT).show();
    }
}

在布局里直接引用自定义view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <bai.bai.bai.demo.KeyBoardLinearLayout
        android:id="@+id/kbll_keyboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemHeight="50dp"//这个是每一行的高度
        app:itemTextSize="10sp" />//这个是文字大小

</RelativeLayout>

ok，完成

自定义控件-----用自定义linearLayout实现数字键盘

猜你喜欢