gpt4 book ai didi

android - 如何像 GoWeather 天气应用程序一样创建 slider ?

转载 作者:行者123 更新时间:2023-11-29 00:35:25 25 4
gpt4 key购买 nike

Go 天气应用程序 (Go Weather On Google Play) 在底部附近有一个漂亮的小 slider ,就在下图中的“MON”、“TUE”、“WED”上方。

enter image description here

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

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

  1. 90% 的屏幕(显示预报)
  2. 20% 的屏幕(如下所示)
  3. 0% 的屏幕(除了 slider 之外不可见)

有人知道如何制作这种类型的 UI 吗?

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

最佳答案

这只是布局和小部件的排列,这是我创建的示例 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>

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

关于android - 如何像 GoWeather 天气应用程序一样创建 slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12967680/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com