Android View the background and padding

Disclaimer: This article is xing_star original article, please indicate the source!

This article synchronization from http://javaexception.com/archives/181

In a recent demand to do it is to set bubble background im chat message, before it, the designers did not follow a particular design specifications, leading to bubble background .9 some pictures, some with their own xml painted background. So set the background to a chat message when there were many problems.

Problem Scenario back:

Set the background, we used Api is setBackgroundResource. Initially considered relatively simple, with each message only setBackgroundResource

And then they ran into the first problem, some messages using a .9 map, some xml, the overall effect does not look very coordinated, that is, the interval message some small, looks particularly ugly.

Here we thought of a way, we need to get the text content on different intervals bubble looks similar consideration is to set the padding, instead of using the background inside the interval. For each message, according to what it bubbles, decides to set the parameter values ​​of the padding.

General code

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

Then I fell into a second pit, discovered after setting the padding, the effect did not change, can not find the cause of a sudden, very angry. Had to give up this work, to busy with other, I do not know how long, inspiration, think of the adjustment padding and background of the order.

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

Must have is to set the background, setting padding values. You can not be a first set padding, and then set the background. This article https://www.jianshu.com/p/4432b19ec6cd depth analysis of the next reasons for this recommendation to see this article.

Here the effect is to substantially closer, but still wrapped in bubble background of some item of content interval in question, the feeling is view of multiplexing mechanism (RecyclerView, ListView's item) at play. (Also provided padding values ​​when using such methods do not view the getPaddingLeft (), all given a specific value, to avoid the reuse mechanism from the source)

Then again modify the code, the code to cover various Case, corresponding to each itemView are manually set again, padding, bubble BACKGROUND this view do not use multiplexing.

Code integrity bubble process as follows:

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));
    }
}

This piece of code, but also went a long way improve, and I think this is still very worth reviewing. hope its good for U.S..

to sum up:

To do this work, encountered two problems, set the background with the padding of the order, must be first set and then set the background padding; the second is to take into account the view of the multiplex, but for bubbles, specific background padding in terms of value, use the code the way out of view disabling multiplexing effect. The final message chat bubble effect is to my satisfaction, the effect of the entire page layout is also very good, particularly successful imitation.

References:

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