Android使ViewPager随父活动布局滚动

时间:2018-06-21 15:41:15

标签: android android-fragments android-viewpager android-scrollview android-nestedscrollview

我有一个Android应用,正在其中尝试创建以下布局-

<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_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false">

        <LinearLayout
            android:id="@+id/activity_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:background="@color/tab_primary_background"
                android:layout_height="wrap_content"
                app:elevation="5dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    style="@style/Toolbar"
                    app:subtitleTextColor="@color/white"
                    app:title="@string/app_name"
                    app:titleTextAppearance="@style/Toolbar.TitleText"
                    app:titleTextColor="@color/white" />

            </android.support.design.widget.AppBarLayout>
            <ScrollView
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:fillViewport="true"
                android:layout_height="0dp">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:layout_height="wrap_content">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:orientation="vertical"
                        android:paddingStart="15dp"
                        android:paddingEnd="15dp"
                        android:paddingLeft="15dp"
                        android:paddingRight="15dp"
                        android:layout_marginTop="15dp"
                        android:layout_height="wrap_content">
                        <ImageView
                            android:layout_width="60dp"
                            android:src="@drawable/teacher_onboarding_step2"
                            android:layout_height="60dp"
                            android:layout_gravity="center"
                            android:textAlignment="center"
                            android:contentDescription="@string/take_test" />
                        <TextView
                            android:layout_width="match_parent"
                            android:id="@+id/tat_title_placeholder"
                            style="@style/TextAppearance.Text.Light"
                            android:textSize="14sp"
                            android:textAlignment="center"
                            android:padding="15dp"
                            android:text="@string/tat_title_placeholder"
                            android:layout_height="wrap_content" />
                        <com.mindorks.placeholderview.PlaceHolderView
                            android:layout_width="match_parent"
                            android:id="@+id/fixed_test_placeholder"
                            android:layout_height="wrap_content" />

                    </LinearLayout>
                    <android.support.design.widget.TabLayout
                        android:layout_width="match_parent"
                        android:id="@+id/tat_tab_layout"
                        app:tabIndicatorColor="@color/white"
                        app:tabSelectedTextColor="@color/white"
                        app:tabBackground="@color/tab_primary_background"
                        android:layout_height="wrap_content" />

                    <android.support.v4.view.ViewPager
                        android:id="@+id/tat_viewpager"
                        android:layout_width="match_parent"
                        android:layout_weight="1"
                        android:layout_height="0dp" />
                </LinearLayout>
            </ScrollView>
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        style="@style/Widget.Design.NavigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        app:headerLayout="@layout/drawer_header"
        app:itemBackground="@color/white"
        app:itemIconTint="@color/black_effective"
        app:itemTextColor="@color/black_effective"
        app:menu="@menu/drawer">

        <TextView
            android:id="@+id/tv_app_version"
            style="@style/TextStyle.Title.Sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:padding="5dp" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

因此,在这种布局中,您可以看到我想在某些视图下方添加TabLayout和ViewPager。现在,我面临的问题是我的ViewPager限于屏幕底部的可用空间,因此,只有viewpager是可滚动的,而不是完整的活动布局。底部的空间很小,无法查看Viewpager的内容。

因此,我想使应用栏下方的整个布局从顶部开始滚动,以便可以轻松方便地查看viewpager中的片段。

------------更新--------- 我尝试使用建议的嵌套滚动视图,setFillViewPort和折叠布局,但仍得到相同的结果。 使用Collapsing ToolbarLayout更新了布局xml-

<?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_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.urtutors.students.mvp.utils.MyNestedScrollView
            android:layout_width="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="vertical"
                android:layout_height="wrap_content">
                <com.urtutors.students.mvp.utils.WrapContentHeightViewPager
                    android:id="@+id/tat_viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </com.urtutors.students.mvp.utils.MyNestedScrollView>
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:background="@color/tab_primary_background"
            android:layout_height="wrap_content"
            app:elevation="5dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:paddingStart="15dp"
                    app:layout_collapseMode="parallax"
                    android:paddingEnd="15dp"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp"
                    android:layout_marginTop="15dp"
                    android:layout_height="wrap_content">
                    <ImageView
                        android:layout_width="60dp"
                        android:src="@drawable/teacher_onboarding_step2"
                        android:layout_height="60dp"
                        android:layout_gravity="center"
                        android:textAlignment="center"
                        android:contentDescription="@string/take_test" />
                    <TextView
                        android:layout_width="match_parent"
                        android:id="@+id/tat_title_placeholder"
                        style="@style/TextAppearance.Text.Light"
                        android:textSize="14sp"
                        android:textAlignment="center"
                        android:padding="15dp"
                        android:text="@string/tat_title_placeholder"
                        android:layout_height="wrap_content" />
                    <com.mindorks.placeholderview.PlaceHolderView
                        android:layout_width="match_parent"
                        android:id="@+id/fixed_test_placeholder"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    style="@style/Toolbar"
                    app:layout_collapseMode="pin"
                    app:subtitleTextColor="@color/white"
                    app:title="@string/app_name"
                    app:titleTextAppearance="@style/Toolbar.TitleText"
                    app:titleTextColor="@color/white" />
            </android.support.design.widget.CollapsingToolbarLayout>
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:id="@+id/tat_tab_layout"
                app:tabIndicatorColor="@color/white"
                app:tabSelectedTextColor="@color/white"
                app:tabBackground="@color/tab_primary_background"
                android:layout_height="wrap_content" />
        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        style="@style/Widget.Design.NavigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        app:headerLayout="@layout/drawer_header"
        app:itemBackground="@color/white"
        app:itemIconTint="@color/black_effective"
        app:itemTextColor="@color/black_effective"
        app:menu="@menu/drawer">

        <TextView
            android:id="@+id/tv_app_version"
            style="@style/TextStyle.Title.Sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:padding="5dp" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

我从其中复制的嵌套滚动视图-https://github.com/TheLittleNaruto/SupportDesignExample/tree/master/app/src/main/java/com/thelittlenaruto/supportdesignexample/customview

现在,viewpager正在滚动,但是我的动作栏标题不再可见。

有人可以建议对此布局进行任何更改以解决此问题吗?

1 个答案:

答案 0 :(得分:0)

我已尝试优化您的代码,如果我没有记错,您希望它可以滚动,则可以尝试以下代码。

    <?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_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/cl_root_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false">

        <LinearLayout
            android:id="@+id/activity_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                app:elevation="5dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?actionBarSize"
                    app:subtitleTextColor="@android:color/white"
                    app:title="@string/app_name"
                    app:titleTextColor="@android:color/white" />

            </android.support.design.widget.AppBarLayout>

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="15dp"
                        android:orientation="vertical"
                        android:paddingEnd="15dp"
                        android:paddingLeft="15dp"
                        android:paddingRight="15dp"
                        android:paddingStart="15dp">

                        <ImageView
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            android:layout_gravity="center"
                            android:contentDescription="@string/take_test"
                            android:src="@mipmap/ic_launcher"
                            android:textAlignment="center" />

                        <TextView
                            android:id="@+id/tat_title_placeholder"
                            style="@android:style/TextAppearance.Medium"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:padding="15dp"
                            android:text="@string/tat_title_placeholder"
                            android:textAlignment="center"
                            android:textSize="14sp" />

                        <View
                            android:id="@+id/fixed_test_placeholder"
                            android:layout_width="match_parent"
                            android:background="@color/colorAccent"
                            android:layout_height="400dp" />

                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="500dp"
                        android:orientation="vertical">
                        <android.support.design.widget.TabLayout
                            android:id="@+id/tat_tab_layout"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            app:tabMode="scrollable"
                            app:tabPadding="@dimen/s_padding"
                            app:tabBackground="@color/colorPrimaryDark"
                            app:tabIndicatorColor="@android:color/white"
                            app:tabSelectedTextColor="@android:color/white" />

                        <android.support.v4.view.ViewPager
                            android:id="@+id/tat_viewpager"
                            android:layout_width="match_parent"
                            android:background="@color/colorPrimaryDark"
                            android:layout_height="wrap_content" />


                    </LinearLayout>

                </LinearLayout>
            </ScrollView>
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        style="@style/Widget.Design.NavigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        app:headerLayout="@layout/nav_header_nav"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@android:color/black"
        app:itemTextColor="@android:color/black"
        app:menu="@menu/activity_nav_drawer">

        <TextView
            android:id="@+id/tv_app_version"
            style="@style/TextAppearance.AppCompat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:padding="5dp" />
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

我做了些小改动。

  1. 在使用scrollView时尽量不要使用权重,因为它们不起作用 彼此相处得很好。
  2. 我已将Tab布局包装在线性布局中 并赋予它静态高度(可以轻松替换)。

希望有帮助。