无法使用NestedScrollView顺利滚动AppBarLayout和折叠式工具栏 [英] Unable to scroll AppBarLayout and collapsing toolbar with NestedScrollView smoothly
本文介绍了无法使用NestedScrollView顺利滚动AppBarLayout和折叠式工具栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个Android应用程序，其中使用CoordinatorLayout，AppBarLayout和CollapsingToolbarLayout来使用折叠工具栏功能.
I am working on one android app in which I am using CoordinatorLayout, AppBarLayout and CollapsingToolbarLayout to use the collapse toolbar functionality.
我在布局中使用NestedScrollView在同一布局中展开和折叠AppBarLayout.当我尝试从屏幕中央向上滚动时，它不起作用，但是当我尝试从屏幕右上角向上滚动屏幕时，它平滑地滚动.
I am using NestedScrollView in layout to expand and collapse AppBarLayout in same layout. When I am trying to scroll up from center of the screen then it does not work but when I try to scroll up screen from right corner of the screen then it scrolls smoothly.
下面提到的是我的xml文件
Below mentioned is my xml file
layout.xml
layout.xml
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:paddingBottom="2dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:layout_gravity="fill_vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/fragment_back_color"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/new_recharge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:text="NEW PAYMENT"
android:textColor="@color/offer_name_text_color" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="@color/white"
android:paddingBottom="20dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="20dp">
<HorizontalScrollView
android:id="@+id/hsv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:fillViewport="true"
android:measureAllChildren="false"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/wallet_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/wallet_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/wallet_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="WALLET"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/prepaid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/prepaid_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/prepaid_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="PREPAID"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/postpaid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/postpaid_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/postpaid_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="POSTPAID"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/dth_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/dth_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/dth_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="DTH"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/landline_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/landline_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/landline_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="LANDLINE"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="20dp"
android:background="@color/white" />
<LinearLayout
android:id="@+id/datacard_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/datacard_recharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/datacard_recherge" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="DATACARD"
android:textColor="@color/offer_name_text_color"
android:textSize="12sp" />
>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/recent" />
<com.spiceladdoo.views.RobotTextviewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:text="RECENT"
android:textColor="@color/offer_name_text_color" />
</LinearLayout>
<ListView
android:id="@+id/recent_recharge_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp">
</ListView>
</LinearLayout>
<FrameLayout xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/recharge_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
tools:ignore="MergeRootFrame">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
理想的结果是，当我尝试从屏幕中心向上滚动时，它应该像从移动设备右上角向上滚动时一样灵巧.
The desired result is when I try to scroll up from center of the screen then it should work as smmoth as I scroll up from right corner of the mobile.
请观看下面提到的视频，以便更清楚地了解问题
Please watch below mentioned video to look at the problem more clearly
https://www.dropbox.com/s/gscfc8vfc7kkpxp/device-2015-12-30-160119.mp4?dl=0
推荐答案
我相信，我已将其钉牢:
I believe, I've nailed it:
您可以找到源代码 此处 -随时尝试；
You can find the source code here - feel free to try;
我以 google \ designlibdemo 为例.
这是我的Activity的样子:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<include layout="@layout/include_list_viewpager"/>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
它托管ViewPager:include_list_viewpager.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"
android:id="@+id/main_content"
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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/image"
android:src="@drawable/header_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<View
android:background="#AA50AA00"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:title=""
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:background="#50AA00"
app:tabMode="scrollable"
app:tabIndicatorColor="#FFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</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.design.widget.CoordinatorLayout>
CollapsingToolbarLayout主机Toolbar(app:layout_collapseMode="pin")及更高版本ImageView(app:layout_collapseMode="parallax").
CollapsingToolbarLayout hosts Toolbar (app:layout_collapseMode="pin") and above ImageView (app:layout_collapseMode="parallax").
ViewPager片段中托管的主机具有以下布局:
The hosted in the ViewPager Fragment has this layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:background="#DDD"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:src="@drawable/mobile"
android:layout_marginTop="2dp"
android:layout_width="16dp"
android:layout_height="16dp" />
<TextView
android:text="@string/prepaid_recharge"
android:layout_marginStart="16dp"
android:layout_gravity="center_vertical"
android:textColor="#000"
android:fontFamily="sans-serif-medium"
android:textSize="14sp"
android:textAllCaps="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
........
<ListView
android:id="@+id/recent_recharge_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
因此它具有这种行为app:layout_behavior="@string/appbar_scrolling_view_behavior"并填充ViewPort(android:fillViewport="true")
So it has this behaviour app:layout_behavior="@string/appbar_scrolling_view_behavior" and filling ViewPort (android:fillViewport="true")
实际上-这就是您所需要的. Fragment类是非常标准的:
And actually - that's all you need. Fragment class is very standard:
public class RechargeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.recharge_fragment, container, false);
}
}
Activity仍然很标准.
同样，您可以在 此处 中找到我的代码示例>.
Again, you can find my code example here.
NB！我发现它在模拟器上的效果很差(根本不流畅).
NB! I found it works pretty poor(not smooth at all) on the emulator.
我希望这会有所帮助.
这篇关于无法使用NestedScrollView顺利滚动AppBarLayout和折叠式工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
