滚动时菜单项与页脚重叠

【问题标题】：The menu item is overlapping by footer when scrolling滚动时菜单项与页脚重叠
【发布时间】：2018-02-28 03:48:51
【问题描述】：

我有带有页眉、菜单和页脚的活动。 如果我将屏幕的方向更改为水平以便出现滚动，则页脚将与最后一个菜单项（button6）重叠。如果我点击页脚，就会触发 Button6 的处理程序。

如何使页脚不与菜单项重叠并且我可以看到所有菜单项？

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context="com.test.test.MainMenuActivity">

<LinearLayout
    android:background="@color/colorMainWhite"
    style="@style/root_layout">

    <!--- Header-->
    <include layout="@layout/content_header"/>
    <include layout="@layout/content_subheader"/>

    <!--- Menu-->
    <ScrollView
        android:id="@+id/myview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/InfoLayout"
        android:paddingTop="@dimen/size_15px"
        android:orientation="vertical"
        style="@style/los_lo_info_item">
        <TextView
            android:id="@+id/tvNL1"
            tools:text="test"
            style="@style/tvs_lo_text_32_bold_ellipsized"/>
        <TextView
            android:id="@+id/tvNL2"
            tools:text="test"
            style="@style/tvs_lo_text_26_ellipsized"/>
    </LinearLayout>


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">
        <LinearLayout
            android:id="@+id/button1"
            style="@style/los_lo_mainmenu_item">
            <ImageView
                style="@style/icon_default_size_center"
                android:src="@drawable/icon_1"/>
            <TextView
                style="@style/tvs_lo_text_mainmenu_button"
                android:text="@string/title_item_1"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/button2"
            style="@style/los_lo_mainmenu_item">
            <ImageView
                style="@style/icon_default_size_center"
                android:src="@drawable/icon_2"/>
            <TextView
                style="@style/tvs_lo_text_mainmenu_button"
                android:text="@string/title_item_2"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/button3"
            style="@style/los_lo_mainmenu_item">
            <ImageView
                style="@style/icon_default_size_center"
                android:src="@drawable/icon_3"/>
            <TextView
                style="@style/tvs_lo_text_mainmenu_button"
                android:text="@string/title_item_3"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/button4"
            style="@style/los_lo_mainmenu_item">
            <ImageView
                style="@style/icon_default_size_center"
                android:src="@drawable/icon_4"/>
            <TextView
                style="@style/tvs_lo_text_mainmenu_button"
                android:text="@string/title_item_4"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/button5"
            style="@style/los_lo_mainmenu_item">
            <ImageView
                style="@style/icon_default_size_center"
                android:src="@drawable/icon_5"/>
            <TextView
                style="@style/tvs_lo_text_mainmenu_button"
                android:text="@string/title_item_5"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/button6"
            style="@style/los_lo_mainmenu_item">
            <ImageView
                style="@style/icon_default_size_center"
                android:src="@drawable/icon_6"/>
            <TextView
                style="@style/tvs_lo_text_mainmenu_button"
                android:text="@string/title_item_6"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
    </ScrollView>
</LinearLayout>
<!--- Footer-->
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:gravity="bottom">
    <LinearLayout
        android:paddingTop="@dimen/size_20px"
        android:paddingBottom="@dimen/size_20px"
        android:background="@color/colorBgLightGrey"
        android:layout_width="match_parent"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content">
        <ImageView
            android:src="@drawable/icon_logos_ips"
            style="@style/ips_icons_style"/>
    </LinearLayout>
</LinearLayout>

新：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context="com.test.test.MainMenuActivity">

<RelativeLayout
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <include
        android:id="@+id/layout_content_header"
        layout="@layout/content_header"/>
    <include
        android:id="@+id/layout_content_subheader"
        android:layout_below="@id/layout_content_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/content_subheader"/>

    <!--- Menu-->
    <ScrollView
        android:id="@+id/myview"
        android:layout_width="match_parent"
        android:layout_below="@id/layout_content_subheader"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <LinearLayout
                android:id="@+id/merchantInfoLayout"
                android:paddingTop="@dimen/size_15px"
                android:orientation="vertical"
                style="@style/los_lo_merchant_info_item">
                <TextView
                    android:id="@+id/tvNL1"
                    tools:text="test"
                    style="@style/tvs_lo_text_32_bold_ellipsized"/>
                <TextView
                    android:id="@+id/tvNL2"
                    tools:text="test"
                    style="@style/tvs_lo_text_26_ellipsized"/>
            </LinearLayout>


            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical">
                <LinearLayout
                    android:id="@+id/button1"
                    style="@style/los_lo_mainmenu_item">
                    <ImageView
                        style="@style/icon_default_size_center"
                        android:src="@drawable/icon_1"/>
                    <TextView
                        style="@style/tvs_lo_text_mainmenu_button"
                        android:text="@string/title_item_1"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/button2"
                    style="@style/los_lo_mainmenu_item">
                    <ImageView
                        style="@style/icon_default_size_center"
                        android:src="@drawable/icon_2"/>
                    <TextView
                        style="@style/tvs_lo_text_mainmenu_button"
                        android:text="@string/title_item_2"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/button3"
                    style="@style/los_lo_mainmenu_item">
                    <ImageView
                        style="@style/icon_default_size_center"
                        android:src="@drawable/icon_3"/>
                    <TextView
                        style="@style/tvs_lo_text_mainmenu_button"
                        android:text="@string/title_item_3"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/button4"
                    style="@style/los_lo_mainmenu_item">
                    <ImageView
                        style="@style/icon_default_size_center"
                        android:src="@drawable/icon_4"/>
                    <TextView
                        style="@style/tvs_lo_text_mainmenu_button"
                        android:text="@string/title_item_4"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/button5"
                    style="@style/los_lo_mainmenu_item">
                    <ImageView
                        style="@style/icon_default_size_center"
                        android:src="@drawable/icon_5"/>
                    <TextView
                        style="@style/tvs_lo_text_mainmenu_button"
                        android:text="@string/title_item_5"/>
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/button6"
                    style="@style/los_lo_mainmenu_item">
                    <ImageView
                        style="@style/icon_default_size_center"
                        android:src="@drawable/icon_6"/>
                    <TextView
                        style="@style/tvs_lo_text_mainmenu_button"
                        android:text="@string/title_item_6"/>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:gravity="bottom">
        <LinearLayout
            android:paddingTop="@dimen/size_20px"
            android:paddingBottom="@dimen/size_20px"
            android:background="@color/colorBgLightGrey"
            android:layout_width="match_parent"
            android:gravity="center_horizontal"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/icon_logos_ips"
                style="@style/ips_icons_style"/>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

【问题讨论】：

    标签： android android-layout android-studio scrollview android-linearlayout


    【解决方案1】：

    将这些添加到ScrollView 将起作用

    android:layout_weight="1"

    使用android:layout_weight 并且LinearLayout 有android:orientation="vertical"，将页脚保持在ScrollView 下方

    检查布局：

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

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

        <!--- Header-->
        <include layout="@layout/content_header" />

        <!--- Menu-->
        <ScrollView
            android:id="@+id/myview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">

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

                <LinearLayout
                    android:id="@+id/InfoLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingTop="15dp">

                    <TextView
                        android:id="@+id/tvNL1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        tools:text="test" />

                    <TextView
                        android:id="@+id/tvNL2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        tools:text="test" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:id="@+id/button1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_1" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_2" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_3" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_4" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_5" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_6" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button7"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_7" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button8"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_8" />
                    </LinearLayout>

                </LinearLayout>
            </LinearLayout>
        </ScrollView>

        <!--- Footer-->
        <include layout="@layout/content_subheader" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

    这是你的content_subheader.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="bottom"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:gravity="center_horizontal"
        android:paddingBottom="20px"
        android:paddingTop="20px">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />
    </LinearLayout>
</LinearLayout>

    注意：我已经从布局中删除了所有样式，因为我没有它的属性

    新的：

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:id="@+id/mainLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!--- Header-->
        <include
            android:id="@+id/header"
            layout="@layout/header_layout" />

        <!--- Menu-->
        <ScrollView
            android:id="@+id/myview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/header"
            android:layout_weight="1"
            android:orientation="vertical">

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

                <LinearLayout
                    android:id="@+id/InfoLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingTop="15dp">

                    <TextView
                        android:id="@+id/tvNL1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        tools:text="test" />

                    <TextView
                        android:id="@+id/tvNL2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        tools:text="test" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:id="@+id/button1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_1" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_2" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_3" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_4" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_5" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_6" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button7"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_7" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/button8"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/ic_action_hardware_keyboard_arrow_left" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="title_item_8" />
                    </LinearLayout>

                </LinearLayout>
            </LinearLayout>
        </ScrollView>

        <!--- Footer-->
        <include layout="@layout/footer_layout" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

    【讨论】：

    • 对于水平方向我的问题解决了。谢谢！但是在垂直方向上，页脚应该在屏幕的底部，但它粘在了 ScrollView 上。 ScrollView 和 Footer 之间必须是垂直方向的空白区域。我该怎么做？
    • 我做到了。请帮助解决垂直方向问题。
    • 请尝试stackoverflow.com/questions/43672004/…，如果您卡在任何地方，请告诉我
    • 我通过RelativeLayout改变了CoordinatorLayout并添加到Footer android:layout_alignParentBottom="true"。但一切都没有改变。请看代码：codeshare.io/5M9Jpn
    • 没有。不要更改 CoordinatorLayout 保留它，因为它只是将第一个线性布局更改为 RelativeLayout
    猜你喜欢
    • 1970-01-01
    • 2013-09-09
    • 1970-01-01
    • 1970-01-01
    • 2023-02-10
    • 1970-01-01
    • 2020-10-02
    • 2019-08-13
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode