Подтвердить что ты не робот

Как сделать ActionBar как Google Play, который исчезает при прокрутке

Как сделать прозрачный или полупрозрачный ActionBar как Google Play, который исчезает или прокручивается при прокрутке с помощью windowActionBarOverlay?

Проверьте следующие снимки экрана

**enter image description here**

4b9b3361

Ответ 1

Ниже приведен код, который я использовал в приложении, которое я работаю

Вам нужно будет использовать функцию OnScrollChanged в ScrollView. ActionBar не позволяет установить непрозрачность, поэтому установите фоновый рисунок на панели действий, и вы можете изменить его непрозрачность на основе количества прокрутки в прокрутке. Я привел пример рабочего процесса

Наборы функций задают соответствующую альфу для объекта locationImage на основе его окна WRT позиции.

this.getScrollY() дает вам, сколько прокрутила ScrollView

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

EDIT: я добавил пример рабочего примера в https://github.com/ramanadv/fadingActionBar, вы можете посмотреть его.

enter image description here

Ответ 2

Пожалуйста, просмотрите эту библиотеку https://github.com/ManuelPeinado/FadingActionBar, которая реализует эффект эффектного эффекта эффектной выцветания, который вы хотите

Ответ 4

Официальный документ Google DeveloperDocumentation

enter image description here

панель действий в режиме наложения.

Включить режим наложения

Чтобы включить режим наложения для панели действий, вам нужно создать настраиваемую тему, которая расширяет существующую тему панели действий и устанавливает для свойства android: windowActionBarOverlay значение true.

Только для Android 3.0 и выше

Если для вашего minSdkVersion установлено значение 11 или выше, ваша пользовательская тема должна использовать тему Theme.Holo(или один из ее потомков) в качестве родительской темы. Например:

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

Для Android 2.1 и выше

Если ваше приложение использует библиотеку поддержки для совместимости на устройствах с версиями ниже Android 3.0, ваша пользовательская тема должна использовать тему Theme.AppCompat(или один из ее потомков) в качестве родительской темы. Например:

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

Укажите верхний предел макета

Когда панель действий находится в режиме наложения, она может затенять часть вашего макета, которая должна оставаться видимой. Чтобы гарантировать, что такие элементы остаются под панелью действий все время, добавьте край или дополнение в верхнюю часть представления (ов), используя высоту, указанную actionBarSize. Например:

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

Ответ 5

Существует официальная документация о том, как добиться этого эффекта: https://developer.android.com/training/basics/actionbar/overlaying.html

Изменить: Существует библиотека с открытым исходным кодом ObservableScrollView с большим количеством демонстраций с открытым исходным кодом с различными эффектами ActionBar, включая те, которые вы упомянули. Это отличный ресурс: https://github.com/ksoichiro/Android-ObservableScrollView.

Ответ 6

Если вы используете координаторLayout в своем макете xml, вы должны проверить эту статью, описывающую, как обрабатывать свитки и реагировать на другие взгляды.

Существует пример выполнения того, что вы просили, если вы добавите свое изображение в качестве дочернего элемента CollapsingToolbarLayout, все магии обрабатываются автоматически, и вы можете даже некоторые параметры, такие как цвет холста, минимальная высота, чтобы начать свертывание и т.д.:

dTDPztp.png

Ответ 7

Используя прослушиватель прокрутки AbsListView, мы можем добиться для списка просто без использования другой сложной библиотеки или ScrollView

установить прослушиватель прокрутки в список просмотра

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

} 

// Примечание: Не забудьте вызвать ** метод setActionBarRefernce ** пользовательского прослушивателя

Ответ 8

В webView:

@JavascriptInterface
public void showToolbar(String scrollY, String imgWidth) {
    int int_scrollY = Integer.valueOf(scrollY);
    int int_imgWidth = Integer.valueOf(imgWidth);

    String clr;
    if (int_scrollY<=int_imgWidth-actionBarHeight) {
        clr = Integer.toHexString(int_scrollY * 255 / (int_imgWidth-actionBarHeight));
    }else{
        clr = Integer.toHexString(255);
    }

    toolbar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#"+clr+"9CCC65")));
}