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

Использование пользовательского поведения для создания нескольких "опорных точек" /позиций для CollapsingToolbar

Я пытаюсь создать сворачивающуюся панель инструментов, похожую на приложение Google Maps на целевой странице поиска. То есть, есть три "точки привязки" или позиции. Вместо карты у меня будет фотография.

  • Панели инструментов рухнули (содержимое полноэкранного)

Полноэкранный

  • Средняя позиция

Half way

  • Панель инструментов расширена только с показом некоторого содержимого (стойкий нижний лист)

Все пути открыты

Предпочтительно приложение должно располагаться между этими позициями.

В настоящее время я использую макет в основном.

Два основных вопроса:

  • Перемещение внутри NestedScrollView работает неправильно. Он останавливает/прерывает, даже если он использует app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior". Я считаю, что это ошибка с AppBarLayout
  • Описанные выше опорные точки не реализованы.

Это мой макет:

Обратите внимание, что app:layout_behavior="@string/appbar_anchor_behavior"> является просто немодифицированным подклассом AppBarLayout.Behavior

<android.support.design.widget.CoordinatorLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/main_content"                                                         
 android:layout_width="match_parent"                                               
 android:layout_height="match_parent"                                                           
 android:background="@color/actions_bar_dark"                                                 
 android:fitsSystemWindows="true">


<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_anchor_behavior">

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll"
            android:fitsSystemWindows="true">

        <ImageView
                android:id="@+id/item_preview_thumb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:layout_centerInParent="true"
                app:layout_collapseMode="parallax"
                />

        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

<android.support.v4.widget.NestedScrollView
        android:id="@+id/contentRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <include layout="@layout/item_detail_content"/>


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

<android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_download"
        android:layout_margin="16dp"
        android:clickable="true"/>

Как я могу достичь этого с помощью пользовательского поведения?

4b9b3361

Ответ 1

На основе того, что вы хотите достичь, вы можете попробовать SlidingUpPanelLayout (который можно найти в Github). У него есть все, что вам кажется нужным:

  • Якорь:, чтобы достичь привязанных вами якорей, вам придется либо установить атрибут umanoAnchorPoint (который основан на процентах), либо - если вам нужно более сложное вычисление якоря, например. в зависимости от высоты ImageView - используйте метод setAnchorPoint.
  • Постоянный:, в отличие от нижних строчек, упомянутых выше, этот макет фактически должен быть постоянным. Высота панели при свертывании может быть настроена с помощью атрибута umanoPanelHeight или с помощью метода setPanelHeight.
  • Параллакс: не совсем уверен, соответствует ли реализация вашим потребностям, и если вам это нужно, но имеет базовую поддержку параллакса.

Дополнительную информацию вы можете найти в Readme on Github, которая связана выше.

Ответ 2

То, что вы упомянули в вопросе, на самом деле не является CollapsingToolbar, а растяжимым BottomSheet. К сожалению, пока нет возможности использовать android sdk для использования (хотя Google использует их уже в собственных приложениях).

BottomSheet - это Android-компонент, который представляет собой недопустимый вид из нижней части экрана. BottomSheet может быть полезной заменой для диалогов и меню, но может содержать любое представление, поэтому варианты использования бесконечный. Этот репозиторий включает сам компонент BottomSheet, но также включает в себя набор общих компонентов представления, представленных в нижней части лист. Они расположены в модуле общего доступа.

С другой стороны, некоторые хорошие парни были достаточно любезны, чтобы создавать достаточно тесные библиотеки и делиться ими на GitHub для использования. Они близки к компоненту BottomSheet, который использует Google.

Ближайшее совпадение с тем, что вам нужно, - это Flipbard/BottomSheet - проверьте изображения в разделе "Общие компоненты" на этой странице. (Один плюс это то, что было использовано в производстве на Flipboard какое-то время, так что он тщательно протестирован.)

Это еще одна минимальная библиотека BottomSheet - soarcn/BottomSheet, но она позволяет просто щелкнуть значки. Вероятно, вы можете получить источник и настроить его в соответствии с вашими потребностями. Но первый из Flipboard намного ближе, потому что он может содержать любой вид и более настраиваемый.

Следуйте каждой из двух вышеупомянутых ссылок GitHub, чтобы увидеть образцы, инструкции по установке и исходный код.

Ответ 3

Я не эксперт, но посмотрите на эту реализацию на Github. using модифицированный Android SlidingUpPanel. реализация Foursquare как map animation.it может помочь вам.

Ответ 4

Обновление: Посмотрите на этот ответ, если вы ищете все поведение карт Google

Отвечая на ваши вопросы

Как я могу достичь этого с помощью пользовательского поведения?/Использование пользовательского поведения для создания нескольких "опорных точек" /позиций...

В Google Картах используется метод BottomSheetBehavior в app:layout_behavior для отображения содержимого, которое запускается в режиме свертывания. Это не карта, которая обрушилась, карты Google имеют фоновое изображение/панель инструментов с некоторым эффектом параллакса.

Вы можете достичь того, что хотите изменить по умолчанию BottomSheetBehavior, добавив еще один stat со следующими шагами:

  • Создайте класс Java и расширьте его из CoordinatorLayout.Behavior<V>
  • Скопируйте код копии из файла BottomSheetBehavior по умолчанию в новый.
  • Измените метод 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);
    }
    
  • Добавить новое состояние

    public static final int STATE_ANCHOR_POINT = X;

  • Измените следующие методы: 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;
}



Вы даже можете использовать обратные вызовы с помощью behavior.setBottomSheetCallback(new BottomSheetBehaviorGoogleMapsLike.BottomSheetCallback() {....

В эти дни я работаю над эффектом параллакса изображения и панелью инструментов.

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