安卓布局 : 1 imageview on fixed position and 2 imageviews fill up the remaining space

Question

我做了一个看起来像这样的设计:

问题是创建应该指向当前所选类别的小三角形。本质上，没有背景和东西它看起来像这样:

在类别文本下方，放置了一个透明的蓝色矩形，在它的右侧应该制作“指针”。我想象这个指针被放置在一个包含以下 imageview 元素的相对布局中:

1. 填充从顶部到 imageview 2 的空间的透明矩形

2. 包含指针的 ImageView 。这只是一个带有完全透明指针矩形的正方形图像。它具有固定的宽度和高度，并使用顶部和左侧边距定位在固定/不同的位置。

3. 填充从 2 到底部的空间的透明矩形

我尝试使用相对布局创建它，但我无法让它工作。似乎一次只能使用 1 个高度可变的元素。我也尝试过使用垂直布局，但根本行不通。

实现我的设计目标的最佳方法是什么？

Answer 1

您可以执行以下操作。使用下面的示例，您必须在代码中管理指针 ImageView 的选定可见性和选定文本颜色。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#669999"
    android:gravity="center"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight=".1"
        android:gravity="bottom|right"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_vertical|right"
                android:text="Favourites"
                android:textColor="#33CCFF"
                android:textSize="42sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/item_text"
                android:background="@drawable/pointer"
                android:visibility="invisible" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_vertical|right"
                android:text="Coffee"
                android:textColor="#FFFF00"
                android:textSize="42sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/item_text"
                android:background="@drawable/pointer" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_vertical|right"
                android:text="Milk"
                android:textColor="#33CCFF"
                android:textSize="42sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/item_text"
                android:background="@drawable/pointer"
                android:visibility="invisible" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_vertical|right"
                android:text="Instant"
                android:textColor="#33CCFF"
                android:textSize="42sp" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/item_text"
                android:background="@drawable/pointer"
                android:visibility="invisible" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight=".9"
        android:background="#33CCFF" >
    </LinearLayout>

</LinearLayout>

它将如下所示:

此布局中只使用了一张图片。这就是我为这个例子制作的 pointer.png。