Android布局学习

其他 2021-03-30 11:41:57 阅读次数: 0

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更加适配屏幕

待完善……

猜你喜欢

转载自blog.csdn.net/drawababy/article/details/112144800
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022