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>

次のようになります。

画面のモックアップ

このレイアウトで使用される画像は1つだけです。これが、この例で作成したpointer.pngです。

pointer.png

于 2012-08-03T21:33:23.980 に答える
0

画像の 9patch png バージョンを作成します。これは、特定の領域のみを伸ばすことができるイメージです。Android SDK にツールがあります。(矢印の左側の領域だけを伸ばす必要があります)。

次に、内部に 2 つのレイアウトがあるフレーム レイアウトを使用します。1 つは明るい青色の背景用で、もう 1 つはポインター用です。例えば：

<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>

編集：

ポインター メニューを画面の特定の部分だけに表示したい場合は、水平方向の線形レイアウトを使用して画面を 2 つに分割できます。

 <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 に答える