如何将页脚垂直固定在屏幕底部？

【问题标题】：How to anchor the Footer at the bottom of the screen in vertical orientation?如何将页脚垂直固定在屏幕底部？
【发布时间】：2017-09-21 09:44:37
【问题描述】：

我有带有页眉、菜单和页脚的活动。在屏幕的垂直方向上，页脚位于ScrollView 的底部，但它应该固定在屏幕的底部。 ScrollView 和垂直方向的页脚之间必须有一个空闲空间。

如何让Footer垂直固定在屏幕底部？

<?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 with scroll-->
    <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="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>

     <!--- 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>
</LinearLayout>
 </android.support.design.widget.CoordinatorLayout>

【问题讨论】：

  • 尝试设置：android:layout_alignParentBottom="true"
  • @AndersKink 他没有使用RelativeLayout 所以这行不通
  • 没错，没看到
  • Based on this answer，您在滚动视图上缺少android:fillViewport="true" 属性
  • 请张贴一张想要输出的图片，风格 attr 很难理解你想要做什么

标签： android android-layout scrollview android-linearlayout


【解决方案1】：

您必须通过在其上设置android:layout_weight="1" 来扩展您的上方视图以填充剩余空间。这会将您的最后一个视图推到底部。

查看this link

下面是你的布局：

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/cardview_dark_background"
            android:orientation="vertical">

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

        <!--- Menu with scroll-->
        <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="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/merchantInfoLayout"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingTop="5dp">

                    <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_6" />
                    </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_6" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </ScrollView>

        <!--- Footer-->
        <!--<include layout="@layout/footer_layout" />-->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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>

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

【讨论】：

  • 菜单上方的图像布局是什么？
  • 我没有包括布局但添加了代码。您可以更改但保持高度和宽度相同
  • @AndrewEfremov 它在我这边运行良好。你遇到什么问题
  • 什么意思？
【解决方案2】： 
I have made some edits to your original layout. The footer will appear at

底部现在不与滚动视图的内容重叠。 It will appear like this:

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/cardview_dark_background"
        android:orientation="vertical"
        android:id="@+id/ll_top">

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

    <!--- Menu with scroll-->
    <ScrollView
        android:id="@+id/myview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/ll_top"
        android:layout_above="@+id/footer"
        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:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="5dp">

                <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_6" />
                </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_6" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

    <!--- Footer-->
    <!--<include layout="@layout/footer_layout" />-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/footer"
        android:layout_alignParentBottom="true">

        <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>

</RelativeLayout>

【讨论】：

  • 我这样做了。现在，如果我将屏幕的方向更改为水平以便出现滚动，那么页脚将与最后一个菜单项 (button6) 重叠。
  • 你是否设置了android:id="@+id/footer"，作为页脚布局的id。因为它不应该与滚动视图中的所有内容重叠，因为我们在滚动视图中使用 android:layout_above="@+id/footer"。
  • 非常感谢。您的解决方案有效，但我更喜欢 @Amit Vaghela 的选项。
  • 嗯，很高兴您找到了解决方案。快乐编码:)
猜你喜欢
  • 2013-01-29
  • 1970-01-01
  • 2011-10-25
  • 2015-08-26
  • 2013-03-15
  • 2017-06-10
  • 1970-01-01
  • 2023-03-08
  • 2013-04-29
相关资源
最近更新 更多
热门标签
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