版权声明：本文为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