版权声明:本文为xing_star原创文章,转载请注明出处!

本文同步自http://javaexception.com/archives/181

最近在做一个需求,是对im聊天消息设置气泡背景,之前呢,设计师没有特别遵循一定的设计规范,导致,气泡背景有的是.9的图片,有的是自己用xml画出来的背景。这样在给聊天消息设置背景的时候出现了不少的问题。

问题场景回溯:

设置背景,我们常用的Api是setBackgroundResource。最开始考虑的比较简单,每条消息都只用setBackgroundResource

接着就碰到了第一个问题,有的消息用的是.9图,有的是xml,整体的效果看起来不是很协调,也就是消息的间隔有大有小,看起来特别丑。

这里我们想到了一个办法,我们需要让不同的气泡上的文本内容看起来间隔差不多,考虑的是设置padding,而不是使用background里面的间隔。对于每一条消息,根据它是什么样的气泡,决定设置padding值的参数。

大致的代码是

setBgContainerPadding(bgContainer, SystemUtils.dip2px(10), SystemUtils.dip2px(4), SystemUtils.dip2px(18), SystemUtils.dip2px(4));
bgContainer.setBackgroundResource(R.drawable.xxx);//设置背景

然后我就掉入了第二个坑中,发现设置了padding后,效果没变化,一时之间找不到原因,很是恼火。只好先放弃这块工作,去忙其他的了,不知道过了多久,灵感来了,想到了调整padding和background的先后顺序。

bgContainer.setBackgroundResource(R.drawable.xxx);//设置背景
setBgContainerPadding(bgContainer, SystemUtils.dip2px(10), SystemUtils.dip2px(4), SystemUtils.dip2px(18), SystemUtils.dip2px(4));

一定得是先设置背景,在设置padding值。不能是先设置padding,再设置背景。https://www.jianshu.com/p/4432b19ec6cd 这篇文章深入分析了下原因,对于这块推荐看这篇文章。

到这里大致的效果就比较接近了,但是还是有些item的气泡背景包裹的内容间隔有问题,感觉是view的复用机制(RecyclerView,ListView的item)在作怪。(此外设置padding值的时候,不要使用view的getPaddingLeft()这样的方法,全部给定具体的数值,从源头上避免复用机制)

于是再次修改代码,代码覆盖各种case,相当于每个itemView都手动设置一遍,padding,气泡背景这块不使用view的复用。

完整的处理气泡的代码如下:

private void setBackground(View bgContainer, int position) {
    Conversation conversation = conversationList.get(position);
    if (position == 0) {
        if (conversation.getIsSend() == Conversation.SEND_RECEIVE_TYPE_SEND) {
            bgContainer.setBackgroundResource(R.drawable.balloon_outgoing_normal);//marginLeft marginRight 10dp
            setBgContainerPadding(bgContainer, SystemUtils.dip2px(10), SystemUtils.dip2px(4), SystemUtils.dip2px(18), SystemUtils.dip2px(4));
        } else {
            bgContainer.setBackgroundResource(R.drawable.balloon_incoming_normal);
            setBgContainerPadding(bgContainer, SystemUtils.dip2px(18), SystemUtils.dip2px(4), SystemUtils.dip2px(10), SystemUtils.dip2px(4));
        }
        setBgContainerMargin(bgContainer, SystemUtils.dip2px(10), 0, SystemUtils.dip2px(10), 0);
    }
    else if (isDifferentTypePre(position)) {
        if (conversation.getIsSend() == Conversation.SEND_RECEIVE_TYPE_SEND) {
            bgContainer.setBackgroundResource(R.drawable.balloon_outgoing_normal);
            setBgContainerPadding(bgContainer, SystemUtils.dip2px(10), SystemUtils.dip2px(4), SystemUtils.dip2px(18), SystemUtils.dip2px(4));
        } else {
            bgContainer.setBackgroundResource(R.drawable.balloon_incoming_normal);
            setBgContainerPadding(bgContainer, SystemUtils.dip2px(18), SystemUtils.dip2px(4), SystemUtils.dip2px(10), SystemUtils.dip2px(4));
        }
        setBgContainerMargin(bgContainer, SystemUtils.dip2px(10), 0, SystemUtils.dip2px(10), 0);
    } else {
        lineHeader.setVisibility(View.GONE);
        if (conversation.getIsSend() == Conversation.SEND_RECEIVE_TYPE_SEND) {
            bgContainer.setBackgroundResource(R.drawable.green_msg);
            setBgContainerMargin(bgContainer, 0, SystemUtils.dip2px(0.5f), SystemUtils.dip2px(17), SystemUtils.dip2px(0.5f));
        } else {
            bgContainer.setBackgroundResource(R.drawable.white_msg);
            setBgContainerMargin(bgContainer, SystemUtils.dip2px(17), SystemUtils.dip2px(0.5f), 0, SystemUtils.dip2px(0.5f));
        }
        setBgContainerPadding(bgContainer, SystemUtils.dip2px(10), SystemUtils.dip2px(4), SystemUtils.dip2px(10), SystemUtils.dip2px(4));
    }
}

这块的代码,也是调整了好久才完善好,我觉得这块还是很值得总结的。希望对大家有用。

总结:

做这块的工作,碰到了2个问题,设置background跟padding的先后顺序,一定得是先设置background再设置padding;第二个是要考虑到view的复用,但是对于气泡,特定的背景padding值而言,要用代码的方式禁用掉view的复用效果。最终的消息聊天气泡效果很让我满意,整个页面的布局效果也很好,仿的特别成功。

参考资料:

https://www.jianshu.com/p/4432b19ec6cd