Android自定义控件的三种实现方式

Android 自定义控件三种实现方法为组合原生控件,自己绘制和继承原生控件.

1.组合原生控件

将自己需要的控件组合起来变成一个新控件,如下制作常见的app页面头部.

 新建一个Android项目,创建一个头部布局view_top.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical"    android:background="#50e7ab"    android:padding="10dp">    <ImageView        android:id="@+id/top_left"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@mipmap/fanhui_bai" />    <TextView        android:id="@+id/top_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"RelativeLayout         android:layout_centerVertical="true"        android:text="首页"        android:textSize="17sp"        android:textColor="#ffffff" />    <TextView        android:id="@+id/top_right"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="提交"        android:textSize="17sp"        android:textColor="#ffffff"        android:layout_centerVertical="true"        android:layout_alignParentRight="true" /></RelativeLayout>

下面创建一个TopView继承RelativeLayout

package t.s.com;import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;/** * Created by Administrator on 2017/10/19. */public class TopView extends RelativeLayout {    // 返回按钮控件    private ImageView top_left;    // 标题Tv    private TextView top_title;    private TextView top_right;    public TopView(Context context) {        super(context);    }    public TopView(Context context, AttributeSet attrs) {        super(context, attrs);        // 加载布局        LayoutInflater.from(context).inflate(R.layout.view_top, this);        // 获取控件        top_left = (ImageView) findViewById(R.id.top_left);        top_title = (TextView) findViewById(R.id.top_title);        top_right = (TextView) findViewById(R.id.top_right);    }    // 为左侧返回按钮添加自定义点击事件    public void setOnclickLeft(OnClickListener listener) {        top_left.setOnClickListener(listener);    }    // 设置标题的方法    public void setTitle(String title) {        top_title.setText(title);    }    // 设置标题的方法    public void setRightTitle(String title) {        top_right.setText(title);    }}

然后在activity_main.xml中引用

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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="t.s.com.MainActivity">    <t.s.com.TopView        android:id="@+id/top_view"        android:layout_width="match_parent"        android:layout_height="wrap_content" /></LinearLayout>

然后再在MainActivity中对控件做操作

package t.s.com;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private TopView topView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        topView = (TopView) findViewById(R.id.top_view);        topView.setOnclickLeft(new View.OnClickListener() {            @Override            public void onClick(View view) {                Toast.makeText(MainActivity.this, "点击了返回按钮", Toast.LENGTH_SHORT).show();            }        });        topView.setRightTitle("设置");        topView.setTitle("首页");    }}

运行效果

2.自己绘制控件

熟悉view的绘制原理

1.measure用来测量View的宽和高。
2.layout用来确定View在父容器中放置的位置。
3.draw用来将view绘制在屏幕上

创建一个类CustomView继承View，实现点击事件接口OnClickListener

package t.s.com;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.view.View;/** * Created by Administrator on 2017/10/19. */public class CustomView extends View implements View.OnClickListener {    // 定义画笔    private Paint mPaint;    // 用于获取文字的宽和高    private Rect mRect;    // 计数值，每点击一次本控件，其值增加1    private int mCount=0;    public CustomView(Context context, AttributeSet attrs) {        super(context, attrs);        // 初始化画笔、Rect        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mRect = new Rect();        // 本控件的点击事件        setOnClickListener(this);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPaint.setColor(Color.BLACK);        // 绘制一个填充色为蓝色的矩形        canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);        mPaint.setColor(Color.WHITE);        mPaint.setTextSize(50);        String text = String.valueOf(mCount);        // 获取文字的宽和高        mPaint.getTextBounds(text, 0, text.length(), mRect);        float textWidth = mRect.width();        float textHeight = mRect.height();        // 绘制字符串        canvas.drawText("点了我"+text+"次", getWidth() / 2 - textWidth / 2, getHeight() / 2                + textHeight / 2, mPaint);    }    @Override    public void onClick(View view) {        mCount++;        invalidate();    }}

在activity_main.xml中引入该自定义布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"    android:orientation="vertical"    tools:context="t.s.com.MainActivity">    <t.s.com.TopView        android:id="@+id/top_view"        android:layout_width="match_parent"        android:layout_height="wrap_content" />    <t.s.com.CustomView        android:id="@+id/custom"        android:layout_width="300dp"        android:layout_height="200dp"        android:layout_gravity="center"/></LinearLayout>

运行效果图

当然这个自定义控件比较粗糙,实际的要根据业务需求逻辑自己绘制,原理一样.

3.继承原生控件  下面以一个不允许输入表情的EditText作为例子

package t.s.com;import android.annotation.SuppressLint;import android.content.Context;import android.text.Editable;import android.text.Selection;import android.text.Spannable;import android.text.TextWatcher;import android.util.AttributeSet;import android.widget.EditText;import android.widget.Toast;/** * Created by Administrator on 2017/6/5 0005. */@SuppressLint("AppCompatCustomView")public class EmoEditText extends EditText {    //输入表情前的光标位置    private int cursorPos;    //输入表情前EditText中的文本    private String inputAfterText;    //是否重置了EditText的内容    private boolean resetText;    private Context mContext;    public EmoEditText(Context context) {        super(context);        this.mContext = context;        initEditText();    }    public EmoEditText(Context context, AttributeSet attrs) {        super(context, attrs);        this.mContext = context;        initEditText();    }    public EmoEditText(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.mContext = context;        initEditText();    }    // 初始化edittext 控件    private void initEditText() {        addTextChangedListener(new TextWatcher() {            @Override            public void beforeTextChanged(CharSequence s, int start, int before, int count) {                if (!resetText) {                    cursorPos = getSelectionEnd();                    // 这里用s.toString()而不直接用s是因为如果用s，                    // 那么，inputAfterText和s在内存中指向的是同一个地址，s改变了，                    // inputAfterText也就改变了，那么表情过滤就失败了                    inputAfterText= s.toString();                }            }            @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {                if (!resetText) {                    if (count >= 2) {//表情符号的字符长度最小为2                        CharSequence input = s.subSequence(cursorPos, cursorPos + count);                        if (containsEmoji(input.toString())) {                            resetText = true;                            Toast.makeText(mContext, "暂不支持表情评论哦", Toast.LENGTH_SHORT).show();                            //是表情符号就将文本还原为输入表情符号之前的内容                            setText(inputAfterText);                            CharSequence text = getText();                            if (text instanceof Spannable) {                                Spannable spanText = (Spannable) text;                                Selection.setSelection(spanText, text.length());                            }                        }                    }                } else {                    resetText = false;                }            }            @Override            public void afterTextChanged(Editable editable) {            }        });    }    /**     * 检测是否有emoji表情     *     * @param source     * @return     */    public static boolean containsEmoji(String source) {        int len = source.length();        for (int i = 0; i < len; i++) {            char codePoint = source.charAt(i);            if (!isEmojiCharacter(codePoint)) { //如果不能匹配,则该字符是Emoji表情                return true;            }        }        return false;    }    /**     * 判断是否是Emoji     *     * @param codePoint 比较的单个字符     * @return     */    private static boolean isEmojiCharacter(char codePoint) {        return (codePoint == 0x0) || (codePoint == 0x9) || (codePoint == 0xA) ||                (codePoint == 0xD) || ((codePoint >= 0x20) && (codePoint <= 0xD7FF)) ||                ((codePoint >= 0xE000) && (codePoint <= 0xFFFD)) || ((codePoint >= 0x10000)                && (codePoint <= 0x10FFFF));    }}

然后在activity_main.xml引入该控件就可以了

<t.s.com.EmoEditText    android:id="@+id/edtext"    android:layout_width="match_parent"    android:layout_height="wrap_content" />

学会了原理就可以根据自己的需求逻辑制作控件了.