Android布局学习

AndroidStudio开发工具格式化当前代码快捷键 Ctrl + Alt + L

2.RelativeLayout布局

容器内的控件布局总是相对于父容器或兄弟组件的位置
相对布局是实际中应用最多，也是最灵活的布局管理器，

参考其他控件进行布局，默认为父控件。
有三种类型的属性：
属性值是true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中。
android:layout_alignParentBottom 位于父元素的下边缘
android:layout_alignParentTop 位于父元素的上边缘
android:layout_alignParentLeft 位于父元素的左边缘
android:layout_alignParentRight 位于父元素的右边缘

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RelativeLayoutActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/bt1"
        android:text="水平居中"
        android:layout_centerHorizontal="true"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中"
        android:id="@+id/bt2"
        android:layout_centerVertical="true"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父元素完全居中"
        android:id="@+id/bt3"
        android:layout_centerInParent="true"/>


</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素的上边缘"
        android:id="@+id/top"
        android:layout_alignParentTop="true"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素的下边缘"
        android:id="@+id/bottom"
        android:layout_alignParentBottom="true"/>
    
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="为于父元素的左边缘"
       android:id="@+id/left"/>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="为于父元素的右边缘"
        android:id="@+id/right"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

综合练习
相对布局相对与父控件

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="位于父元素左上边缘"
       android:id="@+id/left_top"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素右上边缘"
        android:id="@+id/right_top"
        android:layout_alignParentRight="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素左下边缘"
        android:id="@+id/left_bottom"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素右下边缘"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父元素完全居中"
        android:layout_centerInParent="true"/>
       
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父元素完全居中"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中上"
        android:id="@+id/center_top"
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中下"
        android:id="@+id/centerr_bottom"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中左"
        android:id="@+id/center_left"
        android:layout_centerVertical="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中右"
        android:id="@+id/center_right"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="位于父元素左上边缘"
       android:id="@+id/left_top"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素右上边缘"
        android:id="@+id/right_top"
        android:layout_alignParentRight="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素左下边缘"
        android:id="@+id/left_bottom"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于父元素右下边缘"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父元素完全居中"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中上"
        android:id="@+id/center_top"
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中下"
        android:id="@+id/centerr_bottom"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中左"
        android:id="@+id/center_left"
        android:layout_centerVertical="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中右"
        android:id="@+id/center_right"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

第二类：属性值必须为 id 的引用名”@id/id-name”

android:layout_below 在某元素的下方

android:layout_above 在某元素的的上方

android:layout_toLeftOf 在某元素的左边

android:layout_toRightOf 在某元素的右边

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RelativeLayoutActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="参考元素"
        android:id="@+id/center"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于参考元素上方"
        android:id="@+id/center_top"
        android:layout_above="@id/center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于参考元素下方"
        android:id="@+id/center_bottom"
        android:layout_below="@id/center"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于参考元素左方"
        android:id="@+id/center_left"
        android:layout_toLeftOf="@id/center"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位于参考元素右方"
        android:id="@+id/center_right"
        android:layout_toRightOf="@id/center"/>
</RelativeLayout>

综合练习
结合水平居中layout_centerHorizontal和水平居中layout_centerVertical属性

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">


    <Button
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="参考元素" />

    <Button
        android:id="@+id/center_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/center"
        android:text="与参考元素对齐上" />

    <Button
        android:id="@+id/center_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/center"
        android:text="与参考元素对齐下" />

    <Button
        android:id="@+id/center_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/center"
        android:text="与参考元素对齐左" />

    <Button
        android:id="@+id/center_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/center"
        android:text="与参考元素对齐右" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="参考元素"
        android:id="@+id/center"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="与参考元素上边缘对齐"
        android:id="@+id/center_top"
        android:layout_alignTop="@id/center"/>
   
</RelativeLayout>

上面的例子效果看得明白 修改一下高度就可以看更容易理解android:layout_height="100dp"

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="参考元素"
        android:id="@+id/center"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="与参考元素上边缘对齐"
        android:id="@+id/center_top"
        android:layout_alignTop="@id/center"/>

</RelativeLayout>

<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=".RelativeLayoutActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="参考元素"
        android:id="@+id/center"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="与参考元素下边缘对齐"
        android:id="@+id/center_bottom"
        android:layout_alignBottom="@id/center"
        />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="参考元素"
        android:id="@+id/center"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="与参考元素左边缘对齐"
        android:id="@+id/center_left"
        android:layout_alignLeft="@id/center"/>
    
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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=".RelativeLayoutActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="参考元素"
        android:id="@+id/center"
        android:layout_centerInParent="true"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="与参考元素右边缘对齐"
        android:id="@+id/center_right"
        android:layout_alignRight="@id/center"/>
</RelativeLayout>

待补B站视频的布局代码和效果图
相对布局相对于同级控件

第三类：属性值为具体的像素值，如 30dip，40px

• android:layout_marginBottom 离某元素底边缘的距离
• android:layout_marginLeft离某元素左边缘的距离
• android:layout_marginRight离某元素右边缘的距离
• android:layout_marginTop 离某元素上边缘的距离
  相对于父控件

像素单位

dp更加适配屏幕

---

待完善……