web-dev-qa-db-ja.com

ツールバーのロゴ、タイトル、サブタイトルを含む折りたたみツールバーレイアウト

First ImageSecond imageThird image

私はこれをしたいが、ツールバーのレイアウトを折りたたみ、またはスクロール後にツールバーにロゴとタイトルを表示します。

    <!-- 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>

私を助けてください

androidandroid-layouttoolbarmaterial-designandroid-collapsingtoolbarlayout
38
tonilopezmr

カスタムCoordinatorLayoutBehaviorを使用しないアプローチで2つの驚異的なアバターのデモサンプルを折りたたみます。

サンプルのネイティブコードを表示するには： "Collapsing Avatar Toolbar Sample"

私の "アニメーション折りたたみツールバーAndroid" をMediumに投稿するには。

デモ1enter image description hereデモ2enter image description here

カスタムCoordinatorLayoutBehaviorを使用する代わりに、OnOffsetChangedListenerから派生するAppBarLayoutを使用します。

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()))
                })
    }

デモ1

enter image description here

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を見つける（一般的なオフセットをアバターのアニメーションオフセットに変換するため）：

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
 }

デモ2

enter image description here

アバターは彼のサイズを変更し、アニメーション化するよりも、上のツールバーのテキストが右に表示されるようになり、左に移動するようになりました。

状態を追跡する必要があります：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)
            }

サンプルのネイティブコードを表示するには： "Collapsing Avatar Toolbar Sample"

6
Serg Burlaka

smooth-app-bar-layout

例 を参照

インストール

compile "me.henrytao:smooth-app-bar-layout:<latest-version>"

enter image description here

enter image description here

0
Mansukh Ahir