[英]Floating Action Button and CardView
如何從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>
與其將其錨定到behavior_card_view上,不如將其錨定到behavior_card_view內的某個東西。 理想情況下,定位到USD文本視圖的底部。 這樣可以防止FAB滑落。
實際上,我會創建一個不可見的布局,可以用來錨定它,但否則不會影響UI。
我無法復制您遇到的問題,但是您可以根據需要進行以下操作:
<RelativeLayout
android:id="@+id/rl1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingRight="10dp">
<TextView
android:id="@+id/tv1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:paddingLeft="12dp"
android:text="Setting"
android:focusable="true"
android:focusableInTouchMode="true" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="@drawable/ic_add"
app:fabSize="mini"
app:pressedTranslationZ="6dp"
app:layout_anchorGravity="end|right|center"
app:layout_anchor="@id/tv1" />
... a lot of elements here ...
</RelativeLayout>
此RelativeLayout是ScrollView元素內的唯一元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.