用于在处理存在底部导航栏的设备上存在导航栏遮挡html页面的问题

/**
 * 此处用于在处理存在底部导航栏的设备上存在导航栏遮挡html页面的问题
 *option :view 满屏的视图
 */
private void setWebContainerLayoutParams(View view) {
    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
    ViewGroup.MarginLayoutParams marginParams = null;
    //获取view的margin设置参数
    if (layoutParams instanceof ViewGroup.MarginLayoutParams) {
        marginParams = (ViewGroup.MarginLayoutParams) layoutParams;
    } else {
        //不存在时创建一个新的参数
        marginParams = new ViewGroup.MarginLayoutParams(layoutParams);
    }
    marginParams.setMargins(0, 0, 0, ScreenUtil.getSystemNavigationBarHeight(this));
    view.setLayoutParams(marginParams);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML网页制作中,生成底部导航栏有多种方式,以下是其中两种常用的方式: 1.使用HTML和CSS手动制作底部导航栏HTML文件中,可以使用`<footer>`标签来定义底部区域,然后在CSS文件中使用样式表对其进行修饰。以下是一个简单的例子: ```html <!DOCTYPE html> <html> <head> <title>底部导航栏</title> <style> footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #333; color: #fff; text-align: center; line-height: 50px; } footer a { color: #fff; text-decoration: none; margin: 0 20px; } </style> </head> <body> <!-- 页面内容 --> <footer> <a href="#">首页</a> <a href="#">分类</a> <a href="#">购物车</a> <a href="#">我的</a> </footer> </body> </html> ``` 在上面的例子中,`<footer>`标签定义了底部区域,使用CSS样式表对其进行修饰,其中`position: fixed;`使其固定在底部,`bottom: 0;`使其与底部对齐,`width: 100%;`使其宽度占满整个屏幕,`height: 50px;`定义了高度,`background-color: #333;`定义了背景颜色,`color: #fff;`定义了字体颜色,`text-align: center;`使其文字居中,`line-height: 50px;`定义了行高。`<footer>`标签内部的`<a>`标签定义了导航栏的链接,使用CSS样式表对其进行修饰。 2.使用框架组件模块生成底部导航栏 在移动app前端开发中,可以使用框架组件模块来生成底部导航栏。例如,在使用Hbuilder进行移动app前端开发时,可以使用mui框架提供的底部选项卡模板。以下是一个简单的例子: ```html <!DOCTYPE html> <html> <head> <title>底部导航栏</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="http://cdn.static.runoob.com/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet" /> <script src="http://cdn.static.runoob.com/libs/mui/3.7.1/js/mui.min.js"></script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">底部导航栏</h1> </header> <div class="mui-content"> <!-- 页面内容 --> </div> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="#"> <span class="mui-icon mui-icon-bars"></span> <span class="mui-tab-label">分类</span> </a> <a class="mui-tab-item" href="#"> <span class="mui-icon mui-icon-cart"></span> <span class="mui-tab-label">购物车</span> </a> <a class="mui-tab-item" href="#"> <span class="mui-icon mui-icon-person"></span> <span class="mui-tab-label">我的</span> </a> </nav> </body> </html> ``` 在上面的例子中,使用了mui框架提供的底部选项卡模板,其中`<header>`标签定义了顶部栏,`<div>`标签定义了页面内容,`<nav>`标签定义了底部选项卡,`<a>`标签定义了选项卡的链接,`<span>`标签定义了选项卡的图标和标签。使用mui框架可以快速生成底部导航栏,并且可以对其进行自定义。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值