文章转载于https://blog.csdn.net/fictionss/article/details/78285167
原生控件,自己绘制和继承原生控件.
1.组合原生控件
将自己需要的控件组合起来变成一个新控件,如下制作常见的app页面头部.
新建一个Android项目,创建一个头部布局view_top.xml
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#50e7ab"
android:padding="10dp">
android:id="@+id/top_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/fanhui_bai" />
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" />
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" />
下面创建一个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中引用
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">
android:id="@+id/top_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
然后再在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中引入该自定义布局：
[java] view plain copy
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">
android:id="@+id/top_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
android:id="@+id/custom"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_gravity="center"/>
运行效果图
当然这个自定义控件比较粗糙,实际的要根据业务需求逻辑自己绘制,原理一样.
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引入该控件就可以了
android:id="@+id/edtext"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
网友评论