[英]build CollapsingToolbar with an ImageView along with a custom layout at the bottom
這是我想要實現的,在CollapsingToolbar中的圖像下方將有一個自定義布局,該布局將包含幾個視圖項。 1個
所需的行為是,滾動時,底部布局將逐漸消失並消失,並且頂部圖像的尺寸將縮小並固定為工具欄。
我已經僅使用圖像構建了CollapsingToolbar,並且效果很好。 盡管我一直堅持要在底部添加自定義布局,
我是否需要跳過CollapsingToolbar並使用其他諸如MotionLayout的工具?
<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"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sdv_add_iamge_header"
android:layout_width="match_parent"
android:layout_height="160dp"
app:overlayImage="@color/trans_black"
android:tint="#11000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
app:actualImageScaleType="centerCrop"/>
<FrameLayout
android:id="@+id/main.framelayout.title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="230dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.2"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</RelativeLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:id="@+id/btn_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/back"
style="@style/Widget.AppCompat.ActionButton"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.jude.easyrecyclerview.EasyRecyclerView
android:id="@+id/list"
android:name="com.socialinfotech.feeedj.TimeLineActivities.ViewCompanyDetailsActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="LinearLayoutManager"
android:scrollbars="none"
app:behavior_overlapTop="30dp"
app:layout_progress="@layout/view_progrss"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.socialinfotech.feeedj.TimeLineActivities.ViewCompanyDetailsActivity"
tools:listitem="@layout/fragment_item" />
代替CollapsingToolbarLayout,可以使用功能強大的MotionLayout ,它是ConstraintLayout的子類,用於構建動畫。 如果您樂於用平面等效的MotionLayout替換現有視圖層次結構,請閱讀下面給出的詳細答案。
在這里,我將通過三個簡單的步驟向您展示如何根據您的要求創建折疊的標題布局動畫。
在編寫任何代碼之前,請參見下面給出的gif圖片,以更好地了解我們正在嘗試創建的內容。
1.添加ConstraintLayout依賴項:
要在項目中使用MotionLayout,請將ConstraintLayout 2.0依賴項添加到應用程序的build.gradle文件中。 如果您使用的是AndroidX,請添加以下依賴項:
dependencies {
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'
}
2.創建MotionLayout文件:
MotionLayout是ConstraintLayout的子類,因此您可以將任何現有的ConstraintLayout轉換為MotionLayout。 因此,如下所示創建一個布局文件。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
motion:layoutDescription="@xml/motionscene"
tools:showPaths="true">
<androidx.core.widget.NestedScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@id/toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text" />
</androidx.core.widget.NestedScrollView>
<ImageView
android:id="@+id/headerBg"
android:layout_width="match_parent"
android:layout_height="@dimen/headerHeight"
android:scaleType="centerCrop"
android:src="@drawable/materialwallpaper"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="@+id/customHeader"
android:layout_width="match_parent"
android:layout_height="@dimen/headerHeight"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#66FF2345"
android:text="custom header item"
android:textColor="#ffffff" />
</FrameLayout>
<View
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/headerHeight"
android:alpha="0"
android:background="#345634"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/home"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:padding="16dp"
android:src="@drawable/abc_ic_ab_back_material"
android:tint="?android:attr/textColorPrimaryInverse"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/titleTextView"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
android:gravity="center_vertical"
android:text="Page Title"
android:textColor="#FFFFFF"
android:textStyle="bold"
motion:layout_constraintBottom_toBottomOf="@id/customHeader"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
3.創建一個MotionScene:
在上一步中,app:layoutDescription屬性引用了MotionScene。 MotionScene是XML資源文件,其中包含相應布局的所有運動描述。 為了使布局信息與運動描述分開,每個MotionLayout都引用一個單獨的MotionScene。 請注意,MotionScene中的定義優先於MotionLayout中的任何類似定義。
以下是一個示例MotionScene文件,該文件創建了具有'enterAlways'效果的所需固定/固定工具欄:
將文件放在res目錄下的xml文件夾中。
motionscene.xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@id/collapsed"
motion:constraintSetStart="@id/expanded">
<OnSwipe
motion:dragDirection="dragUp"
motion:moveWhenScrollAtTop="true"
motion:touchAnchorId="@id/scrollView"
motion:touchAnchorSide="top" />
</Transition>
<ConstraintSet android:id="@+id/expanded">
<Constraint
android:id="@id/headerBg"
android:layout_height="@dimen/headerHeight"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
<Constraint
android:id="@id/customHeader"
android:layout_width="match_parent"
android:layout_height="@dimen/headerHeight"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<PropertySet android:alpha="1" />
</Constraint>
<Constraint
android:id="@id/toolbar"
android:layout_height="@dimen/headerHeight"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<PropertySet android:alpha="0" />
</Constraint>
<Constraint
android:id="@+id/titleTextView"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_marginStart="16dp"
android:gravity="center_vertical|left"
motion:layout_constraintBottom_toBottomOf="@id/customHeader"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent">
<CustomAttribute
motion:attributeName="textSize"
motion:customDimension="16sp" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/collapsed">
<Constraint
android:id="@id/headerBg"
android:layout_height="?attr/actionBarSize"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
<Constraint
android:id="@id/customHeader"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<PropertySet android:alpha="0" />
</Constraint>
<Constraint
android:id="@id/toolbar"
android:layout_height="?attr/actionBarSize"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<PropertySet android:alpha="1" />
</Constraint>
<Constraint
android:id="@id/titleTextView"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:layout_marginStart="16dp"
android:gravity="center_vertical|left"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@id/home"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="textSize"
motion:customDimension="10sp" />
</Constraint>
</ConstraintSet>
</MotionScene>
就這樣。 您創建了一個驚人的自定義動畫,而無需編寫任何Java / kotlin代碼。 MotionLayout是完全聲明性的,這意味着無論多么復雜,您都可以描述XML中的任何轉換。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.