Скользящее вверх изображение с официальной библиотекой поддержки 23.x.+, нижний лист, как карты Google

Обновить
Я хочу добиться того же поведения, что и карты Google, с библиотекой поддержки 23.x.+ и без ЛЮБОЙ третьей библиотеки

ПРИМЕЧАНИЕ. Это не повторяющийся вопрос, потому что:

  1. Я хочу использовать Behaviors, Support Library и без ЛЮБОЙ сторонней библиотеки (я добавил ее в заголовок вопроса и в описание выше)
  2. Я хотел ВСЕ варианты поведения, которые вы видите на следующем рисунке. Другие вопросы касаются одного или двух вариантов поведения и их использования в любом случае для достижения этого.

    как вы можете видеть на этом gif

У меня уже работает официальный нижний лист (даже внутри вкладки и просмотра пейджера).

Что сводит меня с ума, так это то, как добиться поведения изображения, которое появляется из BottomSheet при скольжении вверх с использованием официального нижнего листа?.

Я пытался использовать привязку, такую ​​​​как FAB, без успех.
Я читал кое-что об использовании прослушивателя прокрутки, но люди сказали, что это не так гладко и быстро, как карты Google.

Мой XML (не думаю, что это поможет, но тем не менее):

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MasterActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?android:attr/borderlessButtonStyle"
                android:text="Departure"
                android:layout_gravity="center"
                android:id="@+id/buttonToolBar"
                />


        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@android:color/white"
            app:tabTextColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/colorAccent"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/asdf"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:behavior_peekHeight="100dp"
        android:fitsSystemWindows="true"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <LinearLayout
            android:id="@+id/qwert"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingBottom="16dp"
            android:background="@android:color/white"
            android:padding="15dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BOOTOMSHEET TITLE"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button1"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text 2"
                android:layout_margin="10dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text 3"
                android:layout_margin="10dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text 4"
                android:layout_margin="10dp"/>


            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:background="@color/colorAccent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Your remaining content here"
                    android:textColor="@android:color/white" />

            </FrameLayout>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>


    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/asdf"
        app:layout_anchorGravity="top|right|end"
        android:src="@drawable/abc_ic_search_api_mtrl_alpha_copy"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

person MiguelHincapieC    schedule 19.05.2016    source источник
comment
Просто спрошу первое, что пришло в голову: пробовали ли вы использовать android:animateLayoutChanges="true"? Если это имеет смысл.   -  person AL.    schedule 20.05.2016
comment
Нет, я не пробовал. Завтра я посмотрю, что вы сказали, и дам вам ответ.   -  person MiguelHincapieC    schedule 20.05.2016
comment
@McAwesomville кажется, что вы должны использовать его в списке, но я понятия не имею (кстати, никто), достигают ли они этого с помощью макета Collapsing and Coordinator или они использовали то, что вы предлагаете. Единственное, что я понял, это то, что это не одно изображение, это AppBarLayout с координатором и изображением внутри него.   -  person MiguelHincapieC    schedule 22.05.2016
comment
ха-ха, мне было интересно о том же (часть слайда изображения вверх - у меня был нижний лист + координатор с CollapsingToolbarLayout, который делает некоторый параллакс, но иначе, чем в случае с картами Google) - затем я нашел ваш код на github, который работает, и этот вопрос   -  person luky    schedule 14.11.2016


Ответы (2)


Если вы хотите добиться этого с помощью библиотеки поддержки 23.4.0.+, я расскажу вам, как я ее получил и как она работает.

Насколько я вижу, активность/фрагмент имеет следующее поведение:

  1. 2 панели инструментов с анимацией, реагирующей на движения нижнего листа.
  2. FAB, который скрывается, когда он находится рядом с модальной панелью инструментов (та, которая появляется, когда вы проводите пальцем вверх).
  3. Фоновое изображение за нижним листом с эффектом параллакса.
  4. Заголовок (TextView) на панели инструментов, который появляется, когда нижний лист достигает его.
  5. Фон строки уведомлений может быть прозрачным или полноцветным.
  6. Пользовательское поведение нижнего листа с состоянием привязки.

note2: этот ответ говорит о 6 вещах, а не об 1 или 2, как и в другом вопросе, теперь вы видите разницу?

Хорошо, а теперь давайте еще раз проверим:

Панели инструментов
Когда вы открываете это представление в Картах Google, вы видите панель инструментов, где вы можете искать, это единственная панель, которую я не делаю равной, как карты Google, потому что я хотел сделать это больше общий. В любом случае, этот ToolBar находится внутри AppBarLayout, и он скрывается, когда вы начинаете перетаскивать нижний лист, и появляется снова, когда нижний лист достигает состояния COLLAPSED.
Для этого вам нужно:

  • создать Behavior и расширить его из AppBarLayout.ScrollingViewBehavior
  • переопределить методы layoutDependsOn и onDependentViewChanged. Делая это, вы будете слушать движения нижнего листа.
  • создайте несколько методов для скрытия и отображения AppBarLayout/ToolBar с анимацией.

Вот как я сделал это для первой панели инструментов или панели действий:

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    return dependency instanceof NestedScrollView;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
                                      View dependency) {

    if (mChild == null) {
        initValues(child, dependency);
        return false;
    }

    float dVerticalScroll = dependency.getY() - mPreviousY;
    mPreviousY = dependency.getY();

    //going up
    if (dVerticalScroll <= 0 && !hidden) {
        dismissAppBar(child);
        return true;
    }

    return false;
}

private void initValues(final View child, View dependency) {

    mChild = child;
    mInitialY = child.getY();

    BottomSheetBehaviorGoogleMapsLike bottomSheetBehavior = BottomSheetBehaviorGoogleMapsLike.from(dependency);
    bottomSheetBehavior.addBottomSheetCallback(new BottomSheetBehaviorGoogleMapsLike.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, @BottomSheetBehaviorGoogleMapsLike.State int newState) {
            if (newState == BottomSheetBehaviorGoogleMapsLike.STATE_COLLAPSED ||
                    newState == BottomSheetBehaviorGoogleMapsLike.STATE_HIDDEN)
                showAppBar(child);
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {

        }
    });
}

private void dismissAppBar(View child){
    hidden = true;
    AppBarLayout appBarLayout = (AppBarLayout)child;
    mToolbarAnimation = appBarLayout.animate().setDuration(mContext.getResources().getInteger(android.R.integer.config_shortAnimTime));
    mToolbarAnimation.y(-(mChild.getHeight()+25)).start();
}

private void showAppBar(View child) {
    hidden = false;
    AppBarLayout appBarLayout = (AppBarLayout)child;
    mToolbarAnimation = appBarLayout.animate().setDuration(mContext.getResources().getInteger(android.R.integer.config_mediumAnimTime));
    mToolbarAnimation.y(mInitialY).start();
}

полный файл, если вам это нужно

Вторая панель инструментов или модальная панель инструментов:
вам нужно переопределить некоторые методы, но в этом случае вы должны позаботиться о большем количестве вариантов поведения:

  • показать/скрыть панель инструментов с анимацией
  • изменить цвет/фон строки состояния
  • показать/скрыть заголовок BottomSheet на панели инструментов
  • закрыть нижний лист или отправить его в свернутое состояние

Код для этого немного обширен, поэтому я позволю ссылка

The FAB

Это тоже настраиваемое поведение, но оно происходит от FloatingActionButton.Behavior. В onDependentViewChanged вы должны смотреть, когда он достигает смещения или указывает, где вы хотите его скрыть. В моем случае я хочу скрыть его, когда он находится рядом со второй панелью инструментов, поэтому я копаюсь в родительском элементе FAB (CoordiantorLayout) в поисках AppBarLayout, содержащего панель инструментов, затем я использую положение панели инструментов, например OffSet:

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {

    if (offset == 0)
        setOffsetValue(parent);

    if (dependency.getY() <=0)
        return false;

    if (child.getY() <= (offset + child.getHeight()) && child.getVisibility() == View.VISIBLE)
        child.hide();
    else if (child.getY() > offset && child.getVisibility() != View.VISIBLE)
        child.show();

    return false;
}

Полный пользовательский Ссылка на потрясающее поведение

Изображение за BottomSheet с эффектом параллакса:
Как и другие, это настраиваемое поведение, единственная сложная вещь в этом — это небольшой алгоритм, который удерживает изображение привязанным к BottomSheet и избегает изображения. свернуть, как эффект параллакса по умолчанию:

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
                                      View dependency) {

    if (mYmultiplier == 0) {
        initValues(child, dependency);
        return true;
    }

    float dVerticalScroll = dependency.getY() - mPreviousY;
    mPreviousY = dependency.getY();

    //going up
    if (dVerticalScroll <= 0 && child.getY() <= 0) {
        child.setY(0);
        return true;
    }

    //going down
    if (dVerticalScroll >= 0 && dependency.getY() <= mImageHeight)
        return false;

    child.setY( (int)(child.getY() + (dVerticalScroll * mYmultiplier) ) );

    return true;
}

[complete file for backdrop Image with parallax effect][4]

Напоследок: Пользовательское поведение BottomSheet
Чтобы выполнить 3 шага, сначала нужно понять, что поведение BottomSheetBehavior по умолчанию имеет 5 состояний: STATE_DRAGGING, STATE_SETTLING, STATE_EXPANDED, STATE_COLLAPSED, STATE_HIDDEN, а для поведения Google Maps необходимо добавить среднее состояние между свернутым и развернутым: STATE_ANCHOR_POINT.
Я безуспешно пытался расширить значение bottomSheetBehavior по умолчанию, поэтому я просто скопировал и вставил весь код и изменил то, что мне нужно.
Чтобы достичь того, о чем я говорю, выполните следующие шаги. :

  1. Создайте класс Java и расширьте его из CoordinatorLayout.Behavior<V>

  2. Скопируйте и вставьте код из файла BottomSheetBehavior по умолчанию в новый.

  3. Измените метод clampViewPositionVertical следующим кодом:

    @Override
    public int clampViewPositionVertical(View child, int top, int dy) {
        return constrain(top, mMinOffset, mHideable ? mParentHeight : mMaxOffset);
    }
    int constrain(int amount, int low, int high) {
        return amount < low ? low : (amount > high ? high : amount);
    }
    
  4. Добавить новое состояние

    публичный статический финал int STATE_ANCHOR_POINT = X;

  5. Измените следующие методы: onLayoutChild, onStopNestedScroll, BottomSheetBehavior<V> from(V view) и setState (необязательно)



public boolean onLayoutChild(CoordinatorLayout parent, V child, int layoutDirection) {
    // First let the parent lay it out
    if (mState != STATE_DRAGGING && mState != STATE_SETTLING) {
        if (ViewCompat.getFitsSystemWindows(parent) &&
                !ViewCompat.getFitsSystemWindows(child)) {
            ViewCompat.setFitsSystemWindows(child, true);
        }
        parent.onLayoutChild(child, layoutDirection);
    }
    // Offset the bottom sheet
    mParentHeight = parent.getHeight();
    mMinOffset = Math.max(0, mParentHeight - child.getHeight());
    mMaxOffset = Math.max(mParentHeight - mPeekHeight, mMinOffset);

    //if (mState == STATE_EXPANDED) {
    //    ViewCompat.offsetTopAndBottom(child, mMinOffset);
    //} else if (mHideable && mState == STATE_HIDDEN...
    if (mState == STATE_ANCHOR_POINT) {
        ViewCompat.offsetTopAndBottom(child, mAnchorPoint);
    } else if (mState == STATE_EXPANDED) {
        ViewCompat.offsetTopAndBottom(child, mMinOffset);
    } else if (mHideable && mState == STATE_HIDDEN) {
        ViewCompat.offsetTopAndBottom(child, mParentHeight);
    } else if (mState == STATE_COLLAPSED) {
        ViewCompat.offsetTopAndBottom(child, mMaxOffset);
    }
    if (mViewDragHelper == null) {
        mViewDragHelper = ViewDragHelper.create(parent, mDragCallback);
    }
    mViewRef = new WeakReference<>(child);
    mNestedScrollingChildRef = new WeakReference<>(findScrollingChild(child));
    return true;
}


public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, V child, View target) {
    if (child.getTop() == mMinOffset) {
        setStateInternal(STATE_EXPANDED);
        return;
    }
    if (target != mNestedScrollingChildRef.get() || !mNestedScrolled) {
        return;
    }
    int top;
    int targetState;
    if (mLastNestedScrollDy > 0) {
        //top = mMinOffset;
        //targetState = STATE_EXPANDED;
        int currentTop = child.getTop();
        if (currentTop > mAnchorPoint) {
            top = mAnchorPoint;
            targetState = STATE_ANCHOR_POINT;
        }
        else {
            top = mMinOffset;
            targetState = STATE_EXPANDED;
        }
    } else if (mHideable && shouldHide(child, getYVelocity())) {
        top = mParentHeight;
        targetState = STATE_HIDDEN;
    } else if (mLastNestedScrollDy == 0) {
        int currentTop = child.getTop();
        if (Math.abs(currentTop - mMinOffset) < Math.abs(currentTop - mMaxOffset)) {
            top = mMinOffset;
            targetState = STATE_EXPANDED;
        } else {
            top = mMaxOffset;
            targetState = STATE_COLLAPSED;
        }
    } else {
        //top = mMaxOffset;
        //targetState = STATE_COLLAPSED;
        int currentTop = child.getTop();
        if (currentTop > mAnchorPoint) {
            top = mMaxOffset;
            targetState = STATE_COLLAPSED;
        }
        else {
            top = mAnchorPoint;
            targetState = STATE_ANCHOR_POINT;
        }
    }
    if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
        setStateInternal(STATE_SETTLING);
        ViewCompat.postOnAnimation(child, new SettleRunnable(child, targetState));
    } else {
        setStateInternal(targetState);
    }
    mNestedScrolled = false;
}

public final void setState(@State int state) {
    if (state == mState) {
        return;
    }
    if (mViewRef == null) {
        // The view is not laid out yet; modify mState and let onLayoutChild handle it later
        /**
         * New behavior (added: state == STATE_ANCHOR_POINT ||)
         */
        if (state == STATE_COLLAPSED || state == STATE_EXPANDED ||
                state == STATE_ANCHOR_POINT ||
                (mHideable && state == STATE_HIDDEN)) {
            mState = state;
        }
        return;
    }
    V child = mViewRef.get();
    if (child == null) {
        return;
    }
    int top;
    if (state == STATE_COLLAPSED) {
        top = mMaxOffset;
    } else if (state == STATE_ANCHOR_POINT) {
        top = mAnchorPoint;
    } else if (state == STATE_EXPANDED) {
        top = mMinOffset;
    } else if (mHideable && state == STATE_HIDDEN) {
        top = mParentHeight;
    } else {
        throw new IllegalArgumentException("Illegal state argument: " + state);
    }
    setStateInternal(STATE_SETTLING);
    if (mViewDragHelper.smoothSlideViewTo(child, child.getLeft(), top)) {
        ViewCompat.postOnAnimation(child, new SettleRunnable(child, state));
    }
}


public static <V extends View> BottomSheetBehaviorGoogleMapsLike<V> from(V view) {
    ViewGroup.LayoutParams params = view.getLayoutParams();
    if (!(params instanceof CoordinatorLayout.LayoutParams)) {
        throw new IllegalArgumentException("The view is not a child of CoordinatorLayout");
    }
    CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) params)
            .getBehavior();
    if (!(behavior instanceof BottomSheetBehaviorGoogleMapsLike)) {
        throw new IllegalArgumentException(
                "The view is not associated with BottomSheetBehaviorGoogleMapsLike");
    }
    return (BottomSheetBehaviorGoogleMapsLike<V>) behavior;
}



ссылка на проект дыры, где вы можете увидеть все настраиваемые поведения

примечание 3: в следующий раз добавьте комментарий с вежливой просьбой изменить ответ или спросите, почему этот ответ имеет НЕКОТОРЫЕ равные вещи, чем другие мои ответы на ту же тему, ПРЕЖДЕ чем закрыть его или пометить как дублированный.

А вот как это выглядит
[CustomBottomSheetBehavior ]

person MiguelHincapieC    schedule 27.05.2016
comment
Иногда я получаю прозрачную панель уведомлений, и это выглядит ужасно. Есть идеи, как это исправить? Скриншот: imgur.com/a/ng311 - person Taha Rushain; 03.12.2016
comment
мы работаем, чтобы исправить это (у меня такая же проблема). Оставайтесь с нами с github. - person MiguelHincapieC; 03.12.2016
comment
Здравствуйте, ваша ссылка на complete file for backdrop Image with parallax effect не работает. Не могли бы вы это исправить? Спасибо! - person David; 28.12.2016
comment
@David Ty за сообщение о неработающей ссылке, я исправил ее. Скажи мне, если тебе нужно что-то еще. - person MiguelHincapieC; 28.12.2016
comment
@MiguelHincapieC Спасибо! Потрясающая работа! - person David; 28.12.2016
comment
@David Добро пожаловать! Не стесняйтесь улучшать это в Github, если хотите. Я работаю над исправлением ошибки, связанной с одним из AppBarLayout. - person MiguelHincapieC; 29.12.2016
comment
@TahaRushain Я исправил, проверьте на GitHub :D - person MiguelHincapieC; 11.01.2017
comment
Что, если мне не нужно промежуточное положение привязки, а я хочу свободно перетаскивать нижний лист, чтобы он оставался в том положении, в котором был оставлен? По сути, я хотел бы исключить принудительные состояния STATE_EXPANDED и STATE_COLLAPSED, точно так же, как они есть на главном экране в Картах Google, где вы можете расширить нижний лист до любой точки, которую вы хотите, и она останется там. Как этого добиться? - person Alex Berdnikov; 31.05.2017
comment
@AlexBerdnikov привет. Карты Google имеют два режима просмотра: один, когда у вас выбрано какое-то место, а другой, когда вы просто нажимаете на пустое место (то, о котором вы говорите). Это можно сделать, начиная с проекта на GitHub, удалив почти все поведения (вы легко найдете их в отдельных файлах в по этой ссылке). Самое сложное — удалить STATES из BottomSheetBehaviorGoogleMapsLike.java. - person MiguelHincapieC; 31.05.2017
comment
@MiguelHincapieC Я проверил ваш пример и хочу поместить viewpager и listview в нижний лист. Я поместил оба в нижний лист, но прокрутка списка не работает. Как я могу это сделать? - person Vijay Rajput; 11.11.2017

Вы можете добиться эффекта, используя поведение макета координатора. Вам нужно будет расширить класс CoordinatorLayout.Behaviour и написать зависимость для одного из представлений в макете координатора, сохраняя изображение, содержащее представление, в качестве дочернего элемента. Для простоты вам нужно прикрепить пользовательское письменное поведение к изображению, содержащему представление. Чтобы получить помощь в написании пользовательских поведений, перейдите по ссылке Написание пользовательских поведений.

person Glenford Fernandes    schedule 20.05.2016
comment
Похоже вы за правильный путь, только бегло просмотрел ссылку, завтра почитаю в глубь. Но если вы хотите получить принятый ответ, вы должны привести хорошо объясненный пример или фрагмент кода или дополнить то, что у меня есть :) - person MiguelHincapieC; 20.05.2016
comment
Предоставленная ссылка содержит гораздо больше и множество фрагментов кода, объясняющих все подробно. Посмотрите, это легко понять. - person Glenford Fernandes; 20.05.2016
comment
Да, но, как сказал SO rulez, мы должны предоставить полный ответ вместо ссылки, потому что ссылка может в конечном итоге умереть. - person MiguelHincapieC; 20.05.2016
comment
приведенная выше ссылка дает мне некоторое представление о том, как я могу достичь того, чего хочу, но это далеко не ответ/руководство для этого. На самом деле ни у кого сегодня нет на него ответа xD - person MiguelHincapieC; 22.05.2016