Android View的background和padding

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