堆栈内存溢出
  繁体   English   中英

使用ImageView和底部的自定义布局构建CollapsingToolbar

[英]build CollapsingToolbar with an ImageView along with a custom layout at the bottom

 原文  2019-07-01 23:46:46  4   1    java/ android/ xml/ android-collapsingtoolbarlayout/ android-motionlayout

问题描述

这是我想要实现的，在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" />

1 个解决方案

解决方案1
 0  2019-08-06 14:07:09

代替CollapsingToolbarLayout，可以使用功能强大的MotionLayout ，它是ConstraintLayout的子类，用于构建动画。 如果您乐于用平面等效的MotionLayout替换现有视图层次结构，请阅读下面给出的详细答案。

在这里，我将通过三个简单的步骤向您展示如何根据您的要求创建折叠的标题布局动画。

在编写任何代码之前，请参见下面给出的gif图片，以更好地了解我们正在尝试创建的内容。

显示示例动画的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.

相关问题 如何将ImageView修复到布局的底部？ 如何使imageView在折叠工具栏达到一定高度时熄灭 如何在底部设置imageview 在RecyclerView的底部有一个ImageView android，ImageView屏幕底部 ImageView 约束布局底部 ImageView未显示在布局中 Android ImageView布局问题 将ImageView移动到布局的右侧 Imageview Android的布局问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM