[英]Collapse/hide a specific layout when recyclerview scrolls
What i currently have is this:我目前拥有的是:
Would it possible to hide the Linearlayout1 when the recyclerview starts scrolling and the linearlayout2 will move to top which will act as header:当 recyclerview 开始滚动并且 linearlayout2 将移动到顶部作为标题时,是否可以隐藏 Linearlayout1:
Just like this:像这样:
I have already see coordinatelayout but it i have an exisiting toolbar that shouldn't be replace.我已经看到了坐标布局,但它有一个不应替换的现有工具栏。
EDIT-----编辑 - - -
for nightmaregiba i can't properly do it , i keep trying to rearrange the code, i can't find the right positioning.对于 nightmaregiba,我无法正确执行,我一直在尝试重新排列代码,但找不到正确的位置。 here is my code
这是我的代码
<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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/translucent_clear_bg"
tools:context=".fragment.AccountFragment">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="50dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
></android.support.v7.widget.Toolbar>
<!-- TODO: Update blank fragment layout -->
<LinearLayout
android:id="@+id/mAccount_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/background_white"
android:paddingTop="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:orientation="vertical"
android:gravity="top">
<com.weiwangcn.betterspinner.library.material.MaterialBetterSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/account_number"
android:layout_margin="10dp"
android:hint="@string/label_account_number"
android:textColor="@color/text_color_teal"
android:textColorHint="@color/base_text"
android:textColorHighlight="@color/colorAccent"
app:met_floatingLabel="highlight"
app:met_errorColor="@color/vt_color1"
app:met_primaryColor="@color/aub_gold_new"
app:met_textColor="@color/text_color_teal"
android:textSize="@dimen/font_size_header"
android:gravity="left"
android:dropDownWidth="wrap_content"
/>
<TextView
android:layout_below="@id/account_number"
android:textStyle="bold"
android:paddingLeft="5dp"
android:textSize="@dimen/font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="@string/label_available_balance"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/available_balance"
android:layout_marginRight="5dp"
android:textSize="@dimen/font_size"
android:gravity="right"
android:layout_gravity="right"
android:visibility="gone"
android:text="@string/lorem_ipsum_short"
/>
<TextView
android:layout_below="@id/available_balance"
android:textStyle="bold"
android:paddingLeft="5dp"
android:textSize="@dimen/font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="@string/label_ledger_balance"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ledger_balance"
android:layout_marginRight="5dp"
android:textSize="@dimen/font_size"
android:gravity="right"
android:layout_gravity="right"
android:visibility="gone"
android:text="@string/lorem_ipsum_short"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/mDateLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="@color/background_white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:weightSum="4">
<android.support.design.widget.TextInputLayout
android:id="@+id/input_layout_date_from"
android:layout_width="0dp"
android:layout_height="match_parent"
android:hint="@string/hint_date_from"
card_view:errorEnabled="true"
android:textSize="12sp"
android:layout_weight="1.65"
app:theme="@style/TextInputLayoutGold">
<android.support.design.widget.TextInputEditText
android:id="@+id/input_date_from"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:maxLength="20"
android:inputType="datetime"
android:text="asdasda"
android:textSize="@dimen/font_size"
app:theme="@style/EditTextGold"
/>
</android.support.design.widget.TextInputLayout>
<!--<TextView-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="match_parent"-->
<!--android:layout_gravity="center"-->
<!--android:gravity="center"-->
<!--android:textSize="30sp"-->
<!--android:text="-"-->
<!--android:layout_weight="0.2"-->
<!--/>-->
<android.support.design.widget.TextInputLayout
android:id="@+id/input_layout_date_to"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:hint="@string/hint_date_to"
card_view:errorEnabled="true"
android:textSize="12sp"
android:layout_weight="1.65"
app:theme="@style/TextInputLayoutGold">
<android.support.design.widget.TextInputEditText
android:id="@+id/input_date_to"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:maxLength="20"
android:text="asdasda"
android:inputType="datetime"
android:textSize="@dimen/font_size"
app:theme="@style/EditTextGold"
/>
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btn_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="16dp"
android:layout_weight="0.9"
android:background="@drawable/btn_transparent_redborder"
android:minHeight="0dp"
android:minWidth="0dp"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
android:text="APPLY"
android:textColor="@color/aub_red"
android:textSize="12sp"
/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/column_header"
android:weightSum="3"
android:padding="10dp"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="left|center_vertical"
android:gravity="left|center_vertical"
android:weightSum="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_date"
android:layout_weight="1"
android:text="Date"
android:textSize="12sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Txn Code"
android:textSize="12sp"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_amount"
android:layout_weight="1"
android:layout_gravity="center|center_vertical"
android:gravity="center|center_vertical"
android:text="Amount"
android:textSize="12sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv_balance"
android:layout_gravity="right|center_vertical"
android:gravity="right|center_vertical"
android:layout_weight="1"
android:text="Ledger\nBalance"
android:textSize="12sp"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_below="@id/column_header"
android:layout_height="2dp"
android:background="@android:color/darker_gray"
android:layout_marginTop="2dp"
android:visibility="gone"/>
<RelativeLayout
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:background="@color/translucent_clear_bg"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_below="@id/column_header">
<android.support.v7.widget.RecyclerView
android:id="@+id/account_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:gravity="center_horizontal"
android:scrollbars="vertical"/>
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
the mAccount_header and mDateLayout is supposed to be hidden. mAccount_header 和 mDateLayout 应该是隐藏的。
With the newest version of Android Studio ( 4.0 Canary 9 ), you can use the new MotionLayout layout type to do exactly what you want.使用最新版本的 Android Studio ( 4.0 Canary 9 ),您可以使用新的MotionLayout 布局类型来执行您想要的操作。
In short, you would do the following:简而言之,您将执行以下操作:
In your build.gradle (Module: app) file, add the following line:在您的 build.gradle (Module: app) 文件中,添加以下行:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'实现 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'
Create a new ConstraintLayout layout file that determines how all of your views should be arranged at the beginning创建一个新的 ConstraintLayout 布局文件,用于确定所有视图在开始时的排列方式
In the MotionLayout editor, add constraints to each view in the "start" and "end" layouts在 MotionLayout 编辑器中,为“开始”和“结束”布局中的每个视图添加约束
In the new MotionScene XML file that was added to the XML folder in your res folder, edit the tag to look like this:在添加到 res 文件夹中的 XML 文件夹的新 MotionScene XML 文件中,将标记编辑为如下所示:
<Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" > <OnSwipe app:touchAnchorSide="top" app:dragDirection="dragUp" app:moveWhenScrollAtTop="true" motion:touchAnchorId="@id/YOUR_RECYCLERVIEW" motion:dragDirection="dragUp" /> <KeyFrameSet> </KeyFrameSet> </Transition>
* In the MotionLayout Codelab , it says to use app:touchAnchorID instead of motion:touchAnchorId but that didn't work for me * * 在MotionLayout Codelab 中,它说使用app:touchAnchorID而不是motion:touchAnchorId但这对我不起作用 *
Now, when you scroll to the top of your RecyclerView, the transition will begin.现在,当您滚动到 RecyclerView 的顶部时,过渡将开始。 To hide your LinearLayout 1, you would need to add this to its "end" Constraint in the Motion file:
要隐藏您的 LinearLayout 1,您需要将其添加到 Motion 文件中的“结束”约束中:
android:alpha="0.0"
You can handle scrolls with CoordinatorLayout您可以使用 CoordinatorLayout 处理滚动
You can check this structure:您可以检查此结构:
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.design.widget.CollapsingToolbarLayout >
<!- Your LinearLayout1->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Scrollable content -->
<!-- LinearLayout2 -->
<!-- RecyclerView -->
</android.support.design.widget.CoordinatorLayout>
You can check this example: https://android.jlelse.eu/creating-the-flexible-space-with-image-pattern-on-android-b5f8908b9921 to achieve the exact animation.您可以查看此示例: https : //android.jlelse.eu/creating-the-flexible-space-with-image-pattern-on-android-b5f8908b9921以实现精确的动画。 Hope it help!
希望有帮助!
I achieved this so easily using MotionLayout to reduce the size of the views and make them disappear.我使用 MotionLayout 轻松地实现了这一点,以减小视图的大小并使它们消失。
This my Motion Scene File Here这是我的运动场景文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.