ViewPager and FrameLayout together

我找不到关于这个问题的合理信息，所以也许我完全做错了？

我正在尝试使用带有FrameLayout的Navigation Drawer来显示fragments。

但是，当单击抽屉上的一个项目时，我想显示一个包含 3 个片段的TabLayout

那么我需要使用什么架构呢？

充气抽屉布局的活动应该承载ViewPager和FrameLayout吗？

因此，例如单击抽屉上的设置，FrameLayout会显示一个设置片段，但是当点击事件时，FrameLayout内会出现一个带有 3 个选项卡的片段，显示不同的事件？

还是我应该以某种方式隐藏框架布局并在活动中显示ViewPager？

主要活动 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_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include layout="@layout/toolbar"/>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabTextAppearance="@style/TabCapsFalse"
            android:background="@color/teal"
            app:tabTextColor="@color/iron"
            app:tabSelectedTextColor="@color/tealfifty"
            app:tabIndicatorColor="@color/purple600"
            app:tabIndicatorHeight="3dp"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:id="@+id/nvView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/tealfifty"
    app:itemBackground="@drawable/drawer_item"
    app:itemTextColor="@color/drawer_item"
    app:itemIconTint="@color/drawer_item"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/navigation_view_items" />

您希望Drawer中的每个部分都导航到新Fragment。由于TabLayout只会出现在其中一个屏幕上，因此它将进入您的Activity调用的Fragments之一。例如，从activity_main.xml中删除TabLayout和ViewPager，并将它们放在新的片段中。将该Fragment添加到content_frame，一切就绪。

<?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_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <include layout="@layout/toolbar"/>
        </android.support.design.widget.AppBarLayout>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/content_frame"/>
    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/tealfifty"
        app:itemBackground="@drawable/drawer_item"
        app:itemTextColor="@color/drawer_item"
        app:itemIconTint="@color/drawer_item"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/navigation_view_items" />

我最终得到了一个带有抽屉布局和框架布局的 MainActivity 来显示片段。其中一个片段是我要显示的 3 个 TabLayout 片段的主机片段。ViewPager 在 HostFragment 布局中作为单个元素。ViewPager 和 TabLayout 的设置也在 HostFragment 中完成。

这是我的抽屉布局：

<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
    layout="@layout/appbar_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    <android.support.design.widget.NavigationView
        android:fitsSystemWindows="true"
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/tealfifty"
        app:itemBackground="@drawable/drawer_item"
        app:itemTextColor="@color/drawer_item"
        app:itemIconTint="@color/drawer_item"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/navigation_view_items" />
</android.support.v4.widget.DrawerLayout>

appbar_content.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <include layout="@layout/toolbar" />
    <android.support.design.widget.TabLayout
        android:visibility="visible"
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/teal"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/purple800"
        app:tabIndicatorHeight="4dp"
        app:itemIconTint="@color/tabicons"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/tealfifty"
        app:tabTextAppearance="@style/TabCapsFalse"
        app:tabTextColor="@color/iron" />
</android.support.design.widget.AppBarLayout>

<FrameLayout android:id="@+id/content_main_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:showIn="@layout/appbar_content"
    xmlns:tools="http://schemas.android.com/tools">
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:visibility="invisible"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/addico"
    app:layout_anchor="@id/content_main_frame"
    app:layout_anchorGravity="bottom|end" />

我

的主要问题之一是我只使用FrameLayout，或者只是一个NestedScrollView。现在我把后者放在FrameLayout里，我给FrameLayout一个scroll_behaviour，我想ScrollView继承了它，一切都像魅力一样！我花了很长时间才得出结论如何设置它！

相关内容

最新更新

热门标签：