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

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