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

2015-08-24 10:42:34 9.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

baidu_29096973 墨衍会员 · AI 创作全网分发关注 + 加入社区

打造仿微信聊天工具——盒子IM全栈实战解析项目采用Spring Boot + Netty构建后端，Vue与UniApp分别实现Web与移动端，支持私聊、群聊、音视频通话等核心功能，且具备集群化部署能力。然而，构建一个功能全面、性能稳定的IM系统并非易事，涉及后端服务、前端交互、消息推送、音视频处理等多个技术领域。盒子IM项目应运而生，旨在通过开源的方式，为开发者提供一个仿微信实现的聊天工具，涵盖私聊、群聊、离线消息、音视频通话等核心功能，且支持Web、移动端（App、H5、微信小程序）多平台同步。阅读详情

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

...全文

基于PWM的汽车仪表步进电机微步驱动优化实践本文深入探讨了基于PWM的微步驱动技术，用于优化汽车仪表步进电机的运行性能。通过将传统的分步驱动升级为PWM微步细分驱动，利用正弦/余弦查表法合成旋转磁场，有效消除了指针抖动与噪声，实现了指针的平滑、精准运动。文章以STM32和VID2905电机为例，提供了详细的硬件连接、代码实现及高级优化技巧，为提升汽车仪表体验提供了实用方案。阅读详情

baidu_29096973

Android 80,489 成员 91,371 内容

+ 关注 + 加入社区

切换为时间正序

A_mnesia 2017-07-18

打赏
举报

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

德星 2017-06-09

打赏
举报

https://github.com/baoyongzhang/BubbleImageView

24K纯bug 2017-04-24

打赏
举报

楼主发一份完成的demo吧

不会做饭的程序员不是好厨师 2017-03-15

打赏
举报

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

柯基摇屁股 2016-12-06

打赏
举报

引用 25 楼 Androidrookie 的回复:

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

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

Androidrookie 2016-11-09

打赏
举报

引用 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" 这里改成自己的图片放进去现在是还是图片原来的样子 = = 能帮忙看下吗?感谢

Androidrookie 2016-11-09

打赏
举报

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

baidu_29096973 2016-09-07

打赏
举报

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"> 这是我用的属性

baidu_29096973 2016-09-07

打赏
举报

哎呀不好意思！前段时间一直很忙没时间看帖子就此分享代码和使用方法~ 直接复制用法和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()); } }

柯基摇屁股 2016-08-02

打赏
举报

引用 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]边框是可以去掉的，具体的怎么做的不记得了，我也试过去掉边框的

java_carson 2016-05-04

打赏
举报

楼主解决了吗？解决的话能发我一份吗，625182111@qq.com

whf769 2016-03-22

打赏
举报

引用 19 楼 whf769 的回复:

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

whf769 2016-03-21

打赏
举报

引用 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，多谢

柯基摇屁股 2016-03-18