Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QMUIQQFaceView开头添加图标问题 #940

Open
4 tasks done
do-one-thing-to-well opened this issue Jun 3, 2020 · 7 comments
Open
4 tasks done

QMUIQQFaceView开头添加图标问题 #940

do-one-thing-to-well opened this issue Jun 3, 2020 · 7 comments

Comments

@do-one-thing-to-well
Copy link

运行环境

  • 设备型号:如:Nexus 6
  • 设备系统版本:如 Android 5.0
  • Gradle 版本:如 2.3.0
  • QMUI Android 版本:1.x.x

具体问题描述

使用QQMUIQQFaceView实现如下效果:
微信截图_20200603143848
然后考虑到可以把图标作为Emoji方式处理来解决。
然后重写getSpecialBoundsDrawable方法:
微信截图_20200603144228
结果发现图片出现挤压或者是间隔过大问题,曾想通过Drawable.setBounds方法来控制drawable来解决,但都无效。

问题截图

微信截图_20200603144527
微信截图_20200603144541
请问有什么好的解决办法么?

Layout Inspector 文件(如何获取)

异常日志(堆栈)

@cgspine
Copy link
Collaborator

cgspine commented Jun 8, 2020

目前对 drawbale支持确实有限,不过你可以用一个 Drawable 来 wrap 一次来控制间距

new Drawable() {
    private Drawable source = ...
    private int rightMargin = ...

    @Override
    public int getIntrinsicWidth() {
        return source.getIntrinsicWidth() + rightMargin;
    }

    @Override
    public int getIntrinsicHeight() {
        return source.getIntrinsicHeight();
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        Rect bounds = getBounds();
        source.setBounds(
                bounds.left,
                bounds.top,
                bounds.left + source.getIntrinsicWidth(),
                bounds.top + source.getIntrinsicHeight());
        source.draw(canvas);
    }

    @Override
    public void setAlpha(int alpha) {
        source.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        source.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return source.getOpacity();
    }
});

@do-one-thing-to-well
Copy link
Author

我尝试着用了你所提供的办法,自定义Drawable,发现效果仍如上面我遇到的,而且还有一个bug,就是当有drawable的时候,更多功能和自定义drawable会发生冲突。

@do-one-thing-to-well
Copy link
Author

不知道你是否方便在百忙之中能看下这个问题,因为项目面临上线,,,很抱歉,

@cgspine
Copy link
Collaborator

cgspine commented Jun 13, 2020

提供下你 QMUIQQFaceView 的构造、属性设置以及 setText 的代码? 我们也用了很多这种,但没出过问题

@do-one-thing-to-well
Copy link
Author

你好,我这边问题解决了,具体我对QMUIQQFaceView的使用,我都是参考Demo里实现的代码,我这边先向你分享一下我的解决过程:
周末没事儿,开始看QMUIQQFaceView的具体实现,发现在onDraw的实现里有一个BUG。
先上图:
这是onDraw方法实现绘制初始代码:
ondraw_method
这是有问题的代码块:
method2
(红色标记的这段代码为起始代码,箭头指向的位置第二个参数res就是问题所在,此时res传值为0)
具体原因我贴出来代码实现,请看下图:
method3
可以看到,在此处进行了一个res变量三目运算,第一个红色框内(res != -1 || specialDrawable == null )由于上文我们传的值为0,所以逻辑或运算中,第一个运算成立,此时计算的size值为mQQFaceSize,这样就出现一个问题,导致图片显示重叠,所以我的解决办法就是修改判断为:
(res != 0 || specialDrawable == null ),修改过后,此处三目运算结果为false,执行后面的specialDrawable.getIntrinsicWidth()+... 代码语句,但是还存在一个问题,如果指定的SpecialDrawable的getIntrinsicWidth大于mQQFaceSize,那么应该在此处进行图片比例计算,我参考了你在下面根据mQQFaceSize动态计算SpecialDrawable#width的方法,进行了SpecialDrawable的宽度缩放处理,最终问题解决:
解决效果图如下:
当与文字共存时:

effect1
当与Emoji共存时:

effect2

当与更多共存时:
effect3

不过我这个还有点问题就是,我发现图片和文字之间的间距有点大,我还得再看下代码,,,谢谢大佬了,以上都是我的解决思路,希望对你有用。。

@do-one-thing-to-well
Copy link
Author

图片和文字间距的问题通过qmui_special_drawable_padding属性可以解决,再次感谢大佬,,,

@cgspine
Copy link
Collaborator

cgspine commented Jun 15, 2020

确实应该判断 res != 0 。 感谢发现问题。

cgspine added a commit that referenced this issue Jun 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants