Android：如何根据另一个图像的大小对齐图像？ （控制器由4个按钮组成）

Question

我有4个图像按钮，它们应该像这样对齐：

你可以看到它们重叠，所以我不能使用简单的表格布局，因为＆＃34;折叠＆＃34;表行。我尝试在这些图像按钮中使用透明图像，而我使用嵌套和重叠的LinearLayouts来对齐它们。通过这种尝试，我不必担心密度相关的计算。这似乎首先起作用，但遗憾的是其中一个隐形按钮覆盖了真实的图像按钮，所以我不能再点击至少一个图像按钮了，因为它就像点击隐形按钮一样，覆盖真实图像按钮 另一个困难是我无法在xml文件中使用密度相关的对齐方式。原因是这些图像按钮以与其他缩放图像不同的方式缩放。这是因为尽管有手机或平板电脑，这些图像按钮应始终与缩略图一样大。因此，通常与保证金的对齐不适用于此。

我认为实现这一目标的唯一方法是以编程方式计算它。还是其他任何想法？

Answer 1

这是我的版本（较少的视图），基于我的原始提示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/controller_container"
    android:layout_width="240dp"
    android:layout_height="240dp"
    >
    <ImageButton
        android:id="@+id/button_invisible_center"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:contentDescription="button_invisible"
        android:visibility="invisible"
    />
    <ImageButton
        android:id="@+id/button_left"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toLeftOf="@id/button_invisible_center"
        android:layout_alignTop="@id/button_invisible_center"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_left"
    />
    <ImageButton
        android:id="@+id/button_up"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_above="@id/button_invisible_center"
        android:layout_alignLeft="@id/button_invisible_center"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_up"
    />
    <ImageButton
        android:id="@+id/button_right"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toRightOf="@id/button_invisible_center"
        android:layout_alignTop="@id/button_invisible_center"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_up"
    />
    <ImageButton
        android:id="@+id/button_down"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/button_invisible_center"
        android:layout_alignLeft="@id/button_invisible_center"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_down"
    />
</RelativeLayout>

结果是：

我重新安排了视图，以减少他们的数量，从而提高性能，使布局更轻。

诀窍是什么？在容器中wrap_content，将所有内容缩小到中心，而match_parent（完美无缺）只是具体而言。

所以我给了按钮固定尺寸​​ 80 * 80 dp和容器3次80 dp（最大组合宽度和高度）。

我使用的图像并没有“剪掉”，所以它更好地说明了这个概念。

享受！

<强> [编辑]

在你的情况下，这部分

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

不需要。只需用

替换它

<RelativeLayout

因为它意味着放在另一个容器内。

Answer 2

现在我有一个解决方案，因为Golem的提示虽然它不能只使用一个居中的隐形物品。我不得不放置＆＃34;向上＆＃34;，＆＃34;向上＆＃34;，＆＃34;向下＆＃34;左边的隐形按钮在一个按钮有100x100dp的中心，隐形侧按钮有80x80dp，隐形中央按钮有60x60dp。如果你知道的更好，请告诉我。

<RelativeLayout
    android:id="@+id/controller_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|left" >

    <ImageButton
        android:id="@+id/button_invisible_top_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_control_invisible_side"
        android:contentDescription="@string/button_invisible" />

    <ImageButton
        android:id="@+id/button_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_invisible_top_left"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_up" />

    <ImageButton
        android:id="@+id/button_invisible_top_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_up"
        android:background="@drawable/button_control_invisible_side"
        android:contentDescription="@string/button_invisible" />

    <ImageButton
        android:id="@+id/button_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_invisible_top_left"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_left" />

    <ImageButton
        android:id="@+id/button_invisible_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_left"
        android:layout_below="@id/button_up"
        android:background="@drawable/button_control_invisible_center"
        android:contentDescription="@string/button_invisible" />

    <ImageButton
        android:id="@+id/button_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_invisible_center"
        android:layout_below="@id/button_invisible_top_right"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_up" />

     <ImageButton
        android:id="@+id/button_invisible_bottom_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_left"
        android:background="@drawable/button_control_invisible_side"
        android:contentDescription="@string/button_invisible" />


    <ImageButton
        android:id="@+id/button_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_invisible_bottom_left"
        android:layout_below="@id/button_invisible_center"
        android:layout_alignBottom="@id/button_invisible_bottom_left"
        android:background="@drawable/button_control"
        android:contentDescription="@string/button_down" />
</RelativeLayout>