Android: Как изменить размер флажка?

Я хотел бы сделать флажок немного меньше/больше, как я могу это сделать?

10 ответов


вам просто нужно установить соответствующие чертежи и установить их в флажок:

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

фокус в том, как установить drawables. вот хороший учебник об этом.


начиная с уровня API 11 существует другой подход:

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

вот лучшее решение, которое не обрезает и/или размывает рисование, но работает только в том случае, если флажок не имеет текста (но вы все равно можете иметь текст, это просто сложнее, см. В конце).

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

результат:

какое предыдущее решение с scaleX и scaleY выглядел так:

вы можете установить текстовый флажок, добавив TextView рядом с ним и добавление прослушивателя щелчка на родительском макете, а затем запуск флажка программно.


Ну, я нашел много ответов, но они отлично работают без текста, когда нам нужен текст также с флажком, как в моем UIenter image description here

здесь в соответствии с моим требованием пользовательского интерфейса я не могу не увеличивать TextSize, поэтому другой вариант, который я пробовал, - это scaleX и scaleY (установите флажок) и пользовательский селектор xml .png изображения (его также создает проблему с различным размером экрана)

но у нас есть другое решение для этого, то есть вектор Drawable

сделать в 3 шага.

Шаг 1: скопируйте туда вектор Drawable в папку drawable

проверено.в 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, вы также можете добавить эти векторные Drawable форму там, щелкните правой кнопкой мыши на вашей drawable папке, то новый / векторный актив, который выберите эти drawable оттуда) Шаг 2: Создать селектор Xml для check_box

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: установите этот drawable в флажок

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

теперь это похоже:

enter image description here


вы можете изменить его ширину и высоту или viewportHeight и viewportWidth и fillColor также


надеюсь, это поможет!


Я использую

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

к Ajust размер флажка

затем я устанавливаю поля, как это

android:layout_marginLeft="-10dp"

чтобы настроить расположение флажка.


вот что я сделал, первый набор:

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

это работает для меня, и надеюсь, это будет работать для вас!


обновление: это работает только с API 17 лет...


чтобы добавить к другим блестящим ответам, уже данным, Вы можете сделать флажок настолько маленьким, насколько позволяет размер текста.

согласно моему ответу на этот вопрос: - как мы можем уменьшить размер флажка пожалуйста, дайте мне идею


CheckBox выводит свою высоту из текста, а также изображения.

установить эти свойства в XML-код:

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

конечно, это работает, только если вы не хотите текст (работал для меня).

без этих изменений CheckBox давал мне большое поле вокруг моего изображения, как упоминалось Джо


Я нашел способ сделать это без создания собственных изображений. Другими словами, масштабируется системный образ. Я не претендую на то, что решение идеально; если кто-то знает способ сократить некоторые шаги, я буду рад узнать, как это сделать.

во-первых, я поместил следующее в основной класс активности проекта (WonActivity) . Это было взято непосредственно из Stack Overflow -- спасибо, ребята!--7-->!

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

во-вторых, я создал класс "масштаб drawable". Обратите внимание, что он полностью отличается от стандартного 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);
  }
}

наконец, я определил класс checkbox.

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(), изображение флажка будет иметь правильный размер.


используйте этот код.

планировка:

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


вы можете попробовать следующее решение, чтобы изменить размер пользовательские флажок, установив следующие свойства Checkbox в файле layout.Работал на меня

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

добавить следующие строки в drawable file

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