协调器布局滚动表现奇怪

时间:2016-09-23 07:11:05

标签: android android-coordinatorlayout android-design-library smooth-scrolling

我创建了一个带有协调器布局的片段布局。附件是页面Fragment Layout Image

的屏幕截图

现在,在滚动应用程序时,页面无法平滑滚动并在图像后卡住,然后再次滚动。向上滚动时也会出现同样的情况。

我面临的另一个问题是以编程方式滚动到页面顶部。我能够到达嵌套滚动视图的顶部但是无法通过代码滚动到整个页面的顶部。请帮忙。这是我的布局xml结构:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    tools:context=".fragments.InsightsFragment">


    <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/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/main.appbar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/main.collapsing"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/main.backdrop"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/dummy_img"
                        android:contentDescription="@string/insight_image"
                        android:fitsSystemWindows="true"
                        android:scaleType="centerCrop"
                        app:layout_collapseMode="parallax" />

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/medium_overlay">
                    </RelativeLayout>

                    <TextView
                        android:id="@+id/insight_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:padding="16dp"
                        android:text="@string/insight_title"
                        android:textSize="28sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/insight_date"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentStart="false"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentTop="false"
                        android:padding="16dp"
                        android:text="@string/date" />

                    <TextView
                        android:id="@+id/insight_tag"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentRight="true"
                        android:background="@color/primary_overlay"
                        android:padding="16dp"
                        android:text="@string/tag"
                        tools:ignore="RelativeOverlap" />
                </RelativeLayout>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    tools:text="content"
                    android:id="@+id/insight_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:lineSpacingExtra="6dp"
                    android:padding="16dp"
                    android:text="@string/lorem"
                    android:textSize="16sp" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@android:color/darker_gray" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingBottom="60dp">


                    <RelativeLayout
                        android:id="@+id/previous_insight"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="16dp">

                        <TextView
                            android:id="@+id/previous"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:layout_alignParentStart="true"
                            android:layout_marginBottom="6dp"
                            android:text="@string/previous" />

                        <TextView
                            android:id="@+id/previous_insight_title"
                            android:layout_width="250dp"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:layout_alignParentStart="true"
                            android:layout_below="@+id/previous"
                            android:text="@string/previous_insight_title"
                            android:textSize="20sp" />
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentEnd="true"
                            android:layout_alignParentRight="true"
                            android:layout_below="@id/previous"
                            android:contentDescription="@string/left_arrow"
                            android:src="@drawable/ic_arrow_left" />

                    </RelativeLayout>

                    <RelativeLayout
                        android:id="@+id/next_insight"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:padding="16dp">

                        <TextView
                            android:id="@+id/up_next"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:layout_alignParentStart="true"
                            android:layout_marginBottom="6dp"
                            android:text="@string/up_next" />

                        <TextView
                            android:id="@+id/next_insight_title"
                            android:layout_width="250dp"
                            android:layout_height="wrap_content"
                            android:layout_alignParentLeft="true"
                            android:layout_alignParentStart="true"
                            android:layout_below="@+id/up_next"
                            android:text="@string/next_insight_title"
                            android:textColor="@color/colorPrimary"
                            android:textSize="20sp" />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentEnd="true"
                            android:layout_alignParentRight="true"
                            android:layout_below="@id/up_next"
                            android:contentDescription="@string/right_arrow"
                            android:src="@drawable/ic_arrow_right" />

                    </RelativeLayout>


                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/material_design_android_floating_action_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="16dp"
        android:paddingEnd="16dp"
        android:paddingLeft="0dp"
        android:paddingRight="16dp"
        android:paddingStart="0dp"
        fab:menu_animationDelayPerItem="55"
        fab:menu_backgroundColor="@color/white_overlay"
        fab:menu_buttonSpacing="0dp"
        fab:menu_colorNormal="@color/colorAccent"
        fab:menu_colorPressed="@color/colorAccent"
        fab:menu_colorRipple="#99d4d4d4"
        fab:menu_fab_size="normal"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_labels_colorNormal="#333"
        fab:menu_labels_colorPressed="#444"
        fab:menu_labels_colorRipple="#66efecec"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_position="left"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_textColor="#f2f1f1"
        fab:menu_labels_textSize="15sp"
        fab:menu_openDirection="up"
        fab:menu_shadowColor="#66aff198"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="4dp"
        fab:menu_showShadow="false">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_action_menu_item1"
            style="@style/MenuButtonsStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_font_size"
            fab:fab_label="Increase font" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_action_menu_item2"
            style="@style/MenuButtonsStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_favorite"
            fab:fab_label="Favorite" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/material_design_floating_action_menu_item3"
            style="@style/MenuButtonsStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_share"
            fab:fab_label="Share" />
    </com.github.clans.fab.FloatingActionMenu>



</FrameLayout>

1 个答案:

答案 0 :(得分:2)

对于您的第一个问题,我建议您查看所有图片的分辨率。如果它们太大了,可能就是造成怪异滚动的原因。

至于滚动到顶部,请参阅here