Android:如何更改CheckBox大小?


Answers:


57

您只需要设置相关的可绘制对象并在复选框中进行设置:

<CheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:text="new checkbox" 
    android:background="@drawable/my_checkbox_background"
    android:button="@drawable/my_checkbox" />

诀窍在于如何设置可绘制对象。这是有关此的很好的教程


11
请记住,不同的设备可能安装了自定义主题。如果您通过放置自己的自定义图像来调整尺寸,请确保替换了应用程序中的每个复选框(即使尺寸没有变化),否则在某些设备上可能会混合使用多种样式。
DougW 2012年

141

从API级别11开始,存在另一种方法:

<CheckBox
    ...
    android:scaleX="0.70"
    android:scaleY="0.70"
/>

5
此技术还将缩放文本标签。为了弥补这一点,我如下调整了文本大小:checkBox.TextSize =(int)(TEXT_SIZE / SCALE_FACTOR);
samis

5
如果我这样做是为了增加,例如将其缩放为“ 2.0”,则它确实会变大,但是图像被裁剪了,我看到了复选框的右半部分和文本的左半部分。可以解决吗?
Al Lelopath

4
不错,尽管它仍然占用相同的空间。为了解决我使用的-ve边距,例如:android:layout_marginLeft =“-10dp”
M. Usman Khan

我可能不会在IDE的预览中显示出来,但是CheckBox将在运行时缩放
Leo Droidcoder

为我显示在“ AS设计”视图中。对于不需要修复的问题的简单修复。我认为API或设备会产生影响。在API 22上使用Gennymotion设备时,似乎最高的Y是0.8(水平LinearLayout),而便宜的是,Onix平板电脑没有固定为
1。– MikeT

95

这是一个更好的解决方案,它不会裁剪和/或模糊可绘制对象,但仅在复选框本身没有文本的情况下才有效(但是您仍然可以有文本,这只是更复杂,请参见最后)。

<CheckBox
    android:id="@+id/item_switch"
    android:layout_width="160dp"    <!-- This is the size you want -->
    android:layout_height="160dp"
    android:button="@null"
    android:background="?android:attr/listChoiceIndicatorMultiple"/>

结果:

什么以前的解决方案与scaleXscaleY看起来像:

您可以TextView在其旁边添加一个文本复选框,并在父布局上添加一个单击侦听器,然后以编程方式触发该复选框,从而获得一个文本复选框。


2
如果您的复选框带有文本,则无法使用背景。
Zach Green

@ZachGreen是的。没想到如果复选框中有文字,我的则没有。将会更新答案
Antoine Bolvy

3
这是一个比公认的更好的答案。
vtlinh '16

在160dp时看起来像粒状。似乎分辨率太低
Gianluca Demarinis

如何为该复选框设置色调?
YTerle

16

好吧,我找到了很多答案,但是当我们也需要带有复选框的文本(如在我的用户界面中)时,如果没有文本,它们也可以正常工作在此处输入图片说明

在这里,根据我的UI要求,我无法增加TextSize,所以我尝试的其他选项是scaleX和scaleY(拉伸复选框)以及具有.png图片的自定义xml选择器(它还会产生不同屏幕尺寸的问题)

但是我们有另一种解决方案,即Vector Drawable

分3步进行。

步骤1:将这三个Vector Drawable复制到您的drawable文件夹

Checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,3L5,3c-1.11,0 -2,0.9 -2,2v14c0,1.1 0.89,2 2,2h14c1.11,0 2,-0.9 2,-2L21,5c0,-1.1 -0.89,-2 -2,-2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
</vector>

un_checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,5v14H5V5h14m0,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2V5c0,-1.1 -0.9,-2 -2,-2z" />
</vector>

请注意,如果您使用的是Android Studio,还可以从此处添加这些Vector Drawable,右键单击您的drawable文件夹,然后单击New / Vector Asset,然后从此处选择这些drawable。

步骤2:为check_box创建XML选择器

check_box_selector.xml

<?xml version="1.0" encoding="utf-8"?>

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

步骤3:将可绘制对象设置为复选框

<CheckBox
android:id="@+id/suggectionNeverAskAgainCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:button="@drawable/check_box_selector"
android:textColor="#FF000000"
android:textSize="13dp"
android:text="  Never show this alert again" />

现在像:

在此处输入图片说明


您可以更改其宽度和高度,也可以更改viewportHeight和viewportWidth和fillColor


希望对您有所帮助!


2
就我而言,我必须设置android:button="@null"android:background="@drawable/check_box_selector"使其调整复选框的大小。
ArturSzymański18年

这种方法破坏了填充
Oleh Liskovych

9

我用

android:scaleX="0.70" android:scaleY="0.70"

调整复选框的大小

然后我像这样设置边距

android:layout_marginLeft="-10dp"

调整复选框的位置。


兄弟,尽管确实缩小了尺寸-余地在我的情况下不起作用。我的复选框图像为173 x 93-复选框的大小仍占据该空间。我认为Antoine Bolvy是更灵活的解决方案。
Alexey Shevelyov '16

6

这是我首先做的:

android:button="@null"

并设置

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

然后在您的Java代码中:

Drawable d = mCheckBox.getCompoundDrawables()[0];
d.setBounds(0, 0, width_you_prefer, height_you_prefer);
mCheckBox.setCompoundDrawables(d, null, null, null);

它对我有用,希望它对您有用!


4

更新:仅从API 17开始有效...


要添加其他已经给出的出色答案,您只能将复选框设置为文本大小允许的最小。

根据我对这个问题的回答:- 我们如何减小复选框的大小,请给我一个想法


CheckBox 从TEXT以及图像得出其高度。

在XML中设置以下属性:

android:text=""
android:textSize="0sp"

当然,这仅在您不希望输入文字时才有效(为我工作)。

如乔提到的,如果不进行这些更改,这CheckBox将使我的形象有很大的余地。


1

您可以尝试以下解决方案来更改大小,方法custom checkboxCheckbox在布局文件中将设置以下属性。为我工作

android:scaleX =“ 0.8” android:scaleY =“ 0.8”

android:button="@null"
android:scaleX="0.8"
android:scaleY="0.8"
android:background="@drawable/custom_checkbox"

将以下行添加到可绘制文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="false"
      android:drawable="@drawable/unchecked_img" />
<item android:state_checked="true"
      android:drawable="@drawable/checked_img" />
</selector>

0

我找到了一种无需创建自己的图像的方法。换句话说,系统图像正在缩放。我不认为解决方案是完美的。如果有人知道缩短某些步骤的方法,我将很乐意找出方法。

首先,将以下内容放入项目的主要活动类(WonActivity)中。这直接取自Stack Overflow- 谢谢大家

/** get the default drawable for the check box */
Drawable getDefaultCheckBoxDrawable()
{
  int resID = 0;

  if (Build.VERSION.SDK_INT <= 10)
  {
    // pre-Honeycomb has a different way of setting the CheckBox button drawable
    resID = Resources.getSystem().getIdentifier("btn_check", "drawable", "android");
  }
  else
  {
    // starting with Honeycomb, retrieve the theme-based indicator as CheckBox button drawable
    TypedValue value = new TypedValue();
    getApplicationContext().getTheme().resolveAttribute(android.R.attr.listChoiceIndicatorMultiple, value, true);
    resID = value.resourceId;
  }

  return getResources().getDrawable(resID);
}

其次,我创建了一个类来“缩放可绘制对象”。请注意,它与标准ScaleDrawable完全不同。

import android.graphics.drawable.*;

/** The drawable that scales the contained drawable */

public class ScalingDrawable extends LayerDrawable
{
  /** X scale */
  float scaleX;

  /** Y scale */
  float scaleY;

  ScalingDrawable(Drawable d, float scaleX, float scaleY)
  {
    super(new Drawable[] { d });
    setScale(scaleX, scaleY);
  }

  ScalingDrawable(Drawable d, float scale)
  {
    this(d, scale, scale);
  }

  /** set the scales */
  void setScale(float scaleX, float scaleY)
  {
    this.scaleX = scaleX;
    this.scaleY = scaleY;
  }

  /** set the scale -- proportional scaling */
  void setScale(float scale)
  {
    setScale(scale, scale);
  }

  // The following is what I wrote this for!

  @Override
  public int getIntrinsicWidth()
  {
    return (int)(super.getIntrinsicWidth() * scaleX);
  }

  @Override
  public int getIntrinsicHeight()
  {
    return (int)(super.getIntrinsicHeight() * scaleY);
  }
}

最后,我定义了一个复选框类。

import android.graphics.*;
import android.graphics.drawable.Drawable;
import android.widget.*;

/** A check box that resizes itself */

public class WonCheckBox extends CheckBox
{
  /** the check image */
  private ScalingDrawable checkImg;

  /** original height of the check-box image */
  private int origHeight;

  /** original padding-left */
  private int origPadLeft;

  /** height set by the user directly */
  private float height;

  WonCheckBox()
  {
    super(WonActivity.W.getApplicationContext());
    setBackgroundColor(Color.TRANSPARENT);

    // get the original drawable and get its height
    Drawable origImg = WonActivity.W.getDefaultCheckBoxDrawable();
    origHeight = height = origImg.getIntrinsicHeight();
    origPadLeft = getPaddingLeft();

    // I tried origImg.mutate(), but that fails on Android 2.1 (NullPointerException)
    checkImg = new ScalingDrawable(origImg, 1);
    setButtonDrawable(checkImg);
  }

  /** set checkbox height in pixels directly */
  public void setHeight(int height)
  {
    this.height = height;
    float scale = (float)height / origHeight;
    checkImg.setScale(scale);

    // Make sure the text is not overlapping with the image.
    // This is unnecessary on Android 4.2.2, but very important on previous versions.
    setPadding((int)(scale * origPadLeft), 0, 0, 0);

    // call the checkbox's internal setHeight()
    //   (may be unnecessary in your case)
    super.setHeight(height);
  }
}

而已。如果将WonCheckBox放在视图中并应用setHeight(),则复选框图像的大小将正确。


0

使用此代码。

在布局中:

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/my_checkbox"  *** here
        android:checked="true"/>

添加一个新的drawable:my_checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:state_checked="false"
    android:drawable="@drawable/checkbox_off_background"/>

<item
    android:state_checked="true"
    android:drawable="@drawable/checkbox_on_background"/>

并结束创建2 drawable:

checkbox_off_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <size
            android:height="25dp"   *** your size
            android:width="25dp"/>
    </shape>
</item>

<item android:drawable="@android:drawable/checkbox_off_background"/>

同样,checkbox_on_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <size
            android:height="25dp"
            android:width="25dp"/>
    </shape>
</item>

<item android:drawable="@android:drawable/checkbox_on_background"/>


0

假设您原始的xml是:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:drawable="@drawable/tick_img" />
    <item android:state_checked="false"
        android:drawable="@drawable/untick_img" />
</selector>

然后只需android:button="@drawable/xml_above"在复选框xml中删除,然后在Java中以编程方式进行可绘制缩放(将150大尺寸减小至所需的dp):

CheckBox tickRememberPasswd = findViewById(R.id.remember_tick);

//custom selector size
Drawable drawableTick = ContextCompat.getDrawable(this, R.drawable.tick_img);
Drawable drawableUntick = ContextCompat.getDrawable(this, R.drawable.untick_img);
Bitmap bitmapTick = null;
if (drawableTick != null && drawableUntick != null) {
    int desiredPixels = Math.round(convertDpToPixel(150, this));

    bitmapTick = ((BitmapDrawable) drawableTick).getBitmap();
    Drawable dTick = new BitmapDrawable(getResources()
            , Bitmap.createScaledBitmap(bitmapTick, desiredPixels, desiredPixels, true));

    Bitmap bitmapUntick = ((BitmapDrawable) drawableUntick).getBitmap();
    Drawable dUntick = new BitmapDrawable(getResources()
            , Bitmap.createScaledBitmap(bitmapUntick, desiredPixels, desiredPixels, true));

    final StateListDrawable statesTick = new StateListDrawable();
    statesTick.addState(new int[] {android.R.attr.state_checked},
            dTick);
    statesTick.addState(new int[] { }, //else state_checked false
            dUntick);
    tickRememberPasswd.setButtonDrawable(statesTick);
}

convertDpToPixel方法:

public static float convertDpToPixel(float dp, Context context) {
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return px;
}

0

我找不到我想要的相关答案。因此,此答案适用于具有以下文本的复选框,您要分别调整复选框可绘制区域和文本的大小。

在此处输入图片说明

您需要两个PNG cb_checked.png和cb_unchechecked.png将它们添加到可绘制文件夹中

现在创建cb_bg_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cb_checked"
        android:height="22dp" <!-- This is the size of your checkbox -->
        android:width="22dp"  <!-- This is the size of your checkbox -->
        android:right="6dp"   <!-- This is the padding between cb and text -->
        tools:targetApi="m"
        tools:ignore="UnusedAttribute" />
</layer-list>

而且,cb_bg_unchecked.xml

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
        <item android:drawable="@drawable/cb_unchechecked"
            android:height="22dp" <!-- This is the size of your checkbox -->
            android:width="22dp"  <!-- This is the size of your checkbox -->
            android:right="6dp"   <!-- This is the padding between cb and text -->
            tools:targetApi="m"
            tools:ignore="UnusedAttribute" />
    </layer-list>

然后创建一个选择器XML checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cb_bg_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/cb_bg_unchecked" android:state_checked="false"/>
</selector>

现在像这样定义您的layout.xml

<CheckBox
  android:id="@+id/checkbox_with_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:checked="true"
  android:button="@drawable/checkbox"
  android:text="This is text"
  android:textColor="@color/white"
  android:textSize="14dp" /> <!-- Here you can resize text -->

-1

如果要将自定义图像添加到复选框,则将button设置为null,然后仅将背景添加到复选框即可解决

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.