最近一段时间有点忙,就忘了更新了。今天有时间,终于想起了我还有这么个账号。。。
继续讲第二种布局。
一、RelativeLayout
相对布局,从字面意思就很好理解,相对于其他控件的一种布局,这个其他控件包括同级别下的其他控件和当前控件的父控件。
相对布局的属性可以归为两大类。
1.相对于父控件
android:layout_centerHorizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
看这个解释如果还是没有立体化的理解,可以看下面的例子。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="文本1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="文本2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="文本3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:text="文本4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="文本5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="文本6" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="文本7" />
</RelativeLayout>
下面是效果
从这里可以很容易的看出各个属性的效果。为了方便观察 我同样把父容器RelativeLayout设置成了红色,这样可以清晰的看出子控件和父控件的相对位置关系。
在其中,还可以发现android:layout_alignParentStart="true"和android:layout_alignParentEnd="true"这两个属性,这两个属性我要特别说明一下,他们是在api 17也就是android 4.2版本引入的新属性,分别是相对父控件起点和相对父控件终点。引入这两个属性的原因就是:
“不是每个国家的阅读顺序都是从左往右的”,
例如数阿拉伯。而google为了解决这个适配问题就引入了这两个属性,使之不用为了适配这种情况适配两套布局,如果使用了这两个属性当系统切换成这些国家的时候,自动会把方向转变过来,这就是这两个属性的意义,而在中国,使用哪个差别不大。
需要注意android:layout_alignParentStart="true"和android:layout_alignParentLeft="true"不要一起使用,上面的例子只是为了方便讲述,请选择一个使用就可以,推荐4.2以后使用android:layout_alignParentStart="true"
除了这个还有一个问题,文本4和文本6好像效果是一样的,因为他们重合了,但事实上并不是这样,在android中,屏幕的坐标起点就是左上角,坐标为(0,0),x轴向右为正,y轴向下为正,可以理解为
所有子控件默认都是在左上角的,
在相对布局中,相当于默认都有了android:layout_alignParentLeft="true"和android:layout_alignParentTop属性,所以造成了文本4和文本6重合的现象。
android:layout_alignWithParentIfMissing属性基本上是用不到的,这里就不叙述了 感兴趣的可以去自己试一试,理论终究是理论,还得靠实践去检验。
2.相对于兄弟控件
如果细分类的话,还可以把相对兄弟控件的属性分为两类。一类是相对兄弟元素的位置,另一类是相对兄弟控件的对齐方式。
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_brother"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#FF0000"
android:text="兄弟控件" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/tv_brother"
android:text="文本1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_brother"
android:text="文本2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/tv_brother"
android:text="文本3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/tv_brother"
android:text="文本4"/>
</RelativeLayout>
这个直接看运行的效果可能看不出什么,所以我利用android studio的布局预览功能讲解这四个属性:
从图上的虚线可以看出,文本1的底部紧贴在兄弟控件的上方,文本2的顶部紧贴兄弟控件的下方,文本3和文本4分别也紧贴兄弟控件的左右。这个相对位置大约就是这个意思。
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
同样直接看例子:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_brother"
android:layout_width="200dp"
android:layout_height="200dp"
android:gravity="center"
android:layout_centerInParent="true"
android:background="#FF0000"
android:text="兄弟控件" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/tv_brother"
android:text="文本1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/tv_brother"
android:text="文本2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/tv_brother"
android:text="文本3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/tv_brother"
android:text="文本4"/>
</RelativeLayout>
为了方便展示,我把兄弟控件的大小改成了200*200,还是通过虚线来分辨。
文本1的顶部与兄弟控件的顶部是对齐关系,文本2的底部与兄弟控件的底部是对齐关系,文本3和文本4分别也与兄弟控件的左和右对齐。
以上就是相对布局的全部内容了。
3.其他常用到的属性
只通过以上15个属性铺UI的话局限性还是挺大的,所以额外讲4个常用的属性,方便更好的使用相对布局。
这四个属性不局限于相对布局,其他的布局也可以配合使用,使其更方便的符合我们的ui设计。
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
有过前端经验的应该理解margin的含义,外边距。
使用起来也很简单:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_brother"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="20dp"
android:layout_marginTop="25dp"
android:layout_marginBottom="30dp"
android:background="#FF0000"
android:text="兄弟控件" />
</RelativeLayout>
分别是距离父控件左边15dp,右边20dp,上边25dp,下边30dp。如果四个边距离是一样的话可以直接用android:layout_margin="20dp"。
最后这个效果我就不展示了,想试试的自己可以去尝试一下。
总结
相对布局是可以说是万能的,其他布局能实现的效果,相对布局基本上都可以实现,虽然说实现起来可能会复杂一些。
总结起来就是7+4+4,共15个属性。这样记起来应该会更容易一些。
这段时间还是比较忙的,现在甚至未来可能更新速度会很慢,如果有刚刚入坑的朋友有什么问题可以留言或者私信,我看到了都会回复。如果文章里有什么错误也请帮忙指正,感谢每一位看到这篇文章的朋友!