控件布局(View)叠加效果

简介: 控件布局(View)叠加效果

 在开发android程序的时候,我们经常会遇到让控件或是view实现叠加的效果,如下图红圈部分所示:

20171122171639825.png


其他类似的效果图就不展示了,一般这种情况,我们用Framelayout来处理就可以了,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"      
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.baidu.mapapi.map.MapView
        android:id="@+id/bmapView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:orientation="vertical"
        android:layout_marginLeft="30dp"
        android:layout_marginBottom="30dp"
        android:background="@color/white">
         <TextView
            android:id="@+id/baidu_student_positioning"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:drawableTop="@mipmap/icon_positioning"
            android:layout_margin="5dp"
            android:text="@string/positioning"/>
        <TextView
            android:id="@+id/baidu_student_position"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:drawableTop="@mipmap/icon_position"
            android:layout_margin="5dp"
            android:text="@string/position"/>
        <TextView
            android:id="@+id/baidu_student_track"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:drawableTop="@mipmap/icon_track"
            android:layout_margin="5dp"
            android:text="@string/track"/>
        <TextView
            android:id="@+id/baidu_student_setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center"
            android:drawableTop="@mipmap/icon_setting"
            android:layout_margin="5dp"
            android:text="@string/setting"/>
    </LinearLayout>
</FrameLayout>


这样效果就出来了,但是这又带来了一个问题,Framelayout在布局上会有很多限制,不如RelativeLayout布局那么随意,那么RelativeLayout有没有什么属性可以让我们来处理叠加的效果呢,答案是肯定的。


 在控制的属性中会有四个属性 :


 android:layout_marginTop

 android:layout_marginBottom

 android:layout_marginLeft

 android:layout_marginRight.


 通过设置上面四个属性为负值来实现相邻view之间的叠加效果,如android:layout_marginLeft=”-50dp”,这样就可以实现控制叠加的效果了,不过谁叠加谁,就要看控制在xml中的位置了,简单试一下,就会出现你想要的结果了。


这里给出 RelativeLayout布局的属性:

// 相对于给定ID控件  
android:layout_above 将该控件的底部置于给定ID的控件之上;  
android:layout_below 将该控件的底部置于给定ID的控件之下;  
android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;  
android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;  
android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;  
android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;  
android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;  
android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;  
android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;  
// 相对于父组件  
android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;  
android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;  
android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;  
android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;  
// 居中  
android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;  
android:layout_centerVertical 如果为true,将该控件的置于垂直居中;  
android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;  
// 指定移动像素  
android:layout_marginTop 上偏移的值;  
android:layout_marginBottom 下偏移的值;  
android:layout_marginLeft   左偏移的值;  
android:layout_marginRight   右偏移的值;  




相关文章
|
机器学习/深度学习 人工智能 算法
解密巴黎奥运会中的阿里云AI技术
2024年巴黎奥运会圆满结束,中国代表团金牌数与美国并列第一,展现了卓越实力。阿里云作为官方云服务合作伙伴,通过先进的AI技术深度融入奥运的各项环节,实现了大规模的云上转播,超越传统卫星转播,为全球观众提供流畅、高清的观赛体验。其中,“子弹时间”回放技术在多个场馆的应用,让观众享受到了电影般的多角度精彩瞬间。此外,8K超高清直播、AI智能解说和通义APP等创新,极大地提升了赛事观赏性和互动性。能耗宝(Energy Expert)的部署则助力实现了赛事的可持续发展目标。巴黎奥运会的成功举办标志着体育赛事正式进入AI时代,开启了体育与科技融合的新篇章。
解密巴黎奥运会中的阿里云AI技术
|
数据采集 机器学习/深度学习 人工智能
【大语言模型】人类反馈在大语言模型对齐中的可靠性有多高?
当今的对齐研究大多集中在设计新的学习算法上,使用的是如Anthropic-HH这样的数据集,这些研究假设人类反馈数据本质上是可靠的。然而,对于人类反馈的定性不可靠性及其对对齐的影响,关注甚少。为了填补这一空白,我们进行了一项全面研究,并提供了对人类反馈数据的深入分析。
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
|
Ubuntu Android开发
安卓系统调试与优化:(一)bootchart 的配置和使用
本文介绍了如何在安卓系统中配置和使用bootchart工具来分析系统启动时间,包括安装工具、设备端启用bootchart、PC端解析数据及分析结果的详细步骤。
865 0
安卓系统调试与优化:(一)bootchart 的配置和使用
|
开发工具 git
【git】解决Gitea推送创建失败
【git】解决Gitea推送创建失败
759 0
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
939 6
|
SQL 关系型数据库 MySQL
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的体育馆管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的体育馆管理系统的详细设计和实现
174 0
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
小程序 开发者 Windows
【微信小程序】微信开发者工具 内容错误 pages/cart/cart.json: [“usingComonent“][“van-card“]: “@vant/weapp/card/indx“ 未找到
【微信小程序】微信开发者工具 内容错误 pages/cart/cart.json: [“usingComonent“][“van-card“]: “@vant/weapp/card/indx“ 未找到
327 0