Question

我尝试对齐四个复选框，但一个不在另一个的中心。如果我缩短它适合的文本但是如果它在屏幕截图中看起来更长。问题是它将使用不同的语言，因此文本大小可能不同。此外，如果我删除它，它适合完美，但我需要这个更大的复选框

这是我的代码：

<CheckBox
    android:id="@+id/cb1"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="23dp"
    android:text="@string/unmounted"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/abc"
    android:layout_toEndOf="@+id/imageView6"
    android:focusable="false"/>

<CheckBox
    android:id="@+id/cb2"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/problem_not_working"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/cb1"
    android:layout_alignStart="@+id/cb1"
    android:focusable="false"/>

<CheckBox
    android:id="@+id/cb3"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/problem_cable_defective"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/cb2"
    android:layout_alignStart="@+id/cb2"
    android:focusable="false"/>

<CheckBox
    android:id="@+id/cb4"
    android:scaleX="1.3"
    android:scaleY="1.3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/problem_cable_tie"
    android:textColor="@color/textBlack"
    android:layout_below="@+id/cb3"
    android:layout_alignStart="@+id/cb3"
    android:focusable="false"/>

Answer 1

以下是您问题的确切解决方案，您实际想要实现的是更大的复选框视图（对应于其文本，与复选框视图一样大，显然）与所有视图的正确对齐这个系列，如下：

Your desired UI.

但你做错的事情是你正在使用scaleX和scaleY属性来实现你想要的视图扭曲视图的UI，因为这两个属性缩放了整个视图，即方形复选框视图及其文本/标签在X中和Y方向分别（与复选框的文本/标签一起），因此也依赖于文本（这会扭曲你的视图）。

因此，以下代码将解决您的问题：（在这里我已经将方形复选框视图分开并且在它旁边我放置了一个textview，其中我已经编写了与该复选框的文本/标签对应的文本以完成UI）。从而使用两个视图（即CheckBox和它旁边的TextView）而不是使用单个复合视图（即CheckBox）。

注意：在下面给出的解决方案中，CheckBox是一个复合视图，但我还没有在它中使用它同样的方式。

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

    <View
        android:id="@+id/some_view"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="23dp" />

    <!--android:text="Unmounted"-->
    <CheckBox
        android:id="@+id/cb1"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/some_view"
        android:layout_alignStart="@+id/some_view"
        android:focusable="false" />

    <TextView
        android:id="@+id/tv_for_cb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb1"
        android:layout_alignTop="@+id/cb1"
        android:layout_alignBottom="@+id/cb1"
        android:layout_marginStart="40dp"
        android:text="Unmounted"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!--android:text="Problem Not Working"-->
    <CheckBox
        android:id="@+id/cb2"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/cb1"
        android:layout_alignStart="@+id/cb1"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_for_cb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb2"
        android:layout_alignTop="@+id/cb2"
        android:layout_alignBottom="@+id/cb2"
        android:layout_marginStart="40dp"
        android:text="Problem Not Working"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!--android:text="Problem Cable Defective"-->
    <CheckBox
        android:id="@+id/cb3"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/cb2"
        android:layout_alignStart="@+id/cb2"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_for_cb3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb3"
        android:layout_alignTop="@+id/cb3"
        android:layout_alignBottom="@+id/cb3"
        android:layout_marginStart="40dp"
        android:text="Problem Cable Defective"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <!--android:text="Problem Cable Tie"-->
    <CheckBox
        android:id="@+id/cb4"
        android:scaleX="1.3"
        android:scaleY="1.3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_below="@+id/cb3"
        android:layout_alignStart="@+id/cb3"
        android:focusable="false"/>

    <TextView
        android:id="@+id/tv_for_cb4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/cb4"
        android:layout_alignTop="@+id/cb4"
        android:layout_alignBottom="@+id/cb4"
        android:layout_marginStart="40dp"
        android:text="Problem Cable Tie"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

</RelativeLayout>

你提到的问题的另一个方法是为复选框创建自定义drawable，然后使用状态列表drawable处理它们，因为复选框在不同状态下显示不同，如未选中，检查等。

如果您有兴趣以这种方式或方式进行此链接，此链接会对您有所帮助，如果您想要自定义复选框的视图，那么此链接会很棒。

Creating custom checkbox using selectors and shapes.

有关此背景下的进一步帮助，请参阅：

Android: How to change CheckBox size?

垂直对齐多个复选框

1 个答案: