0

ページをデザインしようとしていますが、3つの問題に直面しています。

最初の問題は、次の図のように設計することです ここに画像の説明を入力してください

ここで、上部のハンバーガー画像（URLから）は、テキストがランダムに変化する丸みを帯びた画像とともに、等マージンのスペースである必要があります。以下に、背景が灰色で、真ん中に赤いアイコンが付いた[OK]ボタンと[キャンセル]ボタンがあります。赤いアイコンのごく一部を上の画像の上に配置し、その下に2つの編集テキストとテキストビューを配置する必要があります

2番目の問題は、アプリケーションバーをクリックしたときにボタンがあり、ハンバーガーの画像ビューをクリアして、そこに地図を表示する必要があることです。このような場合、赤いアイコンは、マップ上の小さな部分でその位置に留まっている必要があります。

imageViewの高さと幅はわかりませんが、画像の位置で地図を正確に置き換える必要があります

3番目の問題は、スクロールビューなしでこのページをデザインしたいということです。フレームレイアウトを使用する場合、スクロールビュー内では受け入れられないため、ビューは画面内にある必要があります。

これまで私は以下を試しました

<LinearLayout
             android:id="@+id/rrds_layout"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_margin="5dp"
             android:background="@color/burgerimg" >
                <RelativeLayout
                    android:id="@+id/rrds_round_points"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rounded_bg" >
                    <TextView
                        android:id="@+id/textView1"
                        android:layout_centerInParent="true"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Free"
                        android:textColor="#000000"
                        android:textAppearance="?android:attr/textAppearanceMedium" />
                </RelativeLayout>
        </LinearLayout>

画像の上に赤いアイコンとボタンを少し追加する方法がわかりません

このページのデザイン方法.....

Vikram Bodicherlaが説明したように、私は次のように設計しました

<FrameLayout>
     <ViewSwitcher>
          <TextView></TextView>
          <MapView></MapView>
     </ViewSwitcher>

       <RelativeLayout
             android:id="@+id/rrds_merge_layout2"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom">

              <ImageView
                    android:contentDescription="@string/app_name"
                    android:id="@+id/merge_bg_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/title_bg" 
                    android:layout_centerInParent="true"/>

              <TextView
                    android:id="@+id/merge_view_pro_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="OK"
                    android:layout_centerInParent="true"
                    android:clickable="true"
                    android:textAppearance="?android:attr/textAppearanceMedium" 
                    android:layout_toLeftOf="@+id/merge_center_img"
                    android:layout_centerVertical="true"/>

              <ImageView
                    android:contentDescription="@string/app_name"
                    android:id="@+id/merge_center_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="@drawable/red_icon" />

               <TextView
                    android:id="@+id/merge_view_cash_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:clickable="true"
                    android:text="@string/mrg_cash"
                    android:textAppearance="?android:attr/textAppearanceMedium" 
                    android:layout_toRightOf="@+id/merge_center_img"
                    android:layout_centerVertical="true"/>
         </RelativeLayout>
</FrameLayout>

しかし、それでも同じ問題が存在します......

4

1 に答える 1

1

上部と下部を別々に設計します。

上部には、MapViewとImageViewを交換するFrameLayout/ViewSwitcherがあります。丸みを帯びた画像は、真ん中に白い丸みを帯びた画像を作成し、それ以外はすべて透明にします。これをTextViewの背景として設定し、テキストを書き込みます。

2番目の部分の設計はかなり単純になります。

特定の問題のコードが必要な場合はお知らせください。

于 2012-05-30T07:54:46.117 に答える