Android布局：固定位置上的1个图像视图和2个图像视图填充剩余空间

Question

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

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

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

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

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

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

我尝试用相对布局创建它，但我无法让它工作。似乎一次只能使用一个具有可变高度的元素。 我也尝试使用垂直布局，但根本没有这样做。

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

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>

它将如下所示：

此布局中只使用了一个图像。这就是我为这个例子掀起的指针。

Answer 2

创建图片的9patch png版本。这是只有某些区域可以伸展的图像。 android SDK have a look中有一个工具。 （你需要使箭头左侧的区域成为伸展的唯一部分。）

然后使用内部有两个布局的框架布局;一个用于亮蓝色背景，一个用于指针。例如：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width/height/ect...>

    <LinearLayout android:id="BlueBackground"
                  android:background="brightblue"
                  android:layout_width/height/ect.../>

    <LinearLayout android:id="Pointer"
                  android:background="pointer9patch"
                  android:layout_width/height/ect...>
    //The List
    </LinearLayout>

 </FrameLayout>

修改

如果您希望指针菜单仅占用屏幕的某个部分，您可以使用水平线性布局将屏幕分成两部分：

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width/height/ect...>

    <ImageView android:id="BlueBackground"
               android:layout_width/height/ect...>
    <LinearLayout android:id="HSplitLayout"
                  orientation="horizontal">

        <LinearLayout android:id="Pointer"
                   android:layout_width/height/ect...>
        //The List
        </LinearLayout>

        <ContentOnRight...>

    </LinearLayout>


 </FrameLayout>