我正在尝试使用与搜索着陆页中的Google地图应用类似的折叠工具栏。也就是说,有三个"锚点"或职位。取代地图,我会有一张照片。
最好,应用程序应在这些位置之间快照。
截至目前,我的布局基本上正常。
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"/>
如何使用自定义行为实现此目的?
答案 0 :(得分:8)
根据您想要实现的目标,您可能想尝试SlidingUpPanelLayout(可以在Github找到)。它拥有您似乎需要的一切:
umanoAnchorPoint
属性(基于百分比),或者 - 如果您需要更复杂的锚点计算,例如取决于ImageView高度 - 使用setAnchorPoint
方法。umanoPanelHeight
属性或setPanelHeight
方法进行自定义。您可以在上面链接的Github自述文件中找到更多信息。
答案 1 :(得分:5)
您在问题中提到的内容实际上不是CollapsingToolbar
,而是可伸展的BottomSheet
。不幸的是,Android sdk还没有为我们提供任何东西(尽管谷歌已经在自己的应用程序中使用它们了。)
BottomSheet是一个Android组件,它提供了一个可以忽略的视图 从屏幕的底部。 BottomSheet可以是一个有用的替代品 对于对话框和菜单,但可以保存任何视图,以便用例 层出不穷。此存储库包含BottomSheet组件本身但是 还包括一组底部显示的常见视图组件 片。它们位于commons模块中。
另一方面,一些不错的家伙已经非常友好地开发足够近的库并在GitHub上分享它们供我们使用。它们接近Google使用的BottomSheet
组件。
与您想要的最匹配的是这一个 - Flipbard/BottomSheet - 检查此页面上“公共组件”部分下的图像。 (其中一个优点是Flipboard已经在生产中使用了一段时间,因此经过全面测试。)
这是另一个最小的BottomSheet库 - soarcn/BottomSheet,但它只允许可点击的图标。您可以获得源并根据您的需要进行自定义。但是,Flipboard中的第一个是更接近的匹配,因为它可以容纳任何类型的视图,并且更加可定制。
按照以上两个GitHub链接查看示例,设置说明和源代码。
答案 2 :(得分:2)
我不是专家,但请在Github上查看此实现。使用修改后的Android SlidingUpPanel。实现Foursquare就像地图animation.it可能对你有所帮助。
答案 3 :(得分:2)
更新: Look at this answer if you are looking for all google maps behaviors
回答你的问题
如何使用自定义行为实现此目的? /使用自定义行为创建多个“锚点”/位置......
Google地图使用的是app:layout_behavior
中的BottomSheetBehavior,以显示以折叠模式启动的内容。它不是崩溃的地图,谷歌地图有一个背景图像/工具栏,具有一些视差效果。
您可以通过以下步骤实现您想要修改默认BottomSheetBehavior
以增加一个属性的内容:
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
(可选)
我将添加修改后的方法和link to the example project
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() {....
我当时正在处理图像视差效果和工具栏。
以下是它的外观:
[]