RelativeLayout（相对布局）及其属性

灰太狼 2022-07-17 02:38 246阅读 0赞

# 1.核心属性图 #

![20160827162526922][]

--------------------

# 2.父容器定位属性示意图 #

![20160827162631126][]

--------------------

# 3.根据兄弟组件定位 #

这里说的兄弟组件就是处于同一层次容器的组件,如图

![20160827162704610][]

图中的组件1,2就是兄弟组件了,而组件3与组件1或组件2并不是兄弟组件,所以组件3不能通过 组件1或2来进行定位,比如layout\_toleftof = "组件1"这样是会报错的。关于这个兄弟组件定位的最经典例子就是"梅花布局"了,下面代码实现下:

运行效果图：

![20160827162804783][]

实现代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
        xmlns:tools="http://schemas.android.com/tools"    
        android:id="@+id/RelativeLayout1"    
        android:layout_width="match_parent"    
        android:layout_height="match_parent" >    
        
            
            
        <ImageView    
            android:id="@+id/img1"     
            android:layout_width="80dp"    
            android:layout_height="80dp"    
            android:layout_centerInParent="true"    
            android:src="@drawable/pic1"/>    
            
            
        <ImageView    
            android:id="@+id/img2"     
            android:layout_width="80dp"    
            android:layout_height="80dp"    
            android:layout_toLeftOf="@id/img1"    
            android:layout_centerVertical="true"    
            android:src="@drawable/pic2"/>    
            
            
        <ImageView    
            android:id="@+id/img3"     
            android:layout_width="80dp"    
            android:layout_height="80dp"    
            android:layout_toRightOf="@id/img1"    
            android:layout_centerVertical="true"    
            android:src="@drawable/pic3"/>    
            
            
        <ImageView    
            android:id="@+id/img4"     
            android:layout_width="80dp"    
            android:layout_height="80dp"    
            android:layout_above="@id/img1"    
            android:layout_centerHorizontal="true"    
            android:src="@drawable/pic4"/>    
            
            
        <ImageView    
            android:id="@+id/img5"     
            android:layout_width="80dp"    
            android:layout_height="80dp"    
            android:layout_below="@id/img1"    
            android:layout_centerHorizontal="true"    
            android:src="@drawable/pic5"/>    
        
    </RelativeLayout>

--------------------

# 4.margin与padding的区别 #

首先margin代表的是偏移,比如marginleft = "5dp"表示组件离容器左边缘偏移5dp

padding代表的则是填充,而填充的对象针对的是组件中的元素,比如TextView中的文字 比如为TextView设置paddingleft = "5dp",则是在组件里的元素的左边填充5dp的空间

margin针对的是容器中的组件，而padding针对的是组件中的元素

下面通过简单的代码演示两者的区别:

比较示例代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
        xmlns:tools="http://schemas.android.com/tools"    
        android:layout_width="match_parent"    
        android:layout_height="match_parent"    
        android:paddingBottom="@dimen/activity_vertical_margin"    
        android:paddingLeft="@dimen/activity_horizontal_margin"    
        android:paddingRight="@dimen/activity_horizontal_margin"    
        android:paddingTop="@dimen/activity_vertical_margin"    
        tools:context=".MainActivity" >    
        
        <Button    
            android:id="@+id/btn1"     
            android:layout_height="wrap_content"    
            android:layout_width="wrap_content"    
            android:text="Button"/>    
        <Button    
            android:paddingLeft="100dp"     
            android:layout_height="wrap_content"    
            android:layout_width="wrap_content"    
            android:text="Button"    
            android:layout_toRightOf="@id/btn1"/>    
            
        <Button    
            android:id="@+id/btn2"     
            android:layout_height="wrap_content"    
            android:layout_width="wrap_content"    
            android:text="Button"    
            android:layout_alignParentBottom="true"/>    
        <Button    
            android:layout_marginLeft="100dp"     
            android:layout_height="wrap_content"    
            android:layout_width="wrap_content"    
            android:text="Button"    
            android:layout_toRightOf="@id/btn2"     
            android:layout_alignParentBottom="true"/>    
            
    </RelativeLayout>

运行效果图如下：

![20160827162844417][]

右上角的Button设置了PpaddingLeft属性，可以看到按钮的文字出现在按钮的右侧，按钮左侧的100dp被填充了

右下角的Button设置了marginLeft属性，可以看到这个按钮与左边的兄弟按钮隔开了一段距离

--------------------

# 5.很常用的一点:margin可以设置为负数 #

平时我们设置margin的时候都习惯了是正数的, 其实是可以用负数的

下面写个简单的程序演示下吧,模拟进入软件后,弹出广告 页面的,右上角的cancle按钮的margin属性则是使用负数的

效果图如下:

![20160827163243925][]

广告弹窗的布局代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:tools="http://schemas.android.com/tools"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        tools:context="com.jay.example.relativelayoutdemo.MainActivity"   
        android:background="#00CCCCFF">  
      
        <ImageView  
            android:id="@+id/imgBack"  
            android:layout_width="200dp"  
            android:layout_height="200dp"  
            android:layout_centerInParent="true"  
            android:background="@drawable/myicon" />  
      
        <ImageView  
            android:id="@+id/imgCancle"  
            android:layout_width="28dp"  
            android:layout_height="28dp"  
            android:layout_alignRight="@id/imgBack"  
            android:layout_alignTop="@id/imgBack"  
            android:background="@drawable/cancel"  
            android:layout_marginTop="-15dp"  
            android:layout_marginRight="-10dp" />  
      
    </RelativeLayout>

[20160827162526922]: /images/20220717/c35a41bfcfe746d69fcfa70a2a7d0e6f.png
[20160827162631126]: /images/20220717/ef1078607107445cb13eea404440c05b.png
[20160827162704610]: /images/20220717/0e5fb61bf967493887ce0ec703af15ae.png
[20160827162804783]: /images/20220717/cbae1c7f80cd43efb1e8136028245d03.png
[20160827162844417]: /images/20220717/f1b5a13d710d403a8461660b1225c620.png
[20160827163243925]: /images/20220717/e6d00c1617bd430085f9e64fd66d457b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关 RelativeLayout相对布局

RelativeLayout又称作相对布局,也是一种非常常用的布局。和 LinearLayout 的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对

你的名字/ 2023年06月19日 14:29/ 0 赞/ 57 阅读

相关 Android初试--RelativeLayout（相对布局）

RelativeLayout（相对布局） RelativeLayout允许子元素指定他们相对于其它元素或父元素的位置（通过ID指定）。因此，你可以以右对齐或上下，或置于屏幕中

小灰灰/ 2022年08月26日 01:25/ 0 赞/ 248 阅读

相关 Android UI RelativeLayout相对布局

RelativeLayout相对布局相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置，这是实际布局中最常用的布局方式之一。它灵活

秒速五厘米/ 2022年08月23日 12:49/ 0 赞/ 251 阅读

相关（二）Android布局之相对布局(RelativeLayout)

相对布局，直接粘代码main.xml示例代码如下： <?xml version="1.0" encoding="utf-8"?> <RelativeLayou

蔚落/ 2022年08月06日 14:17/ 0 赞/ 242 阅读

相关 RelativeLayout相对布局介绍及属性介绍

RelativeLayout相对布局　　RelativeLayout是一种相对布局，控件的位置是按照相对位置来计算的，后一个控件在什么位置依赖于前一个控件的基本位置，是布局

朴灿烈づ我的快乐病毒、/ 2022年08月02日 15:42/ 0 赞/ 215 阅读

相关 RelativeLayout布局属性

子类控件在RelativeLayout中常用的属性：子类空间相对父类容器的位置： android:layout\_alignParentLeft="true"——子类

清疚/ 2022年07月24日 06:28/ 0 赞/ 221 阅读

相关 RelativeLayout（相对布局）及其属性

1.核心属性图 ![20160827162526922][] -------------------- 2.父容器定位属性示意图 ![2016082716

灰太狼/ 2022年07月17日 02:38/ 0 赞/ 247 阅读

相关 Android 相对布局RelativeLayout

RelativeLayout下级视图的位置可以用与该视图自身平级的视图或者该视图的上级视图的相对位置来描述。如果没有指定参照视图，那么下级视图默认显示在RelativeLayo

ゝ一纸荒年。/ 2022年06月02日 06:22/ 0 赞/ 270 阅读

相关 RelativeLayout相对布局

RelativeLayout相对布局相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置，这是实际布局中最常用的布局方式之一。它灵活性大

╰+哭是因爲堅強的太久メ/ 2022年05月15日 00:50/ 0 赞/ 268 阅读

相关 Android RelativeLayout 相对布局解析

[Android RelativeLayout 属性][Android RelativeLayout] // 相对于给定ID控件 android:layout

痛定思痛。/ 2022年03月29日 15:18/ 0 赞/ 303 阅读