Android studio页面布局实现固定顶部和底部导航栏，中间可滑动

全栈浓发客

已于 2022-04-14 15:59:05 修改

阅读量1.4w

点赞数 15

CC 4.0 BY-SA版权

分类专栏： intellij idea 文章标签： android android studio intellij idea java 经验分享

于 2022-04-14 15:57:57 首次发布

本文链接：https://blog.csdn.net/hjjshua/article/details/124172951

intellij idea 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Android应用中实现固定顶部和底部导航栏，同时中间内容区域可滚动的布局。通过使用线性布局，开发者可以轻松创建这种常见且用户体验良好的界面设计。示例代码详细展示了如何布局按钮和ScrollView，帮助初学者快速掌握技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 开发页面布局实现固定顶部和底部导航栏，中间可滑动

大家好 I am HYJones
相信大家在学习Android开发的时候是不是想过也想做出高大尚的页面那你算是来对地方啦
下面将传授大家的秘籍就是 Android 页面布局实现固定顶部和底部导航栏
大家有没有发现我们平常使用的软件都是固定顶部和底部的菜单栏的，而中间的部分是可以上下滑动的。这样软件的界面就会比较使用而且有b格。
如果你也想实现这样的效果，看啦这篇文章你也可以轻松实现，全是基础知识，只用线性布局即可实现。
先看一下效果,体验一下快感。

在这里插入图片描述
页面颜色多是为啦看的更明白
直接上源码
activity_main.xml

<!--        android:orientation="vertical"      设置页面垂直布局（ 从上至下的排列）--> 
  <!--      android:orientation="horizontal"    设置页面水平布局（ 从左至右的排列） --> 


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
<!--总体布局-->
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">      


<!--    固定顶部-->
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#F1E60909"
            android:orientation="horizontal"   
            tools:ignore="MissingConstraints">
        <Button
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
        <Button
                android:background="@color/white"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
        <Button
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
        <Button
                android:background="@color/white"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>

    </LinearLayout>
    <!--    固定顶部-->

<!--中间可滑动布部分-->
    <ScrollView android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                tools:ignore="MissingConstraints">
        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                tools:ignore="MissingConstraints">
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/purple_200">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/teal_200">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/teal_700">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/white">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/purple_500">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/purple_200">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/black">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/purple_200">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/white">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/purple_500">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/teal_200">
            </LinearLayout>
            <LinearLayout android:layout_width="match_parent"
                          android:layout_height="100dp"
                          android:background="@color/purple_200">
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
    <!--中间可滑动布部分-->


<!--    底部固定-->
    <LinearLayout

            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#F1E60909"
            tools:ignore="MissingConstraints">
        <Button
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
        <Button
                android:background="@color/white"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
        <Button
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
        <Button
                android:background="@color/white"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
        </Button>
    </LinearLayout>
    <!--    底部固定-->
    
</LinearLayout>
<!--总体布局-->

</androidx.constraintlayout.widget.ConstraintLayout>

    <ScrollView>        </ScrollView>     //  页面滑动标签

用法
    

    <ScrollView android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                tools:ignore="MissingConstraints">
        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                tools:ignore="MissingConstraints">
               
               可滑动内容    


     </LinearLayout>

    </ScrollView>
    ```