android-[IM]-仿微信聊天界面图片显示

[baidu_29096973]

求大神告知微信聊天页面 这个图片是怎么实现的呢 图片自带个小三角，和图片的颜色是一致的，我大概知道可能是在上面添加了一个边框，覆盖了一部分，或者是裁切了一部分。到底怎么实现起来比较容易呢~

[小冰冰]

楼主现在还看帖子嘛？求解决方法[e-mail]

[没脖子的喵先生]

楼主解决了吗？解决的话能发我一份吗，[e-mail]

[xue13643592139]

给我也来一份[e-mail]

[whf769]

引用 16 楼 wxm1225929690 的回复:

https://github.com/nicewarm/WeChatImageClipping 大家可以去看看这个 应该是你们想要的 楼主不留方法也是醉了

有 eclipse的 Demo版本吗？

[柯基摇屁股]

引用 17 楼 whf769 的回复:

[quote=引用 16 楼 wxm1225929690 的回复:] https://github.com/nicewarm/WeChatImageClipping 大家可以去看看这个 应该是你们想要的 楼主不留方法也是醉了

有 eclipse的 Demo版本吗？ [/quote]这个就是eclipse的demo版本啊 代码很简单 我去看了下就是一个Activity public class MainActivity extends Activity { private ImageView iv_image; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_image = (ImageView) findViewById(R.id.iv_image); showImage(); } private void showImage(){ new Thread(new Runnable() { @Override public void run() { Bitmap bitmap_bg = BitmapFactory.decodeResource(getResources(), R.drawable.chat_adapter_to_bg); Bitmap bitmap_in = BitmapFactory.decodeResource(getResources(), R.drawable.aa); final Bitmap bp = getRoundCornerImage(bitmap_bg, bitmap_in); final Bitmap bp2 = getShardImage(bitmap_bg, bp); runOnUiThread(new Runnable() { @Override public void run() { iv_image.setImageBitmap(bp2); } }); } }).start(); } public static Bitmap getRoundCornerImage(Bitmap bitmap_bg,Bitmap bitmap_in) { Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888); Canvas canvas = new Canvas(roundConcerImage); Paint paint = new Paint(); Rect rect = new Rect(0,0,500,500); Rect rectF = new Rect(0, 0, bitmap_in.getWidth(), bitmap_in.getHeight()); paint.setAntiAlias(true); NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null); patch.draw(canvas, rect); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(bitmap_in, rectF, rect, paint); return roundConcerImage; } public static Bitmap getShardImage(Bitmap bitmap_bg,Bitmap bitmap_in) { Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888); Canvas canvas = new Canvas(roundConcerImage); Paint paint = new Paint(); Rect rect = new Rect(0,0,500,500); paint.setAntiAlias(true); NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null); patch.draw(canvas, rect); Rect rect2 = new Rect(2,2,498,498); canvas.drawBitmap(bitmap_in, rect, rect2, paint); return roundConcerImage; } }

[whf769]

你好 ， 是怎么显示 的

[柯基摇屁股]

https://github.com/nicewarm/WeChatImageClipping 大家可以去看看这个 应该是你们想要的 楼主不留方法也是醉了

[whf769]

引用 18 楼 wxm1225929690 的回复:

[quote=引用 17 楼 whf769 的回复:]
[quote=引用 16 楼 wxm1225929690 的回复:]
https://github.com/nicewarm/WeChatImageClipping 大家可以去看看这个 应该是你们想要的 楼主不留方法也是醉了

有 eclipse的 Demo版本吗？

[/quote]这个就是eclipse的demo版本啊 代码很简单 我去看了下就是一个Activity

public class MainActivity extends Activity {

private ImageView iv_image;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv_image = (ImageView) findViewById(R.id.iv_image);
showImage();
}

private void showImage(){
new Thread(new Runnable() {
@Override
public void run() {
Bitmap bitmap_bg = BitmapFactory.decodeResource(getResources(), R.drawable.chat_adapter_to_bg);
Bitmap bitmap_in = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
final Bitmap bp = getRoundCornerImage(bitmap_bg, bitmap_in);
final Bitmap bp2 = getShardImage(bitmap_bg, bp);
runOnUiThread(new Runnable() {
@Override
public void run() {
iv_image.setImageBitmap(bp2);
}
});
}
}).start();
}

public static Bitmap getRoundCornerImage(Bitmap bitmap_bg,Bitmap bitmap_in)
{
Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888);
Canvas canvas = new Canvas(roundConcerImage);
Paint paint = new Paint();
Rect rect = new Rect(0,0,500,500);
Rect rectF = new Rect(0, 0, bitmap_in.getWidth(), bitmap_in.getHeight());
paint.setAntiAlias(true);
NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null);
patch.draw(canvas, rect);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap_in, rectF, rect, paint);
return roundConcerImage;
}
public static Bitmap getShardImage(Bitmap bitmap_bg,Bitmap bitmap_in)
{
Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888);
Canvas canvas = new Canvas(roundConcerImage);
Paint paint = new Paint();
Rect rect = new Rect(0,0,500,500);
paint.setAntiAlias(true);
NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null);
patch.draw(canvas, rect);
Rect rect2 = new Rect(2,2,498,498);
canvas.drawBitmap(bitmap_in, rect, rect2, paint);
return roundConcerImage;
}
}
[/quote]

OK， 多谢

[whf769]

引用 19 楼 whf769 的回复:

[quote=引用 18 楼 wxm1225929690 的回复:] [quote=引用 17 楼 whf769 的回复:] [quote=引用 16 楼 wxm1225929690 的回复:] https://github.com/nicewarm/WeChatImageClipping 大家可以去看看这个 应该是你们想要的 楼主不留方法也是醉了

有 eclipse的 Demo版本吗？ [/quote]这个就是eclipse的demo版本啊 代码很简单 我去看了下就是一个Activity public class MainActivity extends Activity { private ImageView iv_image; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_image = (ImageView) findViewById(R.id.iv_image); showImage(); } private void showImage(){ new Thread(new Runnable() { @Override public void run() { Bitmap bitmap_bg = BitmapFactory.decodeResource(getResources(), R.drawable.chat_adapter_to_bg); Bitmap bitmap_in = BitmapFactory.decodeResource(getResources(), R.drawable.aa); final Bitmap bp = getRoundCornerImage(bitmap_bg, bitmap_in); final Bitmap bp2 = getShardImage(bitmap_bg, bp); runOnUiThread(new Runnable() { @Override public void run() { iv_image.setImageBitmap(bp2); } }); } }).start(); } public static Bitmap getRoundCornerImage(Bitmap bitmap_bg,Bitmap bitmap_in) { Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888); Canvas canvas = new Canvas(roundConcerImage); Paint paint = new Paint(); Rect rect = new Rect(0,0,500,500); Rect rectF = new Rect(0, 0, bitmap_in.getWidth(), bitmap_in.getHeight()); paint.setAntiAlias(true); NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null); patch.draw(canvas, rect); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(bitmap_in, rectF, rect, paint); return roundConcerImage; } public static Bitmap getShardImage(Bitmap bitmap_bg,Bitmap bitmap_in) { Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888); Canvas canvas = new Canvas(roundConcerImage); Paint paint = new Paint(); Rect rect = new Rect(0,0,500,500); paint.setAntiAlias(true); NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null); patch.draw(canvas, rect); Rect rect2 = new Rect(2,2,498,498); canvas.drawBitmap(bitmap_in, rect, rect2, paint); return roundConcerImage; } } [/quote] 微信没有外边框， 这个有个边框

[java_carson]

楼主解决了吗？解决的话能发我一份吗，[e-mail]

[柯基摇屁股]

引用 20 楼 whf769 的回复:

[quote=引用 19 楼 whf769 的回复:] [quote=引用 18 楼 wxm1225929690 的回复:] [quote=引用 17 楼 whf769 的回复:] [quote=引用 16 楼 wxm1225929690 的回复:] https://github.com/nicewarm/WeChatImageClipping 大家可以去看看这个 应该是你们想要的 楼主不留方法也是醉了

有 eclipse的 Demo版本吗？ [/quote]这个就是eclipse的demo版本啊 代码很简单 我去看了下就是一个Activity public class MainActivity extends Activity { private ImageView iv_image; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_image = (ImageView) findViewById(R.id.iv_image); showImage(); } private void showImage(){ new Thread(new Runnable() { @Override public void run() { Bitmap bitmap_bg = BitmapFactory.decodeResource(getResources(), R.drawable.chat_adapter_to_bg); Bitmap bitmap_in = BitmapFactory.decodeResource(getResources(), R.drawable.aa); final Bitmap bp = getRoundCornerImage(bitmap_bg, bitmap_in); final Bitmap bp2 = getShardImage(bitmap_bg, bp); runOnUiThread(new Runnable() { @Override public void run() { iv_image.setImageBitmap(bp2); } }); } }).start(); } public static Bitmap getRoundCornerImage(Bitmap bitmap_bg,Bitmap bitmap_in) { Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888); Canvas canvas = new Canvas(roundConcerImage); Paint paint = new Paint(); Rect rect = new Rect(0,0,500,500); Rect rectF = new Rect(0, 0, bitmap_in.getWidth(), bitmap_in.getHeight()); paint.setAntiAlias(true); NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null); patch.draw(canvas, rect); paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); canvas.drawBitmap(bitmap_in, rectF, rect, paint); return roundConcerImage; } public static Bitmap getShardImage(Bitmap bitmap_bg,Bitmap bitmap_in) { Bitmap roundConcerImage = Bitmap.createBitmap(500,500, Config.ARGB_8888); Canvas canvas = new Canvas(roundConcerImage); Paint paint = new Paint(); Rect rect = new Rect(0,0,500,500); paint.setAntiAlias(true); NinePatch patch = new NinePatch(bitmap_bg, bitmap_bg.getNinePatchChunk(), null); patch.draw(canvas, rect); Rect rect2 = new Rect(2,2,498,498); canvas.drawBitmap(bitmap_in, rect, rect2, paint); return roundConcerImage; } } [/quote] 微信没有外边框， 这个有个边框[/quote]边框是可以去掉的，具体的怎么做的不记得了，我也试过去掉边框的

[baidu_29096973]

哎呀 不好意思！ 前段时间一直很忙没时间看帖子 就此分享代码和使用方法~ 直接复制用法和IMAGVIEW是一样的 /** * * @author Administrator * 聊天气泡式imageView */ public class BubbleImageView extends ImageView { private static final int LOCATION_LEFT = 0; //箭头方向左 private static final Bitmap.Config BITMAP_CONFIG=Bitmap.Config.RGB_565;//代表16位ARGB位图 private static final int COLORDRAWABLE_DIMENSION=1; private ColorFilter cf; private int mAngle = dp2px(10); private int mArrowTop = dp2px(40); private int mArrowWidth = dp2px(20); private int mArrowHeight = dp2px(20); private int mArrowOffset = 0; private int mArrowLocation = LOCATION_LEFT; private Rect mDrawableRect; private Bitmap mBitmap; private BitmapShader mBitmapShader; private Paint mBitmapPaint; private Matrix mShaderMatrix; private int mBitmapWidth; private int mBitmapHeight; public BubbleImageView(Context context) { super(context); // TODO Auto-generated constructor stub initView(null); } public BubbleImageView(Context context, AttributeSet attrs) { super(context, attrs,0); // TODO Auto-generated constructor stub initView(attrs); } public BubbleImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub initView(attrs); } private void initView(AttributeSet attrs) { // TODO Auto-generated method stub if(attrs!=null){ TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.BubbleImageView); mAngle = (int) a.getDimension(R.styleable.BubbleImageView_bubble_angle, mAngle); mArrowHeight = (int) a.getDimension(R.styleable.BubbleImageView_bubble_arrowHeight, mArrowHeight); mArrowOffset = (int) a.getDimension(R.styleable.BubbleImageView_bubble_arrowOffset, mArrowOffset); mArrowTop = (int) a.getDimension(R.styleable.BubbleImageView_bubble_arrowTop, mArrowTop); mArrowWidth = (int) a.getDimension(R.styleable.BubbleImageView_bubble_arrowWidth, mAngle); mArrowLocation = a.getInt(R.styleable.BubbleImageView_bubble_arrowLocation, mArrowLocation); a.recycle(); } } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub if (getDrawable() == null) { return; } RectF rect = new RectF(getPaddingLeft(), getPaddingTop(), getRight() - getLeft() - getPaddingRight(), getBottom() - getTop() - getPaddingBottom()); Path path = new Path(); if (mArrowLocation == LOCATION_LEFT) { leftPath(rect, path); } else { rightPath(rect, path); } canvas.drawPath(path, mBitmapPaint); } private void rightPath(RectF rect, Path path) { // TODO Auto-generated method stub path.moveTo(mAngle, rect.top); path.lineTo(rect.width(), rect.top); path.arcTo(new RectF(rect.right - mAngle * 2 - mArrowWidth, rect.top, rect.right - mArrowWidth, mAngle * 2 + rect.top), 270, 90); path.lineTo(rect.right - mArrowWidth, mArrowTop); path.lineTo(rect.right, mArrowTop - mArrowOffset); path.lineTo(rect.right - mArrowWidth, mArrowTop + mArrowHeight); path.lineTo(rect.right - mArrowWidth, rect.height() - mAngle); path.arcTo(new RectF(rect.right - mAngle * 2 - mArrowWidth, rect.bottom - mAngle * 2, rect.right - mArrowWidth, rect.bottom), 0, 90); path.lineTo(rect.left, rect.bottom); path.arcTo(new RectF(rect.left, rect.bottom - mAngle * 2, mAngle * 2 + rect.left, rect.bottom), 90, 90); path.lineTo(rect.left, rect.top); path.arcTo(new RectF(rect.left, rect.top, mAngle * 2 + rect.left, mAngle * 2 + rect.top), 180, 90); path.close(); } private void leftPath(RectF rect, Path path) { // TODO Auto-generated method stub path.moveTo(mAngle + mArrowWidth, rect.top); path.lineTo(rect.width(), rect.top); path.arcTo(new RectF(rect.right - mAngle * 2, rect.top, rect.right, mAngle * 2 + rect.top), 270, 90); path.lineTo(rect.right, rect.top); path.arcTo(new RectF(rect.right - mAngle * 2, rect.bottom - mAngle * 2, rect.right, rect.bottom), 0, 90); path.lineTo(rect.left + mArrowWidth, rect.bottom); path.arcTo(new RectF(rect.left + mArrowWidth, rect.bottom - mAngle * 2, mAngle * 2 + rect.left + mArrowWidth, rect.bottom), 90, 90); path.lineTo(rect.left + mArrowWidth, mArrowTop + mArrowHeight); path.lineTo(rect.left, mArrowTop - mArrowOffset); path.lineTo(rect.left + mArrowWidth, mArrowTop); path.lineTo(rect.left + mArrowWidth, rect.top); path.arcTo(new RectF(rect.left + mArrowWidth, rect.top, mAngle * 2 + rect.left + mArrowWidth, mAngle * 2 + rect.top), 180, 90); path.close(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); setup(); } @Override public void setImageBitmap(Bitmap bm) { super.setImageBitmap(bm); mBitmap = bm; setup(); } @Override public void setImageDrawable(Drawable drawable) { super.setImageDrawable(drawable); mBitmap = getBitmapFromDrawable(drawable); setup(); } @Override public void setImageResource(int resId) { super.setImageResource(resId); mBitmap = getBitmapFromDrawable(getDrawable()); setup(); } private Bitmap getBitmapFromDrawable(Drawable drawable) { if (drawable == null) { return null; } if (drawable instanceof BitmapDrawable) { return ((BitmapDrawable) drawable).getBitmap(); } try { Bitmap bitmap; if (drawable instanceof ColorDrawable) { bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG); } else { bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG); } Canvas canvas = new Canvas(bitmap); drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); drawable.draw(canvas); return bitmap; } catch (OutOfMemoryError e) { return null; } } private void setup() { if (mBitmap == null) { return; } mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); mBitmapPaint = new Paint(); if (cf != null) { mBitmapPaint.setColorFilter(cf); } mBitmapPaint.setAntiAlias(true); mBitmapPaint.setShader(mBitmapShader); mBitmapHeight = mBitmap.getHeight(); mBitmapWidth = mBitmap.getWidth(); updateShaderMatrix(); invalidate(); } public void setColorFilter(ColorFilter cf) { this.cf = cf; } private void updateShaderMatrix() { float scale; float dx = 0; float dy = 0; mShaderMatrix = new Matrix(); mShaderMatrix.set(null); mDrawableRect = new Rect(0, 0, getRight() - getLeft(), getBottom() - getTop()); if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) { scale = mDrawableRect.height() / (float) mBitmapHeight; dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f; } else { scale = mDrawableRect.width() / (float) mBitmapWidth; dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f; } mShaderMatrix.setScale(scale, scale); mShaderMatrix.postTranslate((int) (dx + 0.5f), (int) (dy + 0.5f)); mBitmapShader.setLocalMatrix(mShaderMatrix); } private int dp2px(int dp) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getContext().getResources().getDisplayMetrics()); } }

[baidu_29096973]

android:id="@+id/iv_picture" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="@dimen/dp5" android:layout_marginLeft="@dimen/dp5" android:layout_below="@+id/from_name" app:bubble_arrowTop="15dp" app:bubble_angle="10dp" app:bubble_arrowOffset="-5dp" app:bubble_arrowHeight="10dp" app:bubble_arrowWidth="5dp" android:adjustViewBounds="true" android:padding="0dp" android:src="@drawable/empty_photosmile" android:maxWidth="@dimen/dp150" android:maxHeight="@dimen/dp150" android:minHeight="@dimen/dp100" android:minWidth="@dimen/dp120" android:scaleType="fitXY"> 这是我用的属性

[Androidrookie]

楼主还在吗? 你那个类里用到的几个R.styleable 属性告知一下吗?

[Androidrookie]

引用 24 楼 baidu_29096973 的回复:

android:id="@+id/iv_picture" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="@dimen/dp5" android:layout_marginLeft="@dimen/dp5" android:layout_below="@+id/from_name" app:bubble_arrowTop="15dp" app:bubble_angle="10dp" app:bubble_arrowOffset="-5dp" app:bubble_arrowHeight="10dp" app:bubble_arrowWidth="5dp" android:adjustViewBounds="true" android:padding="0dp" android:src="@drawable/empty_photosmile" android:maxWidth="@dimen/dp150" android:maxHeight="@dimen/dp150" android:minHeight="@dimen/dp100" android:minWidth="@dimen/dp120" android:scaleType="fitXY"> 这是我用的属性

楼主R.styleable 属性我自己加上了,我用你这个属性写了一个IMageView可是将 android:src="@drawable/empty_photosmile" 这里改成自己的图片放进去现在是还是图片原来的样子 = = 能帮忙看下吗?感谢

[柯基摇屁股]

引用 25 楼 Androidrookie 的回复:

楼主还在吗? 你那个类里用到的几个R.styleable 属性告知一下吗?

你可以去 看看这个https://github.com/angeldevil/ChatImageView

[不会做饭的程序员不是好厨师]

谢谢楼主以及楼上的兄弟！

[24K纯bug]

楼主发一份完成的demo吧

[德星]

https://github.com/baoyongzhang/BubbleImageView

[A_mnesia]

楼主发一份dome给我呗 万分感谢547161436QQ.com