表格布局中按钮上的图像视图

Question

我已经设置了一个 TableLayout 并添加了一行以包含一个按钮和一个 ImageView。 ImageView 只是一个色点。我过去曾将样式与 RelativeLayout 一起使用，并将 ImageView 定位在按钮图像上方。我正在开发的新应用程序使用 TableLayout，但是当我尝试使用 ImageView 设置按钮时，它不允许定位。此选项不适用于 TableLayout 吗？

<TableLayout
    android:id="@+id/TB1"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_weight="1" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/Scene1"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:background="@drawable/custom_scene_buttons"
            android:text="Scene 1"
            android:textColor="@drawable/white"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/colordot1"
            android:layout_width="21dp"
            android:layout_height="21dp"
            android:background="@drawable/circle" />
    </TableRow>

这是改变颜色点的代码。

                Resources res = getResources();
        final Drawable drawable = res.getDrawable(R.drawable.circle);
        drawable.setColorFilter(Color.rgb(i, j, k), Mode.SRC_ATOP);
        ImageView img = (ImageView) findViewById(R.id.colordot1);
        img.setBackgroundDrawable(drawable);

这是我尝试过的线性布局选项

                <LinearLayout android:orientation="vertical" >

            <Button
                android:id="@+id/Scene1"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:background="@drawable/custom_scene_buttons"
                android:drawableRight="@drawable/circle"
                android:text="Scene 1"
                android:textColor="@drawable/white"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/colordot1"
                android:layout_width="21dp"
                android:layout_height="21dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/circle" />
        </LinearLayout>

Answer 1

编辑：包括整个 TableLayout。我已经使用 drawableRight 让它工作了。您可以通过抓取 Button 并更改其可绘制对象以编程方式更改圆。 Here's a link describing this。下面是我测试过的 TableLayout 的截图。

<TableLayout
    android:id="@+id/TB1"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_weight="1" >

<TableRow
    android:id="@+id/tableRow1" >

    <Button
        android:id="@+id/Scene1"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 1"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <Button
        android:id="@+id/Scene2"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 2"
        android:textColor="@color/white"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow2" >

    <Button
        android:id="@+id/Scene3"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 3"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <Button
        android:id="@+id/Scene4"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 4"
        android:textColor="@color/white"
        android:textSize="20sp" />

</TableRow>

</TableLayout>

---

问题是使用 TableLayout 时，每个 TableRow 的子项都是一列。因此，您的按钮和 ImageView 属于不同的列。您在此 TableLayout 中还有其他行吗？列的宽度由该列中宽度最大的视图定义。因此，如果您有另一个 TableRow 并且它的第二个子视图的宽度为 100dp，这将影响您的第二列的宽度，即您的圆形 ImageView。

为什么不使用 drawableRight 属性。如下修改 Button 并删除您的 ImageView。您还可以修改可绘制的填充。

<Button
        android:id="@+id/Scene1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@drawable/custom_scene_buttons"
        android:text="Scene 1"
        android:textColor="@drawable/white"
        android:drawableRight="@drawable/circle"
        android:textSize="20sp" />