简单实现多布局底部固定显示+中部滑动 仿Tab底部

最新推荐文章于 2024-04-09 07:40:22 发布
原创 最新推荐文章于 2024-04-09 07:40:22 发布 · 664 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#布局底部固定 #仿tab底部标题 #仿电商底部购物车 #布局中部滑动+底部固定

本文介绍如何实现底部布局固定显示，同时中部内容可滑动的效果，类似于电商应用的Tab底部标题栏。关键点包括：1) ScrollView内嵌线性布局；2) 使用android:layout_weight=“1”确保ScrollView占据适当空间；3) 设置android:gravity=“bottom”以使底部布局固定在底部。

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

如何布局底部固定显示！接下来直接上布局代码 重要的有3点 仔细看完 谢谢

在这里插入图片描述

这个效果类似底部TAB 但不需要那么复杂 接下来看代码

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

<ScrollView
    android:layout_weight="1"  //   这个属性是必须的  不然 底部布局会溢出
    android:layout_width="match_parent"
    android:layout_height="match_parent">
//ScrollView必须嵌套线性布局
    <LinearLayout    
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
        android:id="@+id/home_item_img"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

        <TextView
            android:id="@+id/home_item_sale_price"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="28dp"
            android:text="@string/cash_item_money"
            android:textColor="@color/appBackGround"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/home_item_price"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="2dp"
            android:text="@string/cash_item_money"
            android:textColor="@color/appBackGround"
            android:textSize="14dp" />

        <TextView
            android:id="@+id/home_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="2dp"
            android:text="@string/cash_item_money"
            android:textColor="@color/appBackGround"
            android:textSize="18dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="18dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="@string/home_yixuan" />

            <TextView
                android:id="@+id/home_size"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="aaa" />

        </LinearLayout>
        <!--分割线-->
        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:layout_marginTop="2dp"
            android:background="#e6e6e6" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="8dp"
                android:text="@string/home_songzhi" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:background="@drawable/go_to" />

            <TextView
                android:id="@+id/home_go_to"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:text="aaa" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:background="@drawable/right" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_weight="1"
                android:text="@string/home_pingjia"
                android:textColor="@color/appBackGround" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:text="@string/home_chakan"
                android:textColor="@color/appBackGround" />
        </LinearLayout>
        <!--分割线-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!--分割线-->
            <View
                android:layout_width="60dp"
                android:layout_height="1dp"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="2dp"
                android:background="@color/appBackGround" />
            <!--分割线-->
            <View
                android:layout_width="wrap_content"
                android:layout_height="1dp"
                android:layout_marginTop="2dp"
                android:background="#e6e6e6" />
        </LinearLayout>


    </LinearLayout>
</ScrollView>
//这里是底部布局
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="58dp" //设置高度
    android:orientation="horizontal" //水平布局
    android:gravity="bottom">  //这条属性也是必须要的  
    <LinearLayout
        android:id="@+id/bottom_hi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="22dp"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/kefu"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/kefu"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="28dp"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/shop_select"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/shop_title"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="38dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="32dp"
        android:background="@drawable/bt_shape"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:textColor="@color/light"
            android:text="@string/add_shop"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:paddingRight="5dp"
            android:textColor="@color/light"
            android:layout_marginLeft="18dp"
            android:text="@string/now_pay"/>
    </LinearLayout>
</LinearLayout>

到这里布局代码上完了 需要注意3点
1、ScrollView 必须嵌套 线性布局
2、android:layout_weight=“1” ScrollView属性中加入权重 这样才能把底部布局显示出来 不然会溢出
3、android:gravity=“bottom” 这个属性是底部 最外层布局加的 固定底部
在简单的给个布局



//滚动布局中的东西



//底部布局东西

</LinearLayout>
配置环境变量
qq_45685099的博客
10-14 618
配置环境变量 找到java文件夹 复制地址，让后打开高级系统设置里的环境变量，选择新建 如图，让后确认 再找到Java文件夹，新建如图，然后确认。 配置环境变量## 如图复制地址 再打开环境变量 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知...
Flutter实现中间滑动，底部固定
zhs961120的博客
06-23 7321
简介：flutter搭建组件写界面时，经常会遇到界面中间滑动，底部固定的需求，这里与AppBar和BottomNavigationBar区分开来，两者的功能和适用情况是不一样的，BottomNavigationBar是适用于底部导航栏的。下图就是实现的类似界面效果： flutter实现代码： body: MediaQuery( data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0), child
tab跟随底部横线滑动
09-26
tab切换并且底部横线跟随点击选中目标滑动。
js实现移动端tab切换时下划线滑动效果
10-16
主要为大家详细介绍了js实现移动端tab切换时下划线滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css - css页面底部固定的几种方法
热门推荐
qq_43886365的博客
11-25 2万+
css布局中页面 底部固定的几种方法
Android UI实现底部切换标签fragment
08-31
2. **中部显示内容布局**：这是切换的核心区域，根据底部标签的不同选择展示不同的Fragment。 3. **底部标签布局**：包含多个按钮，每个按钮对应一个Fragment，用于切换内容。 例如，在`activity_main.xml`布局文件...
Android 实现底部标签切换页面
2. 中部显示内容布局：这是主要内容区域，随着用户在底部标签间的切换而改变。 3. 底部标签布局：包含几个可点击的标签，每个标签代表一个不同的内容页面。 在XML布局文件（如`activity_main.xml`）中，我们可以...
Android tab 栏居中滚动
06-11
这种设计允许用户通过滑动在多个选项之间切换，同时保持当前选中的Tab居中显示，提升用户体验。 1. **TabLayout与ViewPager**： Android的`TabLayout`是Google提供的Material Design组件，常与`ViewPager`结合使用...
Android实现底部导航切换Fragment教程
XML代码中，`@+id/top_tab`标识符对应这部分布局，设置了固定的宽度和高度，背景色设置为`@color/topbar_bg`，并包含了`ImageView`用于显示logo。 2. 中部显示内容布局：这部分是应用的主要内容区域，由`...
Android UI-实现底部切换标签（fragment)
最新发布
2401_84149855的博客
04-09 997
前言本篇博客要分享的一个UI效果——实现底部切换标签，想必大家在一些应用上面遇到过这种效果了，最典型的就是微信了，可以左右滑动切换页面，也可以点击标签页滑动页面，它们是如何实现的呢，本篇博客为了简单只介绍如何实现点击底部切换标签页。先来看看我们想实现的效果图：这样的页面实现起来其实很简单的，首先我们从布局入手：分为三部分第一部分：顶部导航栏布局第二部分：中部显示内容布局第三部分：底部标签布局顶部
CSS Footer固定到底部
Scar的博客
07-15 514
你想要怎么放置你的 Footer？ 风雨不动稳如狗 固定在可视窗口最底部，页面滚动也仍然固定在最底部。 能屈能伸 页面内容高度不确定，希望 Footer 放置在页面内容的最下方。 我是一个demo 页面内容少，无法撑开，在可视窗口最底部 页面内容多，在页面最底部 怎么做 你想要风雨不动稳如狗，使用下列代码： 对于第二种能屈能伸的情况，你可以 1. 设置min-height <div class="wrapper"> </div> <footer class="footer
Android仿豆瓣FM卡片滑动
qq_15023815的博客
11-15 3050
最近公司项目要做一个跟豆瓣FM卡片式滑动的效果，看看效果图：
仿豆瓣弹性滑动控件，史上最全方位讲解事件滑动冲突
文淑的博客
12-12 806
前言 先来一道趣味测试，后面的控件讲解会比较枯燥乏味，看一看你的数学老师是谁教的？ 小明向两位朋友各自借了50元，用借来的钱，小明花费97元买了一件格子衫。这时候还剩3元钱，小明还给两个小伙伴各1元，自己还剩下1元。 那么问题来了：小明此时欠两位小伙伴各49元，再加上自己剩下的1元，49+49+1=99元。剩下的1元去哪了？ 正文 近日产品提出了一个新需求，在首页列表中新增可以横向滑动的卡片类型，...
H5移动端div固定到底部实现底部导航条的几种方式
陈万洲的专栏
01-30 6722
H5移动端div固定到底部实现底部导航条的几种方式 需求： 需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下： 这篇文章主要讲解三种实现方案，包括：fixed,absolute,以及css3的flex布局。 html结构如下： <div class="box"> <div class="roll">滚动区域</div> <footer>底部固定菜单</footer> </div> <
android防谷歌滑动效果,Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)...
weixin_34142735的博客
05-25 384
使用ViewPager，PagerSlidingTabStrip，SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏。先简单介绍一下所用的两个个开源库。PagerSlidingTabStrip用法：1.向app Module中的build.gradle中添加依赖dependencies {compile 'com.astuetz:pagerslidingtabstrip:1....
Android UI布局如何固定底部元素
twilight041132的专栏
08-16 1万+
在开发Android应用中，要实现固定底部控件可使用
固定div到窗口底部
weixin_39612961的博客
05-21 2645
width: 100%; position: fixed; bottom: 0;
Android仿豆瓣书影音频道推荐表单堆叠列表RecyclerView-LayoutManager
勇朝陈的博客
05-24 6845
Android仿豆瓣书影音频道推荐表单堆叠列表RecyclerView-LayoutManager 项目地址：https://github.com/CCY0122/FocusLayoutManager 效果预览 截图: GIF: 可自己监听滚动编写效果，如修改成仿MacOS文件浏览: 使用 focusLayoutManager = new...
实现仿微信底部滑动渐变效果的前端技术
### 知识点详细说明 ...总结以上知识点，我们可以看出，实现仿微信底部滑动渐变效果需要对UI设计和前端交互逻辑有深入理解，涉及到用户界面设计原则、渐变效果的视觉表现、以及滑动手势的处理等多个方面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值