美文网首页
Android基础——布局篇(二)

Android基础——布局篇(二)

作者: 欧西里 | 来源:发表于2021-05-30 17:09 被阅读0次

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

    一、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个属性。这样记起来应该会更容易一些。

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

    相关文章

      网友评论

          本文标题:Android基础——布局篇(二)

          本文链接:https://www.haomeiwen.com/subject/qytmsltx.html