it-swarm.com.ru

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

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

Проверьте следующие скриншоты

**enter image description here**

68
Cristiana Chavez

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

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

Наборы функций дают соответствующую альфу для view 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;
}

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

enter image description here

31
CommandSpace

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

8
shaobin0604

Эта библиотека помогает для анимации https://github.com/ksoichiro/Android-ObservableScrollView

8
mustafasevgi

Официальная документация разработчика Google

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

Если вы используете CoordinatorLayout в своем XML-макете, вы должны оформить заказ эта статья , описывающий, как обрабатывать прокрутки и заставлять другие представления реагировать на них.

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

3
MiichaelD

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

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

3
Fabian Frank

Используя прослушиватель прокрутки 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 ** пользовательского слушателя

0
sujith s