快捷導(dǎo)航

Android CheckBox中設(shè)置padding無效解決辦法

更新時(shí)間：2017年10月13日 15:11:43 作者：ccpat

這篇文章主要介紹了Android CheckBox中設(shè)置padding無效解決辦法的相關(guān)資料,希望通過本文能幫助到大家，讓大家解決這樣類似的問題，需要的朋友可以參考下

Android CheckBox中設(shè)置padding無效解決辦法

CheckBox使用本地圖片資源

CheckBox是Android中用的比較多的一個(gè)控件，不過它自帶的button樣式比較丑，通常都會(huì)替換成本地的資源圖片。使用本地資源圖片很簡單，設(shè)置android:button屬性為一個(gè)自定義的包含selector的drawable文件即可。

例如android:button=”@drawable/radio_style”。radio_style.xml定義如下。checked和unchecked分別是選中和未選中時(shí)使用的圖片資源。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/unchecked"></item>
</selector>

CheckBox點(diǎn)擊響應(yīng)問題

當(dāng)CheckBox使用本地的圖片資源后，如果本地圖片很小（圖片大小需要和布局搭配，很多時(shí)候?yàn)榱私缑娴拿烙^不能使用太大的圖片），而且右側(cè)沒有文字時(shí)，會(huì)導(dǎo)致CheckBox很難被點(diǎn)中。增加點(diǎn)擊區(qū)域，通常的做法是增加padding值，擴(kuò)大控件的外部范圍。我們希望可以通過設(shè)置CheckBox的padding值，讓圖片的上下左右四個(gè)方向都增加一定的范圍，這樣用戶點(diǎn)擊圖片的響應(yīng)上就不會(huì)有問題了。

CheckBox padding失效問題

CheckBox分別設(shè)置上、下、左、右和全部四個(gè)方向各20dp的padding后實(shí)際顯示效果如圖所示。這里為了看得清楚，為CheckBox設(shè)置了背景色，并且添加了文字。

從圖示可以看出，CheckBox設(shè)置padding值影響的是實(shí)際上文字到CheckBox邊界的距離，圖片始終在左側(cè)垂直居中的位置。
先看上下padding，當(dāng)設(shè)置上下padding時(shí)，由于文字本身距離上下邊界就有一定的距離，如果padding值設(shè)置的不夠，整個(gè)CheckBox區(qū)域根本不會(huì)變化，通過設(shè)置較大的padding值可以實(shí)現(xiàn)擴(kuò)大CheckBox上下區(qū)域的目的。最后一張圖上下各20dp的padding，這時(shí)可以看到CheckBox高度增加了。但由于中間文字距離上下邊界的距離和CheckBox圖片高度，文字字號(hào)，文字內(nèi)部padding等很多因素有關(guān)，很難通過對(duì)上下padding設(shè)置精確控制CheckBox區(qū)域，很可能出現(xiàn)在這個(gè)手機(jī)上高度被拉的很大，而另一個(gè)手機(jī)上根本沒有效果。

再看左右padding，當(dāng)設(shè)置左右padding時(shí)，無論是左padding還是右padding，影響的只是文字的位置。圖片始終都在整個(gè)CheckBox的左側(cè)，對(duì)圖片來說，增大的都是右側(cè)區(qū)域。所以設(shè)置的左右padding不能解決CheckBox點(diǎn)擊響應(yīng)的問題，不僅會(huì)導(dǎo)致圖片位置偏左，還會(huì)出現(xiàn)點(diǎn)擊左側(cè)區(qū)域無法點(diǎn)中的情況。

標(biāo)題中所說的padding無效問題，實(shí)際上是有效的，只是設(shè)置paddingLeft增加的是右邊區(qū)域，paddingTop和paddingBottom只有設(shè)置較大的值才能看到效果。

CheckBox padding失效問題原因

要想知道CheckBox padding失效問題原因，得要查看Android源碼，CheckBox是繼承自CompoundButton，CheckBox左側(cè)的圖片是在CompoundButton的onDraw()方法中繪制的，onDraw()方法代碼如下，mButtonDrawable就是要繪制的圖片對(duì)應(yīng)的Drawable對(duì)象，可以看到left始終為0，而top位置和Grivity有關(guān)（上述例子中Gravity是居中的）。

@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

  final Drawable buttonDrawable = mButtonDrawable;
  if (buttonDrawable != null) {
    final int verticalGravity = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;
    final int drawableHeight = buttonDrawable.getIntrinsicHeight();
    final int drawableWidth = buttonDrawable.getIntrinsicWidth();

    int top = 0;
    switch (verticalGravity) {
      case Gravity.BOTTOM:
        top = getHeight() - drawableHeight;
        break;
      case Gravity.CENTER_VERTICAL:
        top = (getHeight() - drawableHeight) / 2;
        break;
    }
    int bottom = top + drawableHeight;
    int left = isLayoutRtl() ? getWidth() - drawableWidth : 0;
    int right = isLayoutRtl() ? getWidth() : drawableWidth;

    buttonDrawable.setBounds(left, top, right, bottom);
    buttonDrawable.draw(canvas);
  }
}

解決CheckBox點(diǎn)擊響應(yīng)問題

由于CheckBox和CompoundButton沒有提供任何方法設(shè)置圖片的位置，要想解決CheckBox點(diǎn)擊響應(yīng)的問題似乎唯一的方法就是重寫一個(gè)新的控件，然后在onDraw方法中確定圖片位置時(shí)把padding也考慮進(jìn)去。不過這樣做實(shí)在是太麻煩了。

這里給出另外一種簡單的方法，那就是將圖片擴(kuò)大。CheckBox點(diǎn)擊響應(yīng)問題本身是由于圖片過小，如果將圖片擴(kuò)大就不存在這個(gè)問題了，但前面說之所以用小的圖片是為了布局搭配和界面美觀，如果將圖片擴(kuò)大不是又回到最開始的問題了嗎！
其實(shí)這里說的圖片擴(kuò)大，不是將圖片整體放大，而是圖片內(nèi)容不變，在原先的圖片外圍增加透明像素，由于透明像素不可見，圖片看起來的實(shí)際大小仍然和以前一樣，但由于透明像素的存在，CheckBox的區(qū)域也會(huì)隨之增大。

要在圖片外網(wǎng)增加透明像素前提是圖片必須是png格式的，不過這并不是問題，通常資源文件都是png格式的，即使不是png格式的圖片，也可以先轉(zhuǎn)換成png格式，然后再增加透明像素。

增加透明像素的方法也很簡單，用Photoshop打開png圖片，然后選擇“圖像”–“畫布大小”，然后輸入新的大小就可以了。

如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: