1

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

在此处输入图像描述

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

在此处输入图像描述

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

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

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

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

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

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

4

2 回答 2

2

您可以执行以下操作。使用下面的示例，您必须在代码中管理指针 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。

指针.png

于 2012-08-03T21:33:23.980 回答
0

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

然后使用一个框架布局，里面有两个Layouts；一个用于亮蓝色背景，一个用于指针。例如：

<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>
于 2012-08-03T20:12:53.913 回答