浮动动作按钮和CardView

Question

如何在CardView的支持库中添加浮动操作按钮，以便在滚动ScrollView时，按钮随卡一起上升？

我的应用

滚动前

滚动后

按钮应与卡一起

我想解决这个问题

布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >


    <ScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white_vk_background_color">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_8"
            android:orientation="vertical"
            android:padding="@dimen/spacing_16">

            <android.support.v7.widget.CardView

                android:id="@+id/behavior_card_view"
                style="@style/RateCardView"

                app:cardBackgroundColor="@color/white"
                app:cardCornerRadius="@dimen/spacing_2"
                app:cardElevation="@dimen/spacing_8">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="@dimen/spacing_16"
                    android:orientation="vertical"
                    >

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:paddingBottom="@dimen/spacing_8">

                        <TextView
                            android:id="@+id/description_rate_usd_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:text="@string/description_currency_text_view_usd"/>

                        <TextView
                            android:id="@+id/rate_usd_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:layout_centerHorizontal="true"
                            android:layout_toRightOf="@id/description_rate_usd_text_view"
                            tools:text="63.99"
                            />


                        <TextView
                            android:id="@+id/rate_difference_usd_text_view"
                            style="@style/AppTextView.DifferenceTextView"

                            android:layout_toRightOf="@id/rate_usd_text_view"
                            tools:text="+0.44"/>

                    </RelativeLayout>


                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:paddingBottom="@dimen/spacing_8">

                        <TextView
                            android:id="@+id/description_rate_eur_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:text="@string/description_currency_text_view_eur"/>

                        <TextView
                            android:id="@+id/rate_eur_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:layout_centerHorizontal="true"
                            android:layout_toRightOf="@id/description_rate_eur_text_view"
                            tools:text="71.99"
                            />

                        <TextView
                            android:id="@+id/rate_difference_eur_text_view"
                            style="@style/AppTextView.DifferenceTextView"
                            android:layout_toRightOf="@id/rate_eur_text_view"
                            tools:text="+0.15"/>

                    </RelativeLayout>

                    <TextView

                        android:id="@+id/rate_update_time_text_view"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|start"
                        android:layout_marginBottom="@dimen/spacing_8"
                        android:layout_marginLeft="@dimen/spacing_16"
                        android:layout_marginTop="@dimen/spacing_16"
                        android:gravity="center"
                        android:textSize="@dimen/density_font_size_text_date"


                        tools:text="Date: 15.07.2016"

                        />

                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/converter_card_view"
                style="@style/RateCardView"
                app:cardBackgroundColor="@color/white"
                app:cardCornerRadius="@dimen/spacing_2"
                app:cardElevation="@dimen/spacing_8">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="@dimen/spacing_16">

                    <com.rengwuxian.materialedittext.MaterialEditText

                        android:id="@+id/converter_ruble_edit_text"
                        style="@style/RateEditText"
                        android:hint="@string/description_currency_ruble"

                        app:met_baseColor="@android:color/black"
                        app:met_bottomTextSize="@dimen/density_font_size_text_converter"
                        app:met_errorColor="@color/red_light"
                        app:met_floatingLabel="normal"
                        app:met_floatingLabelAlwaysShown="true"
                        app:met_floatingLabelTextSize="@dimen/density_font_size_text_converter"
                        app:met_helperText=""
                        app:met_primaryColor="@color/red_light"
                        app:met_textColorHint="@android:color/transparent"/>

                    <com.rengwuxian.materialedittext.MaterialEditText

                        android:id="@+id/converter_dollar_edit_text"
                        style="@style/RateEditText"
                        android:hint="@string/description_currency_dollar"

                        app:met_baseColor="@android:color/black"
                        app:met_bottomTextSize="@dimen/density_font_size_text_converter"
                        app:met_errorColor="@color/red_light"
                        app:met_floatingLabel="normal"
                        app:met_floatingLabelAlwaysShown="true"
                        app:met_floatingLabelTextSize="@dimen/density_font_size_text_converter"
                        app:met_helperText=""
                        app:met_primaryColor="@color/red_light"
                        app:met_textColorHint="@android:color/transparent"/>


                    <com.rengwuxian.materialedittext.MaterialEditText

                        android:id="@+id/converter_euro_edit_text"
                        style="@style/RateEditText"
                        android:hint="@string/description_currency_euro"

                        app:met_baseColor="@android:color/black"
                        app:met_bottomTextSize="@dimen/density_font_size_text_converter"
                        app:met_errorColor="@color/red_light"
                        app:met_floatingLabel="normal"
                        app:met_floatingLabelAlwaysShown="true"
                        app:met_floatingLabelTextSize="@dimen/density_font_size_text_converter"
                        app:met_helperText=""

                        app:met_primaryColor="@color/red_light"

                        app:met_textColorHint="@android:color/transparent"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </ScrollView>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/update_floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/density_spacing_size_floating_action_button"
        android:layout_marginRight="@dimen/float_action_button_spacing_8"
        android:src="@drawable/ic_cached_white_24dp"
        app:fabSize="mini"
        app:layout_anchor="@id/behavior_card_view"
        app:pressedTranslationZ="6dp"
        app:layout_anchorGravity="end|right|center"
        />


</android.support.design.widget.CoordinatorLayout>

Answer 1

尝试将其锚定到behavior_card_view内的某些内容，而不是锚定到behavior_card_view。理想情况下，锚定到USD textview的底部。这样可以防止FAB滑落。

我实际上会创建一个不可见的布局，我可以用来锚定，但不会影响UI。

我无法复制您所遇到的问题，但以下工作正如您所愿：

    function slideShow() {
    setInterval( function show(){
        var next = 0;
        if (next == 0) {
            animate();
            next++:
        }
        else {
            reverse();
            next--;
        }
    },1000);

}
function animate(){
        document.getElementById('samDesc').style.marginTop = "-2%";
        document.getElementById('samDesc1').style.marginTop = "25%";
        document.getElementById('samDesc1').style.opacity = "1";
        document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
        document.getElementById('samDesc').style.marginTop = "17%";
        document.getElementById('samvDesc1').style.marginTop = "-55%";
        document.getElementById('samDesc1').style.opacity = "0";
        document.getElementById('samDesc').style.opacity = "1";
}

这个RelativeLayout是我的ScrollView元素中唯一的元素。