自定义画图形以及圆形头像的实现

最新推荐文章于 2022-01-14 16:28:18 发布

lcj_拯救不开心

最新推荐文章于 2022-01-14 16:28:18 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/lcj_zhengjiubukaixin/article/details/63253586

版权

说明：下面代码是自己定义画图，画的是手机最低端的四个Tab图标，例如微信中最底下的“微信” “通讯录” “发现” “我”这四个图标，还有颜色的渐变与切换。

然后在layout布局中添加进去，怎么添加？例如我自己别的项目添加过的，这里为了举例，如下所示：

<com.项目名.view.MyTabIcon
android:id="@+id/mti_main_data"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
myapp:icon_drawable="@drawable/tab_icon_message"
myapp:icon_text="通讯录"
android:onClick="onClick" />

--------------------------------------------------------------------------------------------------------------

public class MyTabIcon extends View{ //自己定义一个类MyTabIcon 继承View类

int color;//颜色
Drawable icon;//自定义view所使用的图案
String text;//自定义view 的文本
int textsize;//自定义文本的大小

Paint drawPaint;//画图
Paint textPaint;//画字

Bitmap bitmap;//bitmap是从Drawable 转换过来的

int alpha;//alpha的取值范围是0~255，它决定了画笔颜色的浓度
public MyTabIcon(Context context, AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
initPaint();
}

private void initPaint() {
textPaint=new Paint();
textPaint.setTextSize(textsize);
textPaint.setStyle(Style.FILL);//写文字的画笔为实心

drawPaint=new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿

}

//读取用户在布局文件中设定的属性
private void init(Context context, AttributeSet attrs) {
//从一堆attrs属性中找出我们需要的
TypedArray t=context.obtainStyledAttributes(attrs,R.styleable.MyTabIcon);
icon=t.getDrawable(R.styleable.MyTabIcon_icon_drawable);
//把icon 转成bitmap
bitmap=((BitmapDrawable)icon).getBitmap();
//把bitmap放大些，写true表示放大后做补偿，写false，表示性能优先不做补偿
/**放大图片的大小，如bitmap.getWidth()*2，bitmap.getHeight()*2*/
bitmap=Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bitmap.getHeight(), true);

text=t.getString(R.styleable.MyTabIcon_icon_text);
//getResources().getDisplayMetrics()获取屏幕密度，下面是将sp转为像素
textsize=t.getDimensionPixelSize(R.styleable.MyTabIcon_icon_text_size, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 11, getResources().getDisplayMetrics()));
color=t.getColor(R.styleable.MyTabIcon_icon_color, Color.GREEN);
t.recycle();
}

//用onDraw方法画出四个标签：喵信、喵友、喵圈、设置
//若给画笔添加颜色，就可以设置切换标签的时候，标签本身颜色的渐变
//当前标签有绿色渐变为灰色，下一个标签由灰色变绿色
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float left=getWidth()/2-bitmap.getWidth()/2;
float top=getHeight()/2-bitmap.getHeight()/2-10;//减10，是画的图片往上挪10个像素开始画
//绘制图标(用灰色绘制)
canvas.drawBitmap(bitmap, left, top, null);//null写成drawPaint是什么效果呢？？？

Rect bounds=new Rect();//矩形
textPaint.getTextBounds(text, 0, text.length(), bounds);
float x=getWidth()/2-bounds.width()/2;
float y=getHeight()/2+bitmap.getHeight()/2+bounds.height()-10;
textPaint.setColor(Color.GRAY);
//绘制文字

canvas.drawText(text, x, y, textPaint);

//利用alpha，进行文字的彩色(绿色)绘制
drawColorText(canvas,x,y,alpha);
//利用alpha，进行图标的彩色(绿色)绘制
drawColorBitmap(canvas,left,top,alpha);
}

private void drawColorBitmap(Canvas canvas, float left, float top,
int alpha2) {
// 先创建一副空白的图，多宽多高，格式等
Bitmap bm=Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),Bitmap.Config.ARGB_8888);
Canvas myCanvas=new Canvas(bm);//自己创建一个canvas用来画带颜色的图，myCanvas只会画在bm上，不会画在屏幕上
myCanvas.drawBitmap(bitmap, 0,0,null);

//Mode.SRC_IN，两者相交的区域呈现绿色
drawPaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
drawPaint.setColor(color);
drawPaint.setAlpha(alpha2);//颜色浓度
//画一个纯色区域(方块)，方块为纯色（如纯绿色，纯蓝色）
RectF rect=new RectF(0, 0, bm.getWidth(), bm.getHeight());
//用画笔画一个矩形区域，画笔drawpaint上设置画笔的颜色，浓度，以及模式
myCanvas.drawRect(rect, drawPaint);

//将绿色的图bm画到屏幕上，覆盖灰色的图，用canvas来画
canvas.drawBitmap(bm, left, top, null);//把带颜色的纯绿色的图bm盖在灰色图上，两者交叉的部分为绿色

}

private void drawColorText(Canvas canvas, float x, float y, int alpha2) {
textPaint.setColor(color);
textPaint.setAlpha(alpha2);
canvas.drawText(text, x, y,textPaint);

}

//滑的过程中，一直在调用setTabIconAlpha()方法,这个方法干两件事，
//一，alpha的值一直变化,this.alpha=alpha;
//二，每调用一次setTabIconAlpha()会执行invalidate(),invalidate()方法会调用onDraw方法
//这样把变化的alpha传给onDraw()去画文字，随着alpha的值增大，滑动的页面的文字颜色变浅，而即将进入的页面的文字越来越深
public void setTabIconAlpha(int alpha){
this.alpha=alpha;
invalidate();//重画,重复调用一次onDraw方法，如果直接调onDraw(canvas);画出来的要不超大要不超小

}

}

圆形头像的实现——

/**
* 实现里圆形头像的处理
*/
public class ImageManager {
/**
*
* @param context
* @param bitmap 需要进行格式化的头像
* @return
*/
public static Bitmap formatBitmap( Context context,Bitmap bitmap){
//获得原始头像的宽度和高度
int width=bitmap.getWidth();
int height=bitmap.getHeight();

//创建一个画布的背景图片
Bitmap backBitmap=Bitmap.createBitmap(width,height,
Bitmap.Config.ARGB_8888);
//创建一个画布
Canvas canvas=new Canvas(backBitmap);

//创建一个画笔
Paint paint=new Paint();
//设置抗锯齿
paint.setAntiAlias(true);
//设置画笔的颜色
paint.setColor(Color.BLACK);

//计算圆的半径
int radius=Math.min(width,height)/2;
canvas.drawCircle( width/2, height/2, radius,paint);//先画圆
//设置画笔的模式
paint.setXfermode( new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap,0,0,paint);//再画方形头像,覆盖在圆形上,取交集

//设置画笔的颜色
paint.setColor(Color.WHITE);
//设置画出来的圆的样式
paint.setStyle(Paint.Style.STROKE);

//计算一下圆环的宽度
float strokeWidth= TypedValue. applyDimension(
TypedValue.COMPLEX_UNIT_DIP,2,context.getResources().getDisplayMetrics());
//设置圆环边线的粗细
paint.setStrokeWidth(strokeWidth);
canvas.drawCircle(width/2,height/2, radius-strokeWidth/2,paint);

return backBitmap;
}