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