Question

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

enter image description here

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

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

屏幕的90％（预测可见）
屏幕的20％（如下所示）
屏幕的0％（除滑条外不可见）

有谁知道如何制作这种类型的用户界面？

非常感谢代码示例或指向网站的链接。

Answer 1

这只是布局和小部件的排列，这是我创建的示例xml，您可以将diff小部件和布局设置为这样设计，

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

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

如何在GoWeather天气应用程序上创建一个滑块？

1 个答案: