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

Question

我想在 XML 中使用 [=65] 创建一个带有 4 个独立 TextViews 的 Custom Button =]Android工作室。（该按钮应该有一个正常居中的选项 TextView，我可以在需要时 setVisible()。）

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

当我尝试 <include> 我的 custom_button.xml 在 TableLayout 内时，它们要么太大，要么一个按钮会占用超过 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

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

Android Custom Button (custom Text) using XML and TableLayout

xml

android

button

textview

android-tablelayout

`activity_main.xml`:

`buttons.xml`:

`custom_button.xml`:

输出：

解决方案

`buttons.xml`:

`custom_button.xml`:

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

Android Custom Button (custom Text) using XML and TableLayout

xml

android

button

textview

android-tablelayout

activity_main.xml:

buttons.xml:

custom_button.xml:

输出：

解决方案

buttons.xml:

custom_button.xml:

`activity_main.xml`:

`buttons.xml`:

`custom_button.xml`:

`buttons.xml`:

`custom_button.xml`: