Android基础——布局篇(二)

最近一段时间有点忙,就忘了更新了。今天有时间,终于想起了我还有这么个账号。。。
继续讲第二种布局。

一、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>

下面是效果

相对父控件.png

从这里可以很容易的看出各个属性的效果。为了方便观察 我同样把父容器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的布局预览功能讲解这四个属性:


兄弟控件相对位置.png

从图上的虚线可以看出,文本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>
相对兄弟控件对齐.png

为了方便展示,我把兄弟控件的大小改成了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个属性。这样记起来应该会更容易一些。

这段时间还是比较忙的,现在甚至未来可能更新速度会很慢,如果有刚刚入坑的朋友有什么问题可以留言或者私信,我看到了都会回复。如果文章里有什么错误也请帮忙指正,感谢每一位看到这篇文章的朋友!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容