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