android - 如何创建像 GoWeather 天气应用程序一样的滑块？

Question

Go天气应用程序（Go Weather On Google Play）在下图中的“MON”、“TUE”、“WED”上方的底部附近有一个漂亮的小滑块。

除了显示的 3 天之外，您还可以向上拖动滑块以显示更长的每日预报。您还可以向下拖动滑块以关闭滑块并隐藏每日图形温度 + 图标。

我认为这不是一个普通的滑块，因为它似乎支持 3 个位置

1. 90% 的屏幕（预测时可见）
2. 屏幕的 20%（如下）
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>

只需将其粘贴到您的程序中，您就会看到工作数据。暂时无需编写代码，您可以根据自己的需要处理相关事件。这里我使用了来自站点的图像，因此请下载一些图像或使用您现有的图像并替换此代码中使用的可绘制对象。希望你能得到这个。