自定义view对我来说一直是比较恐惧的,但是万事开头难,今天总结一下自己实现圆形TextView的三种方式。
首先来说一下自定义view的三种方式:
一,自绘控件:
自绘控件就是说界面展示的内容就是我们在ondraw()方法中绘制出来的,继承View.
二,组合控件:
顾名思义,由多个控件组合在一起的控件,这里面组合的控件并不需要我们自己去绘制,用android原生的即可。最常见的就是标题栏,将图标,文字组合到一个布局中,自定义组合控件时继承Framelayout,通过 LayoutInflater.from(context).inflate(R.layout.title, this); 来引用布局即可。
三,继承控件:
顾名思义,继承android原生的已有控件,在此基础上进行绘制,那么我们就可以在原有的功能上增加新的功能。
自定义view的步骤:
1:自定义属性,在values中创建attrs文件
2:在构造方法中获取自定义属性,
public View (Context context)是在java代码创建视图的时候被调用,如果是从xml填充的视图,就不会调用这个
public View (Context context, AttributeSet attrs)这个是在xml创建但是没有指定style的时候被调用
public View (Context context, AttributeSet attrs, int defStyle)这个是在xml创建,引用默认style的时候被调用
3:重写onMesure(),测量控件高度;
4:重写onDraw(),绘制控件;
圆形TextView的实现:
方式一(自绘控件):
1.1自定义属性
<resources>
<declare-styleable name="CustomTextView">
<attr name="mTextSize" format="dimension"/>
<attr name="mTextColor" format="color"/>
<attr name="mBackgroudColor" format="color"/>
<attr name="mRound" format="dimension"/>
<attr name="mText" format="string"/>
declare-styleable>
resources>
1.2获取属性
public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = null;
try {
array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTextView, 0, 0);
mTextSize = array.getDimension(R.styleable.CustomTextView_mTextSize, 14);
mTextColor = array.getColor(R.styleable.CustomTextView_mTextColor, Color.BLACK);
mBackgroudColor = array.getColor(R.styleable.CustomTextView_mBackgroudColor, Color.YELLOW);
mRound = array.getColor(R.styleable.CustomTextView_mRound, 5);
mText = array.getString(R.styleable.CustomTextView_mText);
} finally {
array.recycle();
}
init();
}
1.3重写onMesure();
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = 48;
int height = 48;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
width = Math.min(width, widthSize);
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
height = Math.min(height, heightSize);
}
setMeasuredDimension(width, height);
}
1.4重写onDraw();
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(mBackgroudColor);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, paint);
paint.setColor(mTextColor);
canvas.drawText(mText, getWidth() / 2 - rect.width() / 2, getHeight() / 2 + rect.height() / 2, paint);
}
添加布局
<com.example.com.customview.CustomTextView
android:layout_width="100dp"
android:layout_height="100dp"
app:mText="你好"
android:layout_margin="8dp"
app:mTextColor="@color/colorPrimary"
app:mTextSize="16sp"
app:mBackgroudColor="#F00"/>
方式二(继承控件):
package com.example.com.customview;
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.widget.TextView;
/**
* Created by Administrator on 2016/9/5.
*/
public class CustomView extends TextView{
private Rect rect;
private Paint paint;
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
rect=new Rect();
paint=new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);//抗锯齿
paint.setDither(true);//防抖动
}
public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = 48;
int height = 48;
if(widthMode==MeasureSpec.EXACTLY||heightMode==MeasureSpec.EXACTLY){
width=widthSize;
height=heightSize;
width=Math.max(width,height);
}
setMeasuredDimension(width,width);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawCircle(getWidth()/2,getHeight()/2,Math.max(getWidth(), getHeight())/2,paint);
super.onDraw(canvas);
}
}
在drawCircle放在 super.onDraw(canvas);前面,因为如果父类先画text的话,画圆的时候会被遮盖,所以先画圆,在调用父类的ondraw();
方式三(shape):
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<solid android:color="#F00"/>
<size android:height="48dp" android:width="48dp"/>
shape>
在布局中添加背景
"100dp"
android:layout_height="100dp"
android:text="shape"
android:gravity="center"
android:layout_margin="8dp"
android:background="@drawable/bg_circle"/>
看看三种方式的实现效果:
就这些了,讲的不是很详细,因为一些概念基础我也不是很理解,只能先实现看看咯!
源代码下载地址
http://pan.baidu.com/s/1pKDoBSR