Réduire la présentation de la barre d’outils avec le logo, le titre, le sous-titre dans la barre d’outils
Je veux le faire, mais avec la disposition Réduire la barre d’outils ou afficher le logo et le titre dans la barre d’outils après le défilement.
<!-- 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>
Aidez-moi, s'il vous plaît
J'ai déjà pré-lu deux exemples de démo avec une approche qui n’utilise pas de custom CoordinatorLayoutBehavior!
Pour afficher mes exemples de code natif: "Exemple de réduction de la barre d'outils Avatar"
Pour lire mon "Animation de barre d'outils Android" ) == sur Medium.
démo 1 
démo 2 
Au lieu d'utiliser un CoordinatorLayoutBehavior personnalisé, j'utilise un OnOffsetChangedListener qui provient de 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()))
})
}
Démo 1
in updateViews method avatar change la taille et change la traduction de la position X, Y de l’avatar dans la première démo.
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
}
}
}
}
pour trouver avatarAnimateStartPointY et avatarCollapseAnimationChangeWeight (pour convertir l'offset général en avatar animer offset):
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
}
Démo 2
avatar changer sa taille et ensuite animer déplacer à droite à un moment donné avec le texte de la barre d'outils supérieure est devenu à montrer et à déplacer à gauche.
Vous devez suivre les états: TO_EXPANDED_STATE en changeant, TO_COLLAPSED_STATE en changeant, 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)
}
}
Créez une animation pour le changement d'avatar sur l'état:
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)
}
Pour afficher mes exemples de code natif: "Exemple de réduction de la barre d'outils Avatar"
smooth-app-bar-layout
voir Exemple
Installation
compile "me.henrytao:smooth-app-bar-layout:<latest-version>"
