Android CollapsingToolbarLayout avec une vue personnalisée

Je suis en train de suivre le projet d'exemple Cheesesquare pour comprendre la nouvelle bibliothèque de matériaux de conception.

Je me demande s'il existe une façon d'utiliser une vue personnalisée (comme Telegram) avec ImageView, titre et sous-titre au lieu du titre simple fourni par le widget CollapsingToolbarLayout.

  • Android Pros et Contras: Event Bus et RxJava
  • Android MediaCodec décode h264 cadre brut
  • Aucune propriété de ce type: sonatypeUserName pour la classe: org.gradle.api.publication.maven.internal.ant.DefaultGroovyMavenDeployer
  • Android: TextView: Supprime l'espacement et le rembourrage en haut et en bas
  • Envoyer un objet personnalisé à l'aide du classeur natif Android
  • INSTALL_FAILED_DEXOPT Erreur dans Android 5.0 en mode Libération
  • Merci.

  • Le widget Android n'apparaît pas sur la liste après son développement
  • Comment les jarres d'exportation du projet de bibliothèque font-elles référence à des projets dans Eclipse?
  • Comment enregistrer le contenu LogCat dans le fichier?
  • Comment changer le début Activité dynamiquement?
  • Comment lire .doc, .docx, fichiers .xls dans android
  • Comment intégrer facebook, twitter et google plus à une application Android
  • 3 Solutions collect form web for “Android CollapsingToolbarLayout avec une vue personnalisée”

    J'ai eu le même problème et j'ai passé de nombreuses heures à essayer de trouver une solution. Ma solution était d'ajouter les vues effondrantes (ImageView et TextView) à l'intérieur de CollapsingToolbarLayout puis gérer la transition dans le code. De cette façon, il est plus souple et plus simple que de s'étendre à partir de CollapsingToolbarLayout.

    D'abord, vous devrez ajouter vos vues à l'intérieur de CollapsingToolbarLayout avec les propriétés de parallaxe:

      <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop:"80dp" android:src="@drawable/icon" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here 

    Ensuite, définissez la mise à l'échelle des vues à l'aide d'un OnOffsetchangeListner :

      private static final float SCALE_MINIMUM=0.5f; appBarLayout.setOnWorkingOffsetChange(new ControllableAppBarLayout.OnWorkingOffsetChange() { @Override public void onOffsetChange(int offSet, float collapseDistance) { imageView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM)); imageView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM)); textView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM)); textView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM)); // You can also setTransitionY/X, setAlpha, setColor etc. } }); 

    D'une certaine manière, le offsetChangedListener par offsetChangedListener n'a pas fonctionné correctement (vous devriez probablement l'essayer avec l'écouteur par défaut en premier), j'ai donc utilisé ControllableAppBarLayout partir de https://gist.github.com/blipinsk/3f8fb37209de6d3eea99 et ajouté ce qui suit:

     private OnWorkingOffsetChange onWorkingOffsetChange; @Override public void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (!isInEditMode()) { onWorkingOffsetChange.onOffsetChange(i, (float) i / appBarLayout.getTotalScrollRange()); } } public void setOnWorkingOffsetChange(OnWorkingOffsetChange listener) { this.onWorkingOffsetChange = listener; } public interface OnWorkingOffsetChange { void onOffsetChange(int offSet, float collapseDistance); } 

    Le seul problème est que vous devriez définir l' app:contentScrim="#00000000" (transparent) pour votre CollapsingToolbarLayout , de sorte que vos vues sont encore visibles lorsque la barre d'outils est effondrée. Si vous avez vraiment besoin de l'effet collapsing-background, je suis sûr que vous pourriez "fausser" cela en définissant l'alpha d'un OffsetChangeListener arrière-plan dans OffsetChangeListener . 😉

    Du widget lui-même, il ne semble pas y avoir de moyen de l'activer directement, comme s'il était possible d'ajouter des vues personnalisées à la barre d'outils.

    Ce que vous pourriez essayer de faire, c'est ouvrir la source de CollapsingToolbarLayout.class et vérifier comment le CollapsingTextHelper.class est utilisé pour avoir le titre défini. Vous pouvez essayer de créer votre propre widget en étendant le CollapsingToolbarLayout .

    Ces liens peuvent vous aider à créer des composants / vues personnalisés, si vous ne les avez pas créés avant: les vues personnalisées, les composants personnalisés

    Je ne l'ai pas encore essayé, mais c'est quelque chose que je pensais essayer d'obtenir une solution similaire à celle que vous recherchez. Les étapes que je voudrais suivre, jusqu'à présent:

    1. Créez des attributs personnalisés pour les paramètres de sous-titres dans attrs.xml
    2. Créez votre propre MyCollapsingToolbarLayout en étendant l'original.
    3. Assurez-vous d'appeler super dans les constructeurs, de sorte que le composant d'origine restera intact.
    4. Créez un subtitleTextHelpersubtitleTextHelper en ajoutant un nouveau CollapsingTextHelper à votre composant.
    5. Remplacer onDraw pour extraire vos sous-titres.
    6. Mettez à jour la mise en page contenant votre CollapingsToolbarLayout avec vos attributs de sous-titres (style par défaut et tel, peut-être un texte de sous-titre fixe).
    7. Appliquez les modifications dans l' Activity contenant votre CollapsingToolbar . (Convertir CollapsingToolbarlayout en MyCollapingsToolbarLayout , définir des sous-titres, des paramètres personnalisés supplémentaires, etc.).
    8. Croisez les doigts, testez.

    Je vais l'examiner maintenant.

    Aller à modifier légèrement la réponse de Christopher pour montrer comment vous pouvez obtenir votre vue personnalisée pour ne pas disparaître lors de l'effondrement:

    D'abord, vous devrez ajouter vos vues à l'intérieur de CollapsingToolbarLayout avec les propriétés de parallaxe:

      <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop:"80dp" android:src="@drawable/icon" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here 

    Au lieu de cela, ajoutez la vue personnalisée par programmation et elle ne disparaîtra pas lors de l'effondrement. Par exemple, voici une vue qui contient un titre et un sous-titre:

      final FrameLayout frameLayout = new FrameLayout(mActivity); FrameLayout.LayoutParams frameLayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT); frameLayout.setLayoutParams(frameLayoutParams); // Create new LinearLayout final LinearLayout linearLayout = new LinearLayout(mActivity); frameLayoutParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, dpToPixels(78)); frameLayoutParams.gravity = Gravity.BOTTOM; linearLayout.setLayoutParams(frameLayoutParams); linearLayout.setOrientation(LinearLayout.VERTICAL); // Add textviews final TextView textView1 = new TextView(mActivity); LinearLayout.LayoutParams linearLayoutParams =new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); frameLayoutParams.gravity = Gravity.BOTTOM; textView1.setLayoutParams(linearLayoutParams); textView1.setText("Title"); textView1.setTextColor(ContextCompat.getColor(mActivity, R.color.colorWhite)); textView1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 40); linearLayout.addView(textView1); final TextView textView2 = new TextView(mActivity); linearLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); textView2.setLayoutParams(linearLayoutParams); textView2.setText("Subtitle"); textView2.setTextColor(ContextCompat.getColor(mActivity, R.color.colorWhite)); textView2.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20); linearLayout.addView(textView2); frameLayout.addView(linearLayout); collapsingToolbar.addView(frameLayout); final float SCALE_MIN=0.4f; AppBarLayout appBarLayout = (AppBarLayout) mActivity.findViewById(R.id.appBarLayout); appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int offSet) { float collapsedRatio = (float) offSet / appBarLayout.getTotalScrollRange(); linearLayout.setScaleX(1 + (collapsedRatio * SCALE_MIN)); linearLayout.setScaleY(1 + (collapsedRatio * SCALE_MIN)); FrameLayout.LayoutParams frameLayoutParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, dpToPixels(78)); frameLayoutParams.gravity = Gravity.BOTTOM; frameLayoutParams.setMargins(Math.round(dpToPixels(48) * (1+collapsedRatio)), 0, 0, Math.round(dpToPixels(15) * collapsedRatio)); linearLayout.setLayoutParams(frameLayoutParams); // You can also setTransitionY/X, setAlpha, setColor etc. } }); 

    /////

     float lastCollapsedRatio = -2; 

    ////

     private int dpToPixels(int padding_in_dp){ final float scale = getResources().getDisplayMetrics().density; int padding_in_px = (int) (padding_in_dp * scale + 0.5f); return padding_in_px; } 
    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.