问题：

在工具栏中折叠带有徽标、标题和副标题的工具栏布局

百里朝

2023-03-14

我想这样做，但与折叠工具栏布局或滚动后在工具栏中显示徽标和标题。

    <!-- Toolbars -->
<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/background_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/background_1"
            app:layout_collapseMode="parallax"
            android:fitsSystemWindows="true"/>

        <RelativeLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/avatar_image"
                android:layout_width="@dimen/circular_image_avatar"
                android:layout_height="@dimen/circular_image_avatar"
                android:gravity="center"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_placerholder"
                android:layout_centerVertical="true"
                android:layout_centerHorizontal="true"
                android:transitionName="image_toolbar"/>

            <TextView
                android:id="@+id/profile_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Name title"
                android:textAlignment="center"
                android:layout_marginTop="@dimen/item_padding_top_bottom"
                android:gravity="center"
                style="@style/titleText_toolbar"
                android:layout_below="@+id/avatar_image"
                android:transitionName="title_toolbar"/>
            <TextView
                android:id="@+id/profile_subtitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Subtitle"
                android:textAlignment="center"
                android:gravity="center"
                style="@style/captionText_toolbar"
                android:layout_below="@+id/profile_title" />

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin">

            <!-- avatar image and title, subtitle -->

        </android.support.v7.widget.Toolbar>

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

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

请帮助我

共有2个答案

夹谷苗宣

2023-03-14

我认为使用MotionLayout可以轻松实现这些类型的动画。我在这里使用MotionLayout实现了示例折叠布局。您可以根据您的用例修改它。只需更改开始和结束约束。

卜鹏

2023-03-14

我已经准备好了两个模拟的化身折叠演示示例，其方法不使用自定义的＜code＞CoordinatorLayoutBehavior＜/code＞！

查看我的示例本机代码：“折叠头像工具栏示例”

阅读我在Medium上的“动画折叠工具栏Android”帖子。

不是使用自定义的CoordinatorLayoutBehavior，而是使用来自AppBarLayout的OnOffsetChangedListener。

private lateinit var appBarLayout: AppBarLayout

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_demo_1)
        ...
        appBarLayout = findViewById(R.id.app_bar_layout)

        /**/
        appBarLayout.addOnOffsetChangedListener(
                AppBarLayout.OnOffsetChangedListener { appBarLayout, i ->
                   ...
                    /**/
                    updateViews(Math.abs(i / appBarLayout.totalScrollRange.toFloat()))
                })
    }

在updateViews方法中，头像在第一个演示中更改大小并更改头像的X、Y位置转换。

private fun updateViews(offset: Float) {

        ...

        /* Collapse avatar img*/
        ivUserAvatar.apply {
            when {
                offset > avatarAnimateStartPointY -> {
                    val avatarCollapseAnimateOffset = (offset - avatarAnimateStartPointY) * avatarCollapseAnimationChangeWeight
                    val avatarSize = EXPAND_AVATAR_SIZE - (EXPAND_AVATAR_SIZE - COLLAPSE_IMAGE_SIZE) * avatarCollapseAnimateOffset
                    this.layoutParams.also {
                        it.height = Math.round(avatarSize)
                        it.width = Math.round(avatarSize)
                    }
                    invisibleTextViewWorkAround.setTextSize(TypedValue.COMPLEX_UNIT_PX, offset)

                    this.translationX = ((appBarLayout.width - horizontalToolbarAvatarMargin - avatarSize) / 2) * avatarCollapseAnimateOffset
                    this.translationY = ((toolbar.height  - verticalToolbarAvatarMargin - avatarSize ) / 2) * avatarCollapseAnimateOffset
                }
                else -> this.layoutParams.also {
                    if (it.height != EXPAND_AVATAR_SIZE.toInt()) {
                        it.height = EXPAND_AVATAR_SIZE.toInt()
                        it.width = EXPAND_AVATAR_SIZE.toInt()
                        this.layoutParams = it
                    }
                    translationX = 0f
                }
            }
        }
    }

要查找avatarAnimateStartPointY和avatarCollapseAnimationChangeWeight（用于将常规偏移转换为avataranimate偏移）：

private var avatarAnimateStartPointY: Float = 0F
 private var avatarCollapseAnimationChangeWeight: Float = 0F
 private var isCalculated = false
 private var verticalToolbarAvatarMargin =0F
...
if (isCalculated.not()) {
    avatarAnimateStartPointY = 
                 Math.abs((appBarLayout.height - (EXPAND_AVATAR_SIZE + horizontalToolbarAvatarMargin)) / appBarLayout.totalScrollRange)

    avatarCollapseAnimationChangeWeight = 1 / (1 - avatarAnimateStartPointY)

    verticalToolbarAvatarMargin = (toolbar.height - COLLAPSE_IMAGE_SIZE) * 2
    isCalculated = true
 }

化身改变了他的尺寸，然后立即向右移动，顶部的工具栏文本变为显示并向左移动。

您需要跟踪状态：TO_EXPANDED_STATE变化、TO_COLLAPSED_STATE变化WAIT_FOR_SWITCH。

 /*Collapsed/expended sizes for views*/
            val result: Pair<Int, Int> = when {
                percentOffset < ABROAD -> {
                    Pair(TO_EXPANDED_STATE, cashCollapseState?.second ?: WAIT_FOR_SWITCH)
                }
                else -> {
                    Pair(TO_COLLAPSED_STATE, cashCollapseState?.second ?: WAIT_FOR_SWITCH)
                }
            }

在状态切换更改时为头像创建动画：

   result.apply {
        var translationY = 0f
        var headContainerHeight = 0f
        val translationX: Float
        var currentImageSize = 0
        when {
            cashCollapseState != null && cashCollapseState != this -> {
                when (first) {
                    TO_EXPANDED_STATE -> {
                        translationY = toolbar.height.toFloat()
                        headContainerHeight = appBarLayout.totalScrollRange.toFloat()
                        currentImageSize = EXPAND_AVATAR_SIZE.toInt()
                        /**/
                        titleToolbarText.visibility = View.VISIBLE
                        titleToolbarTextSingle.visibility = View.INVISIBLE
                        background.setBackgroundColor(ContextCompat.getColor(this@Demo2Activity, R.color.color_transparent))
                        /**/
                        ivAvatar.translationX = 0f
                    }

                    TO_COLLAPSED_STATE -> {
                        background.setBackgroundColor(ContextCompat.getColor(this@Demo2Activity, R.color.colorPrimary))
                        currentImageSize = COLLAPSE_IMAGE_SIZE.toInt()
                        translationY = appBarLayout.totalScrollRange.toFloat() - (toolbar.height - COLLAPSE_IMAGE_SIZE) / 2
                        headContainerHeight = toolbar.height.toFloat()
                        translationX = appBarLayout.width / 2f - COLLAPSE_IMAGE_SIZE / 2 - margin * 2
                        /**/
                        ValueAnimator.ofFloat(ivAvatar.translationX, translationX).apply {
                            addUpdateListener {
                                if (cashCollapseState!!.first == TO_COLLAPSED_STATE) {
                                    ivAvatar.translationX = it.animatedValue as Float
                                }
                            }
                            interpolator = AnticipateOvershootInterpolator()
                            startDelay = 69
                            duration = 350
                            start()
                        }
                       ...
                    }
                }

                ivAvatar.apply {
                    layoutParams.height = currentImageSize
                    layoutParams.width = currentImageSize
                }
                collapsingAvatarContainer.apply {
                    layoutParams.height = headContainerHeight.toInt()
                    this.translationY = translationY
                    requestLayout()
                }
                /**/
                cashCollapseState = Pair(first, SWITCHED)
            }

查看我的示例本机代码：“折叠头像工具栏示例”

类似资料：

更改可折叠工具栏标题的正确方法

问题内容：当我更改collapsesingToolbar的标题时，标题不变。我已经尝试过getSupportActionBar.setTitle和crashToolbar.setTitle，但这没有帮助。告诉我，怎么了？问题答案：我相信这个问题描述了您所遇到的问题。我也遇到了这个问题，并且今天已经解决了。本质上，处理折叠文本的代码仅在当前文本为null或文本大小更改时更新文本。当前，这是一
折叠工具栏 - 状态栏下的工具栏

我最近遇到了协调器布局的问题。当我尝试创建简单的折叠工具栏布局（如本例所示）时，工具栏似乎位于状态栏下，如下图所示（在preLolipop设备上，一切都正常，因为应用程序不会在状态栏下绘制）。我的活动布局的代码片段: My Styles（仅限21版），其中BaseAppTheme父级为Theme.AppCompat.Light.NoActionBar：
Android-将工具栏的标题居中

问题内容：我的应用程序中有一个工具栏，例如：我将标题添加为：我已经读过Android工具栏中心标题和自定义字体但是，如果我更改工具栏的xml，我不知道如何更改TextView的值。有人可以帮助我吗？问题答案：如果您具有自定义的工具栏布局，请不要用于设置标题。相反，假设您的XML布局如下所示：你需要调用，在某处你的可能是：
Android工具栏的标题对齐问题

我第一次使用工具栏。我在应用程序中将其用作操作栏。我想将工具栏的标题与中心对齐。但我意识到，没有内置的方法可以让你做到这一点。所以我在工具栏上添加了一个文本视图，如下所示- 然而，即使这种方法也不起作用，因为我的工具栏左边缘有一个抽屉菜单图标。因此，尽管我的文本在textview中居中对齐，但textview本身并不覆盖屏幕的宽度。结果如下：对如何解决这个问题有什么建议吗？谢谢
透明状态栏和折叠工具栏布局

我知道有成千上万个这样的问题，但是我尝试了所有的方法，但是我不能想出一个解决方案。基本上，我使用的是NoActionBar风格的活动。风格。xml: v21/风格。xml: 家庭活动正常，抽屉将在透明状态栏下正常打开：问题是使用以下布局的另一个活动：基本上，状态栏是透明的，所以我看不到它，因为我的colorPrimary是白色的。奇怪的是，如果我折叠工具栏（因此只有选项卡可见），状态栏将正确
Android中不显示工具栏标题

当我运行应用程序，工具栏显示，但不是标题。如何显示标题？谢了。

在工具栏中折叠带有徽标、标题和副标题的工具栏布局

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档