web-dev-qa-db-fra.com

Ajouter une icône avec un titre dans CollapsingToolbarLayout

J'utilise CoordinatorLayout pour obtenir cet effet:

 This is screenshot of the same app on iOS

Voici le code de mise en page:

    <?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/coordinatorRootLayout"
    Android:background="@Android:color/background_light"
    Android:fitsSystemWindows="true"
    >


<Android.support.design.widget.AppBarLayout
            Android:id="@+id/Android_appbar_layout"
            Android:layout_width="match_parent"
            Android:layout_height="220dp"
            Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <Android.support.design.widget.CollapsingToolbarLayout
                Android:id="@+id/collapsingToolbarLayoutAndroidExample"
                Android:layout_width="match_parent"
                Android:background="#fff"
                app:collapsedTitleGravity="left"
                app:expandedTitleTextAppearance="@color/card_outline"
                Android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                Android:fitsSystemWindows="true"
                app:expandedTitleGravity="center_horizontal"
                app:contentScrim="?attr/colorPrimary"
                app:statusBarScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="32dp"
                app:expandedTitleMarginEnd="48dp">

            <ImageView
                    Android:id="@+id/parallax_header_imageview"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:scaleType="fitXY"
                    Android:src="@drawable/orange_triangle"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.8"/>


                <ImageView
                    app:expandedTitleGravity="center_horizontal"
                    Android:id="@+id/someImage"
                    Android:layout_width="100dp"
                    Android:layout_height="100dp"
                    Android:src="@drawable/circle"
                    Android:layout_gravity="center_horizontal"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="-1"
                    />
                <Android.support.v7.widget.Toolbar
                    Android:id="@+id/toolbar_Android"
                    Android:layout_width="match_parent"
                    Android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="none"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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


        </Android.support.design.widget.AppBarLayout>
    <Android.support.v4.widget.NestedScrollView
            Android:id="@+id/nested_scroll_view"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                Android:id="@+id/linear_layout_Android"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:padding="15dp"
                Android:background="@color/off_white"
                Android:layout_gravity="center_horizontal"
                Android:gravity="center_horizontal"
                Android:orientation="vertical">

                <GridView
                    Android:id="@+id/gridview_parallax_header"
                    Android:layout_width="fill_parent"
                    Android:layout_height="fill_parent"
                    Android:columnWidth="100dp"
                    Android:gravity="center"
                    Android:numColumns="auto_fit"
                    Android:stretchMode="columnWidth" />

            </LinearLayout>

        </Android.support.v4.widget.NestedScrollView>


    </Android.support.design.widget.CoordinatorLayout>

et voici ce que je reçois en sortieComment utiliser une icône avec le texte du titre?

 enter image description here

16
Devendra Singh

Vous pouvez essayer ce qui suit

Référence pour la mise en page du coordinateur

Maintenant dans votre MainActivity.Java

private void handleToolbarTitleVisibility(float percentage) {
    if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {

        if(!mIsTheTitleVisible) {
            startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
            toolbar.setAlpha(0.9f);
            toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.Primary)));
            mIsTheTitleVisible = true;
        }
    } 
    else {
        if (mIsTheTitleVisible) {
            startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
            toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(Android.R.color.transparent)));
            mIsTheTitleVisible = false;
        }
    }
}

Remarque: gardez l'arrière-plan de la barre d'outils transparent lorsqu'il est développé.

10
icodebuster

Je vous suggère d'essayer Les enfants et les dépendances

      public boolean onDependentViewChanged(
    
      CoordinatorLayout parent, 
      CircleImageView avatar, 
      View dependency) {
    

      modifyAvatarDependingDependencyState(avatar, dependency);
   }

   private void modifyAvatarDependingDependencyState(
    CircleImageView avatar, View dependency) {
        //  avatar.setY(dependency.getY());
        //  avatar.setBlahBlat(dependency.blah / blah);
    } 

http://www.devexchanges.info/2016/03/Android-tip-custom-coordinatorlayout.html

CollapsingToolbarLayout avec une vue personnalisée

1
Aditya Vyas-Lakhan

Vous pouvez prendre référence à partir de cet exemple: -

ParallaxHeaderViewPager Android

1
Pawanpreet

Peut-être que cela résoudra votre problème: 

Vous pouvez positionner le titre développé où vous voulez en utilisant les attributs CollapsingToolbarLayout:

app:expandedTitleGravity        default is bottom|left -or- bottom|start
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginStart
app:expandedTitleMarginEnd

Code pour la mise en page Fichier:

<Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapse_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true">

            <ImageView
                Android:id="@+id/bgheader"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                Android:background="@drawable/sunflowerpic"
                app:layout_collapseMode="pin" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/MyToolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

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

Puis dans votre fichier Java SetTitle:

 CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
        collapsingToolbar.setTitle("Title");

Ajouter une icône dans le coin supérieur: Utilisez app:layout_collapseMode="pin" avec ImagView. Par exemple.

<ImageView
            Android:id="@+id/someImage"
            Android:layout_width="56dp"
            Android:layout_height="wrap_content"
            Android:src="@drawable/someDrawable"
            Android:padding="16dp"
            Android:layout_gravity="top|end"
            app:layout_collapseMode="pin"
            />

Référence à ce lien Exemple de barre d’outils réductrice

0
Dipali s.