Android: Làm cách nào để thay đổi kích thước CheckBox?

Tôi muốn làm cho CheckBox nhỏ hơn / lớn hơn một chút, làm cách nào để thực hiện việc này?

Bạn chỉ cần đặt các ngăn kéo có liên quan và đặt chúng trong hộp kiểm:

<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" />

Bí quyết là làm thế nào để thiết lập các ngăn kéo. Đây là một hướng dẫn tốt về điều này .

Bắt đầu với API Cấp 11, có một cách tiếp cận khác tồn tại:

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

Đây là một giải pháp tốt hơn không cắt và / hoặc làm mờ phần có thể vẽ, nhưng chỉ hoạt động nếu hộp kiểm không có văn bản (nhưng bạn vẫn có thể có văn bản, nó phức tạp hơn, xem ở phần cuối).

<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"/>

Kết quả:

Giải pháp trước đó có scaleXvà scaleYtrông như thế nào:

Bạn có thể có một hộp kiểm văn bản bằng cách thêm một TextViewbên cạnh nó và thêm một trình nghe nhấp chuột trên bố cục chính, sau đó kích hoạt hộp kiểm theo chương trình.

Tôi đã tìm thấy nhiều câu trả lời, nhưng chúng hoạt động tốt mà không cần văn bản khi chúng tôi yêu cầu văn bản cũng với hộp kiểm như trong giao diện người dùng của tôi

Ở đây theo yêu cầu giao diện người dùng của tôi, tôi không thể không tăng TextSize nên tùy chọn khác mà tôi đã thử là scaleX và scaleY (Bỏ hộp kiểm) và bộ chọn xml tùy chỉnh với .png Images (nó cũng tạo ra vấn đề với kích thước màn hình khác nhau)

Nhưng chúng tôi có một giải pháp khác cho điều đó, đó là Vector Drawable

Thực hiện theo 3 bước.

Bước 1: Sao chép ba Vector Drawable này vào thư mục có thể vẽ của bạn

đã kiểm tra.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>

( Lưu ý nếu bạn đang làm việc với Android Studio, bạn cũng có thể thêm các Vector có thể vẽ này từ đó, Nhấp chuột phải vào thư mục có thể vẽ của bạn rồi đến Nội dung mới / Vector, sau đó chọn các có thể vẽ này từ đó )

Bước 2: Tạo bộ chọn XML cho hộp kiểm

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>

Bước 3: Đặt có thể vẽ đó vào hộp kiểm

<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" />

Bây giờ nó giống như:

Bạn có thể thay đổi chiều rộng và chiều cao của nó hoặc khung nhìnHeight và viewportWidth và fillColor cũng được

Hy vọng nó sẽ giúp ích!

tôi sử dụng

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

để điều chỉnh kích thước của hộp kiểm

sau đó tôi đặt lợi nhuận như thế này

android:layout_marginLeft="-10dp"

để điều chỉnh vị trí của hộp kiểm.

Đây là những gì tôi đã làm, thiết lập đầu tiên:

android:button="@null"

và cũng thiết lập

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

thì trong mã Java của bạn:

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

Nó phù hợp với tôi, và hy vọng nó sẽ hiệu quả với bạn!

CẬP NHẬT : điều này chỉ hoạt động từ API 17 trở đi ...

Để thêm vào các câu trả lời tuyệt vời khác đã được đưa ra, bạn chỉ có thể làm cho hộp kiểm nhỏ đến mức kích thước văn bản cho phép.

Theo câu trả lời của tôi về câu hỏi này: - làm cách nào chúng ta có thể giảm kích thước của hộp kiểm, vui lòng cho tôi ý kiến

CheckBox lấy chiều cao của nó từ TEXT cũng như hình ảnh.

Đặt các thuộc tính này trong XML của bạn:

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

Tất nhiên điều này chỉ hoạt động nếu bạn không muốn có văn bản (làm việc cho tôi).

Nếu không có những thay đổi này, điều đó CheckBoxđã mang lại cho tôi một lợi nhuận lớn xung quanh hình ảnh của mình, như Joe đã đề cập

Bạn có thể thử giải pháp sau để thay đổi kích thước custom checkboxbằng cách đặt các thuộc tính sau thành Checkboxtrong tệp bố cục của bạn. Đã làm cho tôi

android: scaleX = "0.8" android: scaleY = "0.8"

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

thêm các dòng sau vào tệp có thể vẽ

<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>

Tôi đã tìm thấy một cách để làm điều đó mà không cần tạo hình ảnh của riêng bạn. Nói cách khác, hình ảnh hệ thống đang được thu nhỏ. Tôi không giả vờ rằng giải pháp là hoàn hảo; nếu có ai biết cách rút ngắn một số bước, tôi sẽ sẵn lòng tìm hiểu cách thực hiện.

Đầu tiên, tôi đưa nội dung sau vào lớp hoạt động chính của dự án (WonActivity). Điều này được lấy trực tiếp từ Stack Overflow - cảm ơn các bạn !

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

Thứ hai, tôi đã tạo một lớp để "scale a drawable". Xin lưu ý rằng nó hoàn toàn khác với ScaleDrawable tiêu chuẩn.

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

Cuối cùng, tôi đã xác định một lớp hộp kiểm.

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

Đó là nó. Nếu bạn đặt WonCheckBox trong chế độ xem của mình và áp dụng setHeight (), hình ảnh hộp kiểm sẽ có kích thước phù hợp.

sử dụng mã này.

trong bố cục:

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

thêm một tệp có thể vẽ mới: 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"/>

và kết thúc tạo 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"/>

và cả 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"/>

Giả sử xml ban đầu của bạn là:

<?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>

sau đó chỉ cần xóa android:button="@drawable/xml_above"trong hộp kiểm xml của bạn và thực hiện điều chỉnh tỷ lệ có thể vẽ theo lập trình trong java (giảm 150kích thước lớn xuống dp mong muốn của bạn):

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

các convertDpToPixelphương pháp:

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

Tôi không thể tìm thấy câu trả lời phù hợp cho yêu cầu của mình mà tôi đã tìm ra. Vì vậy, câu trả lời này dành cho hộp kiểm có văn bản như bên dưới, nơi bạn muốn thay đổi kích thước hộp kiểm có thể vẽ và văn bản riêng biệt.

Bạn cần hai PNG cb_checked.png và cb_unchechecked.png thêm chúng vào thư mục có thể vẽ

Bây giờ hãy tạo 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>

Và, 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>

Sau đó, tạo một hộp kiểm XML của bộ chọn.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>

Bây giờ xác định nó layout.xml của bạn như thế này

<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 -->

Nếu bạn muốn thêm hình ảnh tùy chỉnh vào hộp kiểm thì hãy đặt nút thành rỗng và chỉ cần thêm nền vào hộp kiểm là giải quyết được

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>