Использование пользовательского поведения для создания нескольких "опорных точек" /позиций для 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"/>
Как я могу достичь этого с помощью пользовательского поведения?
Ответы
Ответ 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() {....
В эти дни я работаю над эффектом параллакса изображения и панелью инструментов.
И вот как это выглядит:
[
]