控件布局(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   右偏移的值;  




相关文章
|
2月前
QML (控件位置布局)之(Anchors)锚布局
QML (控件位置布局)之(Anchors)锚布局
47 2
|
XML 前端开发 Android开发
Android NestedScrollView滚动到顶部固定子View悬停挂靠粘在顶端
Android NestedScrollView滚动到顶部固定子View悬停挂靠粘在顶端 网上有一个StickyScrollView,称之为粘性ScrollView,比如一个垂直方向的布局,依次摆放几个子View,当某一个子View滚到到顶端时候要停靠在顶部,悬停在顶部的位置不动。
2795 0
|
7月前
|
XML Android开发 数据格式
一个Adapter+recycleview实现多种布局,区分布局中
最近因为需要所以学习了一下recycleview,使用Adapter修饰器修饰,使用一个Adapter+recycleview实现多种布局,而不是之前的三个Adapter在同一个recycleview中实现三个布局。点击区分布局中的gridview的图片和姓名。
31 0
tablayout支持改变选中文字大小,支持左右滑动,支持viewpager,支持三角可移动指示器
TabLayout [简书地址] (https://www.jianshu.com/p/2c3f868266e8) 基于大神的FlycoTabLayout 传送地址和基本用法 用法和属性和这个库一样 效果图如下 Gif_20180828_142709.
2457 0
|
定位技术
openlayers5之view缩放定位
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81902386 openlayer...
1452 0
|
前端开发 API Android开发
3.3 自定义控件基础 之 View的绘制
当测量好了一个View之后,我们就可以简单地重写onDraw()方法,并在Canvas对象上来绘制所需要的图形。首先我们来了解一下利用系统2D绘图API所必须要使用到的Canvas对象。
659 0
|
XML 前端开发 Android开发
3.2 自定义控件基础 之 View的测量
本文对应项目的码云地址:https://gitee.com/wanchuanxy/AndroidHeroesTest/tree/master/3/SystemWidget 在现实生活中,如果我们去画一个图形,就必须知道它的大小和位置。
775 0
|
Android开发
android:elevation属性,控制View底部渐变阴影
android:elevation属性,控制View底部渐变阴影 android:elevation这一属性,可以控制View底部渐变阴影,给一个View在其底部增加一定的灰度渐变阴影效果,如图: 上图是一个简单的TextView,TextView底部阴影渐变。
2590 0
|
缓存 前端开发
View的测量、布局和绘制过程
写在前面的话         按照之前写的节奏来的话,这篇改对View的整个测量、布局和绘制过程进行分析了。在之前的Activity显示到Window的过程中了解到performTraversals()这个方法会执行performMeasure()去测量View的大小,performLayout()去将子View放到合适的位置上,performDraw()将View真正绘制出来。
851 0