显示图像时,很多个性化显示,圆形或圆角、气泡等等,我们这一篇文章探讨一下圆形和气泡的显示,仿照易信中的实现,先看下效果图:
代码:
public class RoundImageView extends ImageView {
public RoundImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public RoundImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap bitmapBorder =BitmapFactory.decodeResource(getResources(), R.drawable.border);
Bitmap bitmapMask =BitmapFactory.decodeResource(getResources(), R.drawable.mask);
int _width = bitmapBorder.getWidth();
int _height = bitmapBorder.getHeight();
Paint paint = new Paint();
PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
Bitmap bitmap = ((BitmapDrawable)drawable).getBitmap() ;
canvas.drawBitmap(bitmapBorder, 0, 0, paint);
int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
canvas.saveLayer(0, 0, _width, _height, null, saveFlags);
canvas.drawBitmap(bitmapMask, 0, 0, paint);
paint.setXfermode(xfermode);
int left = _width/2 - bitmap.getWidth() /2;
int top = _height/2 - bitmap.getHeight()/2;
canvas.drawBitmap(bitmap, left, top, paint);
paint.setXfermode(null);
canvas.restore();
}
}
上述效果使用了“遮罩”的方式实现,使用了Paint的Xfermode。我们介绍下setXfermode方法,setXfermode方法用来设置两张图片相交时的模式。
PorterDuff.Mode.CLEAR清除画布上图像
PorterDuff.Mode.SRC显示上层图像
PorterDuff.Mode.DST显示下层图像
PorterDuff.Mode.SRC_OVER上下层图像都显示,上层居上显示
PorterDuff.Mode.DST_OVER上下层都显示,下层居上显示
PorterDuff.Mode.SRC_IN取两层图像交集部门,只显示上层图像
PorterDuff.Mode.DST_IN取两层图像交集部门,只显示下层图像
PorterDuff.Mode.SRC_OUT取上层图像非交集部门
PorterDuff.Mode.DST_OUT取下层图像非交集部门
PorterDuff.Mode.SRC_ATOP取下层图像非交集部门与上层图像交集部门
PorterDuff.Mode.DST_ATOP取上层图像非交集部门与下层图像交集部门
PorterDuff.Mode.XOR取两层图像的非交集部门
RoundImageView使用了自定义View实现,重点重写了onDraw方法,使用了paint、canvas,这两个自定义View必须掌握的两个基础工具,这里就不多写了,提供几个参考:
Android 2D Graphics学习(一)、android.graphics介绍
分享到:
相关推荐
安卓Android源码——android模仿易信UI布局效果源码.rar
安卓Android源码——android模仿易信UI布局效果源码.zip
android模仿易信UI布局效果源码
安卓Android源码——模仿易信UI布局效果源码.zip
安卓Andriod源码——模仿易信UI布局效果源码.zip
android模仿易信UI布局效果源码.rar
Android高级应用源码-android模仿易信UI布局效果源码.rar
安卓开发-android模仿易信UI布局效果源码.zip
一个模仿易信UI的android程序,感兴趣的朋友可以继续开发
仿易信主界面设计,包含欢迎页面、和功能界面
android模仿易信UI布局效果源码.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
简单的实现了易信的UI界面!~包括主要的侧滑功能的实现SlidingMenu
Android应用源码之android模仿易信UI布局效果源码.zip
android模仿易信UI布局效果源码.zip
Android高级应用源码-android模仿易信UI布局效果源码.zip
android模仿易信UI布局效果源码.zip源码资源下载android模仿易信UI布局效果源码.zip源码资源下载
仿易信UI布局效果源码,源码yixin,个人感觉易信手机客户端应用的UI布局做得还是不错的,它的UI是很简洁,所以该源码就是来模仿该应用的UI来实现的,该源码实现了首页的标题的效果,还可以左边的滑动菜单实现等,...
Android应用源码之android模仿易信UI布局效果源码.zip项目安卓应用源码下载Android应用源码之android模仿易信UI布局效果源码.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合...
android模仿易信UI布局效果源码.7z