使用 XML 和 TableLayout 的 Android 自定义按钮（自定义文本）

Question

我想使用 Android Studio 在 XML 中创建一个具有 4 个独立 TextViews 的 自定义按钮。 （按钮应该有一个正常居中的TextView 选项，我可以在需要时setVisible()。）

但是，我尝试了布局高度，但还没有找到合适的解决方案。目标是，我的buttons.xml 将使用TableLayout 在屏幕右半部分显示自定义按钮6 次（请参阅buttons.xml）。 当我直接在TableLayout 中使用普通Buttons 时，这非常有效。 （参考UNDO Button，这是正确的尺寸）

当我尝试在TableLayout 中使用<include> 我的custom_button.xml 时，它们要么太大，一个按钮将占用超过 75% 的屏幕高度（使用 match_parent），要么自定义按钮太小（使用wrap_content）。

这里列出了提到的xml-文件，准备在没有colors.xml、strings.xml或dimens.xml的情况下使用：

---

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.test.app.testapp.MainActivity"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000">

<!-- Other stuff like background image, toolbar and bottom info tableLayout -->

<include
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    layout="@layout/buttons"
    />

</RelativeLayout>

---

buttons.xml：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/buttons"
    android:background="#000000"

    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_01"
            />

        <include
            android:id="@+id/button_01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />


    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_02"
            />

        <include
            android:id="@+id/button_02"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_03"
            />

        <include
            android:id="@+id/button_03"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_04"
            />

        <include
            android:id="@+id/button_04"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_05"
            />

        <!-- Wrap content makes the buttons too small, they should
        be evenly sized over the screen -->
        <include
            android:id="@+id/button_05"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:enabled="false"

            android:background="#546752"
            android:text="UNDO"

            android:id="@+id/button_07"/>

        <!-- I tried match_parent for height here but it didn't work  -->
        <include
            android:id="@+id/button_06"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>    
</TableLayout>

---

custom_button.xml：

<?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="wrap_content"
    android:background="#000000"
    android:id="@+id/custom_button"
    >

    <!-- I think wrap_content is wrong, but match_parent makes all of
    those too big in the buttons.xml -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:background="#55546752"/>

    <TextView
        android:id="@+id/text_view_button_normal"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:text="TEXT"
        android:background="@null"
        android:textColor="#FFFFFF" />

    <!-- How to make this tablelayout the same height like the two
    things above??

    How to CENTER the 4 TextViews not just horizontally, but also
    vertically?? -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button_table">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5">
            <TextView
                android:id="@+id/text_view_button_label_1"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_2"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5">
            <TextView
                android:id="@+id/text_view_button_label_3"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_4"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>
    </TableLayout> 
</RelativeLayout>

---

输出：

您可以看到，右侧站点上的前 5 个按钮太小，并且自定义的 TextViews 没有正确对齐（垂直居中）。 右侧站点上的第六个按钮使用match_parent 表示高度，混合大小正确，但内容仍然太小（由于wrap_content）。 唯一正确显示的Button 是UNDO-Button。

（给我声望，以便我可以直接包含图像）： Screenshot

如果您能提供像这样的自定义Button 和TableLayout 的解决方案，我将不胜感激！

Answer 1

感谢来自 Uni 的一些随机家伙的解决方案！

---

解决方案

---

buttons.xml：

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/buttons"
    android:background="#000000"

    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_01"
            />

        <include
            android:id="@+id/button_01"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:layout_gravity="center"

            />


    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_02"

            />

        <include
            android:id="@+id/button_02"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:layout_gravity="center"

            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_03"
            />

        <include
            android:id="@+id/button_03"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_gravity="center"

            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"

            android:textSize="15sp"
            android:id="@+id/text_04"
            />

        <include
            android:id="@+id/button_04"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:layout_gravity="center"

            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/lastTableRow"
        android:layout_weight=".16666666">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="5dp"

            android:layout_marginTop="5dp"
            android:textSize="15sp"
            android:id="@+id/text_05"
            />

        <!-- Wrap content makes the buttons too small, they should
        be evenly sized over the screen -->
        <include
            android:id="@+id/button_05"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_gravity="center"

            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".16666666">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="0dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight=".5"
            android:enabled="false"
            android:background="#546752"

            android:text="UNDO"
            android:id="@+id/button_07"/>

        <include
            android:id="@+id/button_06"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            layout="@layout/custom_button"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="0dp"
            android:layout_weight=".5"

            />

    </TableRow>
</TableLayout>

---

custom_button.xml：

<?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="wrap_content"
    android:background="#000000"
    android:id="@+id/custom_button"
    >

    <!-- I think wrap_content is wrong, but match_parent makes all of
    those too big in the buttons.xml -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/button"
        android:onClick="onClick"
        android:background="#55546752"/>

    <TextView
        android:id="@+id/text_view_button_normal"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:text="TEXT"
        android:background="@null"
        android:textColor="#FFFFFF" />

    <!-- How to make this tablelayout the same height like the two
    things above??

    How to CENTER the 4 TextViews not just horizontally, but also
    vertically?? -->
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/button"
        android:layout_weight="1"
        android:id="@+id/button_table">

        <TableRow
            android:layout_weight=".5"
            android:layout_width="match_parent"
            android:layout_height="0dp">
            <TextView
                android:id="@+id/text_view_button_label_1"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_2"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>

        <TableRow
            android:layout_weight=".5"

            android:layout_width="match_parent"
            android:layout_height="0dp">
            <TextView
                android:id="@+id/text_view_button_label_3"
                android:layout_weight=".5"
                android:textSize="10sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/text_view_button_label_4"
                android:layout_weight=".5"
                android:textSize="15sp"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center"
                android:text="TEXT"
                android:background="@null"
                android:textColor="#FFFFFF" />

        </TableRow>
    </TableLayout>
</RelativeLayout>

---

最后是这样的：

Screenshot