- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这个布局(代码在底部),其中包含顶部的 CollapsingToolBarLayout 和底部的 NestedScrollView。
当我向上滚动时,折叠工具栏将开始折叠,然后 ScrollView 将首先与折叠工具栏一起向上滚动,然后进入折叠工具栏的后面。
我想在折叠工具栏中有一些动画(向上滚动时图像向左滑动,向下滚动时向后滑动)。现在的问题是:有时,当我向上滚动时,图像不会向左滑动。当它向左滑动时,我向下滚动时,它不会向后滑动。
我通过 AppBarLayout
的 onOffsetChanged
和 NestedScrollView
的 OnTouchListener
触发这些动画。
// People image slide left when user scrolls up on the scroll view
mScrollView.setOnTouchListener(scrollViewTouchListener);
// People image slide back when app bar is almost expanded
mAppBar.addOnOffsetChangedListener(appBarOffsetChangedListener);
// OnOffsetChangedListener for the AppBarLayout
private AppBarLayout.OnOffsetChangedListener appBarOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
// If the app bar is almost expanded and people image slided left, make it slide back
if ((offset > -20 || offset == 0) && mPeopleSlidedLeft) {
mPeopleImage.animate().setDuration(animationTime)
.translationX(originalPeoplePosition[0]);
mPeopleSlidedLeft = false;
}
}
};
// Touch listener for the scroll view
private View.OnTouchListener scrollViewTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
float y = event.getY();
if (event.getAction() == MotionEvent.ACTION_MOVE) {
float dy = y - mPreviousY;
// if user scrolls up and people image hasn't slided left,
if (dy < -1 && mPeopleSlidedLeft == false) {
DisplayMetrics dm = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
int xDest = dm.widthPixels / 2;
xDest += mPeopleImage.getMeasuredWidth() / 2;
mPeopleImage.animate().setDuration(animationTime)
.translationX(originalPeoplePosition[0] - xDest);
}
}
mPeopleSlidedLeft = true;
mPreviousY = y;
return false;
}
};
请注意, ScrollView 的 setOnScrollChangeListener 将不起作用,因为它不会在工具栏折叠时触发。
布局的简化版本如下:
<?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">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/collapsing_toolbar_margin"
android:fitsSystemWindows="true"
android:minHeight="120dp"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_collapseMode="parallax">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height"
android:layout_gravity="center_horizontal"
app:contentInsetEnd="16dp"
app:contentInsetStart="16dp"
app:elevation="0dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="@color/white"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
<include
layout="@layout/notification"
android:layout_width="match_parent"
android:layout_height="@dimen/active_inactive_time_height"
android:layout_gravity="bottom"
app:layout_anchorGravity="bottom|right"
android:layout_marginBottom="@dimen/bottom_navigation_bar_offset" />
</android.support.design.widget.CoordinatorLayout>
有人可以看看吗?我将非常感激!
最佳答案
我不确定您为什么要在 NestedScrollView
上使用触摸监听器,如果我理解正确的话,您希望有两种状态:
这两种状态之间的转换应该是将人物图像滑出屏幕左侧?
这应该可以单独使用 AppBarLayout.OnOffsetChangedListener
来实现,您可以使用偏移量的变化来“动画化” View 的移动,而不是设置触发点,这可以使实现更加流畅.
类似于:
private AppBarLayout.OnOffsetChangedListener appBarOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
float fraction = ((float) Math.abs(verticalOffset)) / appBarLayout.getTotalScrollRange();
int peopleRange = mPeopleImage.getRight();
mPeopleImage.setTranslationX(fraction * peopleRange * -1);
}
};
我添加了一些时间和滑动速度的配置。在这种情况下,它会等到标题折叠 25%,然后再滑动,图像向左移动的速度是原来的两倍。您可以使用这些数字来获得您要找的东西。
private AppBarLayout.OnOffsetChangedListener appBarOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
float fraction = ((float) Math.abs(verticalOffset)) / appBarLayout.getTotalScrollRange();
int peopleRange = mPeopleImage.getRight();
float delay = 0.25f;
float speed = 2f;
fraction = Math.max(fraction - delay, 0f) * speed;
mPeopleImage.setTranslationX(fraction * peopleRange * -1);
}
};
关于android - 检测 AppBarLayout 和 NestedScrollView 的滚动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49418026/
所以我有一个 Fragment,它使用 CoordinatorLayout,里面有一个 NestedScrollView。 NestedScrollView 内部是一个 ViewPager。 View
我知道这个问题很多,但我尝试了几乎所有的解决方案,即使是神奇的解决方案显然对我不起作用!:(父级是 NestedScrollview,在子级中还有另一个嵌套 ScrollView ) pare
我想在滚动式 Instagram 时将 TabLayout 固定在顶部。有没有办法在 NestedScrollView 中执行此操作? NestedScrollView -- ConstraintLa
我的构造中有两个项目,一个是静态项目,另一个是带有可拖动项目的回收 View 。两种类型的 View 都由 LinearLayout 包装。 LinearLayout 由 NestedScrollVi
java.lang.NoSuchMethodError: No virtual method setOnScrollChangeListener(Landroidx/core/widget/Neste
我有一个带有RecyclerView的PagedListAdapter。 当我将RecyclerView放入NestedScrollView中时,PagedList无法计算列表的末尾,因此start请
我将 CollapsingToolbarLayout 与 NestedScrollView 结合使用,在 NestedScrollView 内我有一个项目列表,但在执行中我无法滚动所有项目。 在我的示
我试图将后退按钮保留在页面底部,并让嵌套 ScrollView 填充页面底部统计信息相对布局和后退按钮下方的空间。它目前适合顶部的统计信息,但由于它适合页面,所以将后退按钮推离了页面底部。
所以我在 styles.xml 中为 AppTheme NoActionBar 设置,因为我只希望在几个 Activites 中使用工具栏,并且我还创建了包含两个项目的 post_details_me
这是我 Activity 中的原始布局: 看起来不错: 内容布局文件包含一个 TableLayout。 由于内容可能很长,我添加了一个 Neste
我使用 https://github.com/nhaarman/ListViewAnimations实现拖放,滑动删除等。但是有问题第一个图像可以滚动列表但不能拖放(它下降到相同的位置并且不进入onI
我在 CoordinatorLayout 中有一个 NestedScrollView。在 NestedScrollView 中,我有一个包含一些组件的 LinearLayout,其中一些是按钮。组件没
我注意到 CoordinatorLayout 内的 NestedSCrollView 中的内容如果没有填满整个屏幕,则始终对齐在底部。我该如何解决? 我的代码:
我正在使用 NestedScrollView 以达到某些目的 similar to this . 更新 这是我的 repo . 我发现当移动设备变成横向滚动时,我无法看到按钮或底部的灰色 View 。
我似乎找不到 nestedScrollView 的选项使其水平而不是垂直。我一直在使用 HorizontalScrollView 但我想切换到嵌套。有没有办法做到这一点?搜索文档我没有看到它,但它
我的 xml 由一个约束布局组成。这里面有 2 个按钮和 1 个嵌套的 ScrollView 。 ScrollView 中有各种元素,包括回收 View 。我希望回收 View 不滚动,而只滚动嵌套的
我在 NestedScrollview 中有一个 Recyclerview.. 一切正常,除了一个 thig。我在 NestedScrollview 中共有三个 View ,前两个是 LinearLa
我在我的 fragment 中使用 NestedScrollView。在我的 xml 中的 RelativeLayout 但它没有覆盖整个屏幕高度。 下面是我的代码 - 运行代码时,只有黑色
在我的应用程序中,我需要复杂的 ScrollView 。作为垂直列表和动画标题中的水平列表。下面的代码是一个极简示例,可以使我的问题在 iOS 设备上重现。 我在 flutter 中遇到嵌套 Scro
我正在使用带有标题图像的 CoordinatorLayout 制作详细 View ,我想在具有 NestedScrollView 的 View 中应用圆角边缘,如下所示: 我正在使用带有标题图像的 C
我是一名优秀的程序员,十分优秀!