欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android View的background和padding

程序员文章站 2022-06-29 09:16:09
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/181 最近在做一个需求,是对im聊天消息设置气泡背景,之前呢,设计师没有特别遵循一定的设计规范,导致,气泡背景有的是.9的图片,有的是自己用xml画出来的背景 ......

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

本文同步自

最近在做一个需求,是对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的复用效果。最终的消息聊天气泡效果很让我满意,整个页面的布局效果也很好,仿的特别成功。

参考资料: