webentwicklung-frage-antwort-db.com.de

Fügen Sie ein Symbol mit dem Titel in CollapsingToolbarLayout hinzu

Ich verwende CoordinatorLayout, um diesen Effekt zu erzielen:

 This is screenshot of the same app on iOS

Hier ist der Layoutcode:

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

und hier ist das, was ich als Ausgabe bekomme.

 enter image description here

16
Devendra Singh

Sie können Folgendes versuchen

Referenz für das Co-Ordinator-Layout

Jetzt in deinem 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;
        }
    }
}

Hinweis: Lassen Sie den Hintergrund der Symbolleisten transparent, wenn Sie erweitert werden.

10
icodebuster

Ich schlage vor, dass Sie versuchen, Kinder und Abhängigkeiten

      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-koordinatorlayout.html

CollapsingToolbarLayout mit einer benutzerdefinierten Ansicht

1

Sie können diesem Beispiel entnehmen: -

Android ParallaxHeaderViewPager

1
Pawanpreet

Kann das sein Problem lösen: 

Sie können den erweiterten Titel mithilfe der folgenden CollapsingToolbarLayout-Attribute an beliebiger Stelle positionieren:

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

Code für Layoutdatei:

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

Dann in Ihrer Java-Datei SetTitle:

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

Symbol zur oberen Ecke hinzufügen: Verwenden Sie app:layout_collapseMode="pin" mit ImagView. Für z.

<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"
            />

Verweis auf diesen Link Beispiel für ein Zusammenklappen der Symbolleiste

0
Dipali s.