如何在GoWeather天氣應用上創建滑塊？

Question

轉到天氣應用程序（Go Weather On Google Play）具有靠近底部一個可愛的小滑塊正上方的「MON」，「TUE」，「世界環境日」下方的形象。

您可以拖動滑塊以顯示除了顯示3天每天更長的預測。您也可以向下拖動滑塊關閉滑塊並隱藏日常圖形溫度+圖標。

我假設這是不是一個正常的滑塊，因爲它似乎支持3個位置

屏幕（具有預測可見）屏幕的
1. 20％的
2. 90％（如下）
3. 0％的屏幕（除滑動條外不可見）

有誰知道如何製作這種類型的用戶界面？

真的很感激一個代碼示例或鏈接的網站。

Answer 1

這僅僅是佈局和小部件的佈置， 這裏是我創建的示例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> 

只需粘貼在你的程序，你會看到工作數據。現在無需編寫代碼，您可以根據需要處理相關事件。在這裏，我使用了來自網站的圖像，因此請下載一些圖像或使用您現有的圖像，並替換此代碼中使用的繪圖。 希望你會得到這個。