【问题标题】:How to have a scrollable floating Cardview like this?如何拥有这样的可滚动浮动 Cardview?
【发布时间】:2016-12-29 23:59:44
【问题描述】:

有谁知道如何拥有这样的浮动卡片视图? http://chairnerd.seatgeek.com/images/autocomplete_checkout.gif

背景图像应该能够以编程方式更改,并且卡片视图应该是可滚动的。第一个 Cardview 的位置应该在图像下方的某个位置。提前致谢!

【问题讨论】:

  • 只需将您的卡片视图放入火焰布局中即可。如果您输入一些代码,我可以为您提供更多帮助
  • 您是否尝试过在具有一定高度的嵌套滚动视图中使用 CardView
  • 谢谢。您是否碰巧知道如何使它像示例中的那样可扩展?

标签: android android-cardview floating


【解决方案1】:

我自己想通了,我会在这里发布我的解决方案,以防有人遇到同样的情况。

布局文件应如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:background="@color/bgGrey">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="125dp"
    app:srcCompat="@drawable/soccer"
    android:id="@+id/imageView"
    android:scaleType="centerCrop"/>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="120dp">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="6dp">

编辑: 在 LinearLayout 中,应该添加类似占位符的东西。否则最后的部分内容将不会显示。所以我使用了一个 textview 来这样做。

<TextView
            android:layout_width="match_parent"
            android:layout_height="120dp" />

注意:这里的高度要和LinearLayout中的marginTop一致

【讨论】:

    【解决方案2】:

    是的,它是直接在ScrollViewListView 上的cardView,只是带有背景透明的项目布局。

    滚动视图/列表视图放置在FrameLayoutRelativeLayout 上。要么顶部有填充/边距,要么有一个透明的“存根”第一个元素。

    波纹管(在父布局中首先声明)滚动视图/列表视图,您可以放置​​图像或任何其他静态组件。

    您可以在上面放置其他浮动组件(例如示例中的“签出”按钮)

    【讨论】:

    • 谢谢。您是否碰巧知道如何使它像示例中的那样可扩展?
    • @YanruBi 在用户按下折叠按钮后简单地从 Visibility GONE 更改为 VISIBLE。
    猜你喜欢
    • 2014-12-23
    • 1970-01-01
    • 2016-11-19
    • 2016-12-30
    • 1970-01-01
    • 1970-01-01
    • 2021-01-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多