当前位置：首页 » android文章 » Android自定义控件的三种实现方式

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

作者：KNN   日期：2020-03-09   分类：android文章
1.组合原生控件
将自己需要的控件组合起来变成一个新控件,如下制作常见的app页面头部.
 新建一个Android项目,创建一个头部布局view_top.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:orientation="vertical"
  6.     android:background="#50e7ab"
  7.     android:padding="10dp">
  8.  
  9.     <ImageView
  10.         android:id="@+id/top_left"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:src="@mipmap/fanhui_bai" />
  14.  
  15.     <TextView
  16.         android:id="@+id/top_title"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_centerHorizontal="true"RelativeLayout 
  20.         android:layout_centerVertical="true"
  21.         android:text="首页"
  22.         android:textSize="17sp"
  23.         android:textColor="#ffffff" />
  24.  
  25.     <TextView
  26.         android:id="@+id/top_right"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:text="提交"
  30.         android:textSize="17sp"
  31.         android:textColor="#ffffff"
  32.         android:layout_centerVertical="true"
  33.         android:layout_alignParentRight="true" />
  34. </RelativeLayout>

下面创建一个TopView继承RelativeLayout

  1. package t.s.com;
  2.  
  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.LayoutInflater;
  6. import android.widget.ImageView;
  7. import android.widget.RelativeLayout;
  8. import android.widget.TextView;
  9.  
  10. /**
  11.  * Created by Administrator on 2017/10/19.
  12.  */
  13.  
  14. public class TopView extends RelativeLayout {
  15.     // 返回按钮控件
  16.     private ImageView top_left;
  17.     // 标题Tv
  18.     private TextView top_title;
  19.  
  20.     private TextView top_right;
  21.  
  22.     public TopView(Context context) {
  23.         super(context);
  24.     }
  25.  
  26.     public TopView(Context context, AttributeSet attrs) {
  27.         super(context, attrs);
  28.         // 加载布局
  29.         LayoutInflater.from(context).inflate(R.layout.view_top, this);
  30.         // 获取控件
  31.         top_left = (ImageView) findViewById(R.id.top_left);
  32.         top_title = (TextView) findViewById(R.id.top_title);
  33.         top_right = (TextView) findViewById(R.id.top_right);
  34.     }
  35.  
  36.  
  37.     // 为左侧返回按钮添加自定义点击事件
  38.     public void setOnclickLeft(OnClickListener listener) {
  39.         top_left.setOnClickListener(listener);
  40.     }
  41.  
  42.     // 设置标题的方法
  43.     public void setTitle(String title) {
  44.         top_title.setText(title);
  45.     }
  46.  
  47.     // 设置标题的方法
  48.     public void setRightTitle(String title) {
  49.         top_right.setText(title);
  50.     }
  51.  
  52. }

然后在activity_main.xml中引用

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context="t.s.com.MainActivity">
  8.     <t.s.com.TopView
  9.         android:id="@+id/top_view"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content" />
  12. </LinearLayout>

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

  1. package t.s.com;
  2.  
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.Toast;
  7.  
  8. public class MainActivity extends AppCompatActivity {
  9.     private TopView topView;
  10.  
  11.     @Override
  12.     protected void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         setContentView(R.layout.activity_main);
  15.         topView = (TopView) findViewById(R.id.top_view);
  16.  
  17.         topView.setOnclickLeft(new View.OnClickListener() {
  18.             @Override
  19.             public void onClick(View view) {
  20.                 Toast.makeText(MainActivity.this, "点击了返回按钮", Toast.LENGTH_SHORT).show();
  21.             }
  22.         });
  23.         topView.setRightTitle("设置");
  24.         topView.setTitle("首页");
  25.     }
  26. }
运行效果


2.自己绘制控件

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

创建一个类CustomView继承View，实现点击事件接口OnClickListener
  1. package t.s.com;
  2.  
  3. import android.content.Context;
  4. import android.graphics.Canvas;
  5. import android.graphics.Color;
  6. import android.graphics.Paint;
  7. import android.graphics.Rect;
  8. import android.util.AttributeSet;
  9. import android.view.View;
  10.  
  11. /**
  12.  * Created by Administrator on 2017/10/19.
  13.  */
  14.  
  15. public class CustomView extends View implements View.OnClickListener {
  16.  
  17.     // 定义画笔
  18.     private Paint mPaint;
  19.     // 用于获取文字的宽和高
  20.     private Rect mRect;
  21.     // 计数值，每点击一次本控件，其值增加1
  22.     private int mCount=0;
  23.  
  24.     public CustomView(Context context, AttributeSet attrs) {
  25.         super(context, attrs);
  26.  
  27.         // 初始化画笔、Rect
  28.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  29.         mRect = new Rect();
  30.         // 本控件的点击事件
  31.         setOnClickListener(this);
  32.     }
  33.  
  34.     @Override
  35.     protected void onDraw(Canvas canvas) {
  36.         super.onDraw(canvas);
  37.         mPaint.setColor(Color.BLACK);
  38.         // 绘制一个填充色为蓝色的矩形
  39.         canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
  40.         mPaint.setColor(Color.WHITE);
  41.         mPaint.setTextSize(50);
  42.         String text = String.valueOf(mCount);
  43.         // 获取文字的宽和高
  44.         mPaint.getTextBounds(text, 0, text.length(), mRect);
  45.         float textWidth = mRect.width();
  46.         float textHeight = mRect.height();
  47.  
  48.         // 绘制字符串
  49.         canvas.drawText("点了我"+text+"次", getWidth() / 2 - textWidth / 2, getHeight() / 2
  50.                 + textHeight / 2, mPaint);
  51.     }
  52.  
  53.     @Override
  54.     public void onClick(View view) {
  55.         mCount++;
  56.         invalidate();
  57.     }
  58. }




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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context="t.s.com.MainActivity">
  9.  
  10.     <t.s.com.TopView
  11.         android:id="@+id/top_view"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="wrap_content" />
  14.  
  15.  
  16.     <t.s.com.CustomView
  17.         android:id="@+id/custom"
  18.         android:layout_width="300dp"
  19.         android:layout_height="200dp"
  20.         android:layout_gravity="center"/>
  21.  
  22.  
  23. </LinearLayout>


运行效果图

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


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

  1. package t.s.com;
  2. import android.annotation.SuppressLint;
  3. import android.content.Context;
  4. import android.text.Editable;
  5. import android.text.Selection;
  6. import android.text.Spannable;
  7. import android.text.TextWatcher;
  8. import android.util.AttributeSet;
  9. import android.widget.EditText;
  10. import android.widget.Toast;
  11.  
  12. /**
  13.  * Created by Administrator on 2017/6/5 0005.
  14.  */
  15.  
  16. @SuppressLint("AppCompatCustomView")
  17. public class EmoEditText extends EditText {
  18.     //输入表情前的光标位置
  19.     private int cursorPos;
  20.     //输入表情前EditText中的文本
  21.     private String inputAfterText;
  22.     //是否重置了EditText的内容
  23.     private boolean resetText;
  24.  
  25.     private Context mContext;
  26.  
  27.     public EmoEditText(Context context) {
  28.         super(context);
  29.         this.mContext = context;
  30.         initEditText();
  31.     }
  32.  
  33.     public EmoEditText(Context context, AttributeSet attrs) {
  34.         super(context, attrs);
  35.         this.mContext = context;
  36.         initEditText();
  37.     }
  38.  
  39.     public EmoEditText(Context context, AttributeSet attrs, int defStyleAttr) {
  40.         super(context, attrs, defStyleAttr);
  41.         this.mContext = context;
  42.         initEditText();
  43.     }
  44.  
  45.     // 初始化edittext 控件
  46.     private void initEditText() {
  47.         addTextChangedListener(new TextWatcher() {
  48.             @Override
  49.             public void beforeTextChanged(CharSequence s, int start, int before, int count) {
  50.                 if (!resetText) {
  51.                     cursorPos = getSelectionEnd();
  52.                     // 这里用s.toString()而不直接用s是因为如果用s，
  53.                     // 那么，inputAfterText和s在内存中指向的是同一个地址，s改变了，
  54.                     // inputAfterText也就改变了，那么表情过滤就失败了
  55.                     inputAfterText= s.toString();
  56.                 }
  57.             }
  58.  
  59.             @Override
  60.             public void onTextChanged(CharSequence s, int start, int before, int count) {
  61.                 if (!resetText) {
  62.                     if (count >= 2) {//表情符号的字符长度最小为2
  63.                         CharSequence input = s.subSequence(cursorPos, cursorPos + count);
  64.                         if (containsEmoji(input.toString())) {
  65.                             resetText = true;
  66.                             Toast.makeText(mContext, "暂不支持表情评论哦", Toast.LENGTH_SHORT).show();
  67.                             //是表情符号就将文本还原为输入表情符号之前的内容
  68.                             setText(inputAfterText);
  69.                             CharSequence text = getText();
  70.                             if (text instanceof Spannable) {
  71.                                 Spannable spanText = (Spannable) text;
  72.                                 Selection.setSelection(spanText, text.length());
  73.                             }
  74.                         }
  75.                     }
  76.                 } else {
  77.                     resetText = false;
  78.                 }
  79.             }
  80.  
  81.             @Override
  82.             public void afterTextChanged(Editable editable) {
  83.  
  84.             }
  85.         });
  86.     }
  87.  
  88.  
  89.     /**
  90.      * 检测是否有emoji表情
  91.      *
  92.      * @param source
  93.      * @return
  94.      */
  95.     public static boolean containsEmoji(String source) {
  96.         int len = source.length();
  97.         for (int i = 0; i < len; i++) {
  98.             char codePoint = source.charAt(i);
  99.             if (!isEmojiCharacter(codePoint)) { //如果不能匹配,则该字符是Emoji表情
  100.                 return true;
  101.             }
  102.         }
  103.         return false;
  104.     }
  105.  
  106.     /**
  107.      * 判断是否是Emoji
  108.      *
  109.      * @param codePoint 比较的单个字符
  110.      * @return
  111.      */
  112.     private static boolean isEmojiCharacter(char codePoint) {
  113.         return (codePoint == 0x0) || (codePoint == 0x9) || (codePoint == 0xA) ||
  114.                 (codePoint == 0xD) || ((codePoint >= 0x20) && (codePoint <= 0xD7FF)) ||
  115.                 ((codePoint >= 0xE000) && (codePoint <= 0xFFFD)) || ((codePoint >= 0x10000)
  116.                 && (codePoint <= 0x10FFFF));
  117.     }
  118. }

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

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


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


文章来源网络：点击这里查看源文.

觉得很赞 打赏支持
  • 上一篇：Android与js互相调用
  • 下一篇：