wake-up-neo.com

So erstellen Sie eine ActionBar wie Google Play, die beim Scrollen eingeblendet wird

Wie mache ich eine transparente oder durchscheinende ActionBar wie Google Play, die beim Scrollen mit windowActionBarOverlay ein- oder ausgeblendet wird?

Überprüfen Sie die folgenden Screenshots

**enter image description here**

androidandroid-actionbartransparentandroid-actionbar-compat
68
Cristiana Chavez

Das Folgende ist der Code, den ich in der App verwendet habe, an der ich arbeite

Sie müssen die Funktion OnScrollChanged in Ihrem ScrollView verwenden. Mit ActionBar können Sie die Deckkraft nicht festlegen. Legen Sie daher einen auf der Aktionsleiste darstellbaren Hintergrund fest, und Sie können die Deckkraft basierend auf dem Bildlauf in der Bildlaufansicht ändern. Ich habe einen Beispielworkflow angegeben

Die Funktionssätze geben das entsprechende Alpha für die Ansicht locationImage basierend auf der Position des WRT-Fensters an.

this.getScrollY() gibt an, um wie viel das scrollView gescrollt hat

public void OnScrollChanged(int l, int t, int oldl, int oldt) {
    // Code ...
    locationImage.setAlpha(getAlphaForView(locationImageInitialLocation- this.getScrollY()));
}


private float getAlphaForView(int position) {
    int diff = 0;
    float minAlpha = 0.4f, maxAlpha = 1.f;
    float alpha = minAlpha; // min alpha
    if (position > screenHeight)
        alpha = minAlpha;
    else if (position + locationImageHeight < screenHeight)
        alpha = maxAlpha;
    else {
        diff = screenHeight - position;
        alpha += ((diff * 1f) / locationImageHeight)* (maxAlpha - minAlpha); // 1f and 0.4f are maximum and min
                                            // alpha
        // this will return a number betn 0f and 0.6f
    }
    // System.out.println(alpha+" "+screenHeight +" "+locationImageInitialLocation+" "+position+" "+diff);
    return alpha;
}

BEARBEITEN: Ich habe unter https://github.com/ramanadv/fadingActionBar ein Arbeitsbeispiel hinzugefügt, das Sie sich ansehen können.

enter image description here

31
CommandSpace

Bitte überprüfen Sie diese Bibliothek https://github.com/ManuelPeinado/FadingActionBar , die den gewünschten coolen Fading-Aktionsleisteneffekt implementiert

8
shaobin0604

Diese Bibliothek hilft bei der Animation https://github.com/ksoichiro/Android-ObservableScrollView

8
mustafasevgi

Offizielle Google DeveloperDocumentation

enter image description here

Aktionsleiste im Overlay-Modus.

Überlagerungsmodus aktivieren

Um den Überlagerungsmodus für die Aktionsleiste zu aktivieren, müssen Sie ein benutzerdefiniertes Design erstellen, das ein vorhandenes Aktionsleistenthema erweitert, und die Eigenschaft Android: windowActionBarOverlay auf true festlegen.

Für Android 3.0 und höher

Wenn Ihre minSdkVersion auf 11 oder höher eingestellt ist, sollte Ihr benutzerdefiniertes Design das Theme.Holo-Design (oder eines seiner Nachkommen) als übergeordnetes Design verwenden. Beispielsweise:

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@Android:style/Theme.Holo">
        <item name="Android:windowActionBarOverlay">true</item>
    </style>
</resources>

Für Android 2.1 und höher

Wenn Ihre App die Unterstützungsbibliothek verwendet, um die Kompatibilität auf Geräten zu gewährleisten, auf denen Versionen niedriger als Android 3.0) ausgeführt werden, sollte in Ihrem benutzerdefinierten Design das Theme.AppCompat-Design (oder eines seiner Nachkommen) als übergeordnetes Design verwendet werden Beispiel:

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@Android:style/Theme.AppCompat">
        <item name="Android:windowActionBarOverlay">true</item>

        <!-- Support library compatibility -->
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

Layout oben festlegen

Wenn sich die Aktionsleiste im Überlagerungsmodus befindet, wird möglicherweise ein Teil Ihres Layouts verdeckt, der sichtbar bleiben soll. Um sicherzustellen, dass solche Elemente immer unterhalb der Aktionsleiste bleiben, fügen Sie oben in den Ansichten entweder einen Rand oder einen Abstand mit der von actionBarSize angegebenen Höhe hinzu. Beispielsweise:

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:paddingTop="?android:attr/actionBarSize">
    ...
</RelativeLayout>
7
Cristiana Chavez

Wenn Sie in Ihrer Layout-XML ein CoordinatorLayout verwenden, sollten Sie an dieser Stelle in diesem Artikel beschreiben, wie Sie mit Bildlaufschritten umgehen und andere Ansichten darauf reagieren lassen.

Wenn Sie Ihre Bildansicht als untergeordnetes Element des CollapsingToolbarLayouts hinzufügen, wird die gesamte Magie automatisch verarbeitet, und Sie können sogar einige Parameter wie die Scrim-Farbe, die Mindesthöhe für den Beginn des Collapsings usw. festlegen:

3
MiichaelD

Es gibt eine offizielle Dokumentation, wie dieser Effekt erzielt werden kann: https://developer.Android.com/training/basics/actionbar/overlaying.html

Bearbeiten: Es gibt eine Open-Source-Bibliothek ObservableScrollView mit vielen Open-Source-Demos mit verschiedenen ActionBar-Effekten, einschließlich der von Ihnen erwähnten. Es ist eine großartige Ressource: https://github.com/ksoichiro/Android-ObservableScrollView .

3
Fabian Frank

Mit dem AbsListView-Scroll-Listener können wir eine Listenansicht einfach ohne Verwendung einer anderen komplizierten Bibliothek oder ScrollView erreichen

scroll Listener auf Listenansicht setzen

public class PagedScrollListener implements AbsListView.OnScrollListener {
    private ActionBar mActionBar;
    private View mTopHideView; // represent header view

     @Override
    public void onScrollStateChanged(final AbsListView view, final int scrollState) {
        mScrollState = scrollState;
    }

    @Override
    public void onScroll(final AbsListView view, final int firstVisibleItem, final int visibleItemCount, final int totalItemCount) {

        if (mActionBar != null && mTopHideView != null && mListView != null) {
            Log.i(TAG, getScrollY() + "");
            int currentY = getScrollY();

            final int headerHeight = mTopHideView.getHeight() - mActionBar.getHeight();
            final float ratio = (float) Math.min(Math.max(currentY, 0), headerHeight) / headerHeight;
            final int newAlpha = (int) (ratio * 255);
            Log.i(TAG, newAlpha + " alpha");
            mActionBarDrawaqble.setAlpha(newAlpha);
}}


public void setActionBarRefernce(ActionBar actionBar, View topHideView, float actionBarHeight, ListView listView) {
        mActionBar = actionBar;
        mActionBarHeight = actionBarHeight;
        mTopHideView = topHideView;
        mListView = listView;
        mActionBarDrawaqble = new ColorDrawable(ContextCompat.getColor(mContext, R.color.google_plus_red));
        mActionBar.setBackgroundDrawable(mActionBarDrawaqble);
        mActionBarDrawaqble.setAlpha(0);
    }

   public int getScrollY() {
        View c = mListView.getChildAt(0);
        if (c == null) {
            return 0;
        }

        int firstVisiblePosition = mListView.getFirstVisiblePosition();
        int top = c.getTop();

        int headerHeight = 0;
        if (firstVisiblePosition >= 1) {
            headerHeight = mTopHideView.getHeight();
        }

        return -top + firstVisiblePosition * c.getHeight() + headerHeight;
    }

}

// Hinweis: Vergessen Sie nicht, die ** setActionBarRefernce-Methode ** des benutzerdefinierten Listeners aufzurufen

0
sujith s