如何在 Android Studio 中使用相對布局、框架布局、導航欄布局制作可滾動的活動？

Question

我想讓我的 Activity 滾動但只有Framelayout 。 我正在使用片段、一個 Toolbar 和一個BottomNavBar並且FrameLayout位於BottomNav和Toolbar 。

主菜單

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/MainGreen"
tools:context=".mainmenu">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />


/* --- main codes insert here --- */

<FrameLayout
    android:id="@+id/main_frame"
    android:layout_width="match_parent"
    android:layout_height="454dp"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/toolbar"
    android:layout_above="@+id/navigation">

</FrameLayout>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="@color/colorWhite"
    app:elevation="16dp"
    app:menu="@menu/navigation"
    app:itemIconTint="@drawable/navigation_color_selector"
    app:itemTextColor="@drawable/navigation_text_color_selector"/>
</RelativeLayout>

輸出

Answer 1

使用滾動視圖是 root 將所有布局放在滾動視圖中

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

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

    <!-- your code -->

</RelativeLayout>
</ScrollView>

Answer 2

將您的框架布局放在滾動視圖中。 使用這個片段。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/MainGreen"
tools:context=".mainmenu">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />


<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/toolbar"
android:layout_above="@+id/navigation"
>
/* --- main codes insert here --- */

<FrameLayout
android:id="@+id/main_frame"
android:layout_width="match_parent"
android:layout_height="454dp">

 </FrameLayout>

</ScrollView>
 <android.support.design.widget.BottomNavigationView
 android:id="@+id/navigation"
 android:layout_width="match_parent"
 android:layout_height="56dp"
 android:layout_alignParentBottom="true"
 android:layout_alignParentStart="true"
 android:layout_marginEnd="0dp"
 android:layout_marginStart="0dp"
 android:background="@color/colorWhite"
 app:elevation="16dp"
 app:menu="@menu/navigation"
 app:itemIconTint="@drawable/navigation_color_selector"
 app:itemTextColor="@drawable/navigation_text_color_selector"/>
</RelativeLayout>

Answer 3

試試這個，我修改了你的代碼，你只想要 FrameLayout 可滾動

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/MainGreen"
tools:context=".mainmenu">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />


/* --- main codes insert here --- */
/* fillViewport prperty added to show the full view in scroll*/
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:layout_above="@+id/navigation"
android:layout_alignParentStart="true"
android:fillViewport="true"
>
<FrameLayout
    android:id="@+id/main_frame"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    >

</FrameLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="@color/colorWhite"
    app:elevation="16dp"
    app:menu="@menu/navigation"
    app:itemIconTint="@drawable/navigation_color_selector"
    app:itemTextColor="@drawable/navigation_text_color_selector"/>
</RelativeLayout>

Answer 4

此源代碼包含帶抽屜布局的導航菜單、用於加載片段的框架布局和可以更改片段的底部導航菜單。

你可以跟着它。

//activity_main.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"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">

        <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:fitsSystemWindows="true">

            <android.support.design.widget.NavigationView
                android:id="@+id/nav_view"
                android:layout_width="@dimen/nav_drawer_width"
                android:layout_height="match_parent"
                android:layout_above="@+id/rl_logout"
                app:headerLayout="@layout/nav_header_main"
                app:menu="@menu/menu_main_drawer" />



        </RelativeLayout>

    </android.support.v4.widget.DrawerLayout>

// app_bar_main.xml

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:fitsSystemWindows="true"
        tools:context=".Activities.ActivityMain">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/home_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:theme="@style/AppTheme.AppBarOverlay">


            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.AppBarOverlay">

              <include layout="@layout/common_toolbar"/>

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

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



        <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/navigation"
            android:layout_below="@+id/home_app_bar"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"></FrameLayout>


        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            android:background="@color/colorPrimary"
            android:foreground="?attr/selectableItemBackground"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/navigation" />

    </RelativeLayout>

//nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/view_container"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:gravity="bottom"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="vertical"
        android:padding="@dimen/activity_horizontal_margin">

        <ImageView
            android:id="@+id/img_profile"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/profile_height"
            android:layout_gravity="center"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:src="@drawable/agreeta_logo" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:layout_gravity="center"
            android:textColor="@color/colorPrimaryDark"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView
            android:id="@+id/website"
            android:textColor="@color/light_black"
            android:layout_width="wrap_content"
            android:text="@string/website"
            android:layout_gravity="center"
            android:layout_height="wrap_content" />

    </LinearLayout>


</RelativeLayout>

//menu_main_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/home_icon"
            android:title="@string/nav_home" />
    </group>
    <group android:checkableBehavior="single">
    <item
        android:title="Order History"
        android:icon="@drawable/shopping_cart_green"
        android:id="@+id/menu_order">

    </item>
    </group>

</menu>