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