2

go weather アプリ ( Go Weather On Google Play ) には、下の画像の "MON"、"TUE"、"WED" のすぐ上に小さなスライダーがあります。

ここに画像の説明を入力

スライダーを上にドラッグして、表示されている 3 日間に加えて、より長い日次予測を表示できます。スライダーを下にドラッグしてスライダーを閉じ、毎日のグラフィカルな気温とアイコンを非表示にすることもできます.

3つの位置をサポートしているように見えるので、これは通常のスライダーではないと思います

  1. 画面の 90% (予測で表示)
  2. 画面の 20% (以下のように)
  3. 画面の 0% (スライダー バー以外は表示されません)

このタイプのUIを作成する方法を知っている人はいますか?

コードサンプルまたはサイトへのリンクを本当に感謝します。

4

1 に答える 1

2

これは単なるレイアウトとウィジェットの配置です。これが私が作成したサンプル xml です。差分ウィジェットとレイアウトを配置して、このように設計できます。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:padding="@dimen/padding_medium"
    android:text="@string/hello_world"
    tools:context=".MainActivity" />


<SlidingDrawer android:id="@+id/SlidingDrawer" android:handle="@+id/slideHandleButton"
        android:content="@+id/contentLayout" android:layout_width="wrap_content"
        android:layout_height="120dp" android:orientation="vertical"

        android:layout_alignParentBottom="true"
        >

         <Button 
             android:layout_width="fill_parent"
             android:layout_height="10dp" 
             android:id="@+id/slideHandleButton"
             android:background="#00868B" />


         <LinearLayout
             android:id="@+id/contentLayout"
             android:layout_width="fill_parent"
             android:layout_height="150dp"
             android:background="#90000000"
             android:gravity="center|top"
              >

             <FrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="150dp"
                    android:layout_weight="1"
                 >

                 <LinearLayout 
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:gravity="center"
                        android:layout_gravity="center_vertical"
                     >
                 <ImageView

                        android:layout_width="wrap_content"
                        android:layout_height="fill_parent"
                        android:src="@drawable/diego"

                     />
                 <Button

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Diego"

                     />
                 </LinearLayout>
             </FrameLayout>
             <FrameLayout
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_weight="1" 
                 >
                <LinearLayout 
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:gravity="center"
                        android:layout_gravity="center_vertical"
                     >
                 <ImageView

                        android:layout_width="wrap_content"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ellie"

                     />
                 <Button

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Ellie"

                     />
                 </LinearLayout>
             </FrameLayout>
            <FrameLayout
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_weight="1" 
                 >
                 <LinearLayout 
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:gravity="center"
                        android:layout_gravity="center_vertical"
                     >
                 <ImageView

                        android:layout_width="wrap_content"
                        android:layout_height="fill_parent"
                        android:src="@drawable/scart"

                     />
                 <Button

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/sid"

                     />
                 </LinearLayout>
             </FrameLayout>


        </LinearLayout>

</SlidingDrawer>

これをプログラムに貼り付けるだけで、作業データが表示されます。今のところコードを書く必要はありません。必要に応じて関連するイベントを処理できます。ここではサイトから画像を使用したので、画像をダウンロードするか、既存の画像を使用して、このコードで使用されているドローアブルを置き換えます。あなたがこれを手に入れることを願っています。

于 2012-10-19T06:14:36.943 に答える