• AndroidStudio004--RelativeLayout相对布局使用


     之前我们使用的布局管理器基本上是线性布局管理器,接下来我们使用相对布局管理器(RelativeLayout)来放置我们的子控件。在使用线性布局管理器时相信大家也发现了,它是有局限性的,比方说我们在放置子控件(子元素)时,一个子控件就会占据一行。而我们使用相对布局的话,可以减少UI的嵌套结构,在代码维护及运行效率上来说具备一定的优势。我们在使用相对布局后,如果没有设置子控件相应的位置属性的话,它们就会默认放置在左上角,之后如果子控件很多的话,那么它们就会重叠在一起。

    RelativeLayout相对布局使用

    使用RelativeLayout作为我们的布局管理器后,我们的子控件属性里面都可以加上位置有关的属性,来设计我们的子控件展示。

    该布局有多个属性可以设置,如下:

    1,在父控件中子控件相对于居中:layout_centerInParent

    • android:layout_centerInParent="true" --将控件置于父控件的中心位置
    • android:layout_centerVertical="true" --将控件置于垂直方向的中心位置
    • android:layout_centerHorizental="true" --将控件置于水平方向的中心位置

     以使用android:layout_centerInParent="true"为例

     如上,我们可以看到,图片控件移动到了父控件(布局管理器)的最中间位置。因为我们的文本控件使用了android:layout_below属性,文本控件设置成在紧挨图片的底下,因此图片变换位置时,文本也会进行相应的改变。

    以使用 android:layout_centerVertical="true" 为例

     从上图我们可以看到,与之前的android:layout_alignInParetn不同,该属性只能将图片控件移动到整个页面左边的垂直中心位置。

    2,在兄弟控件紧挨相邻:layout_above上

    • android:layout_above="@id/xxx" --将控件置于给定ID控件之上
    • android:layout_below="@id/xxx" --将控件置于给定ID控件之下
    • android:layout_toLeftOf="@id/xxx" --将控件的右边缘和给定ID控件的左边缘对齐
    • android:layout_toRightOf="@id/xxx" --将控件的左边缘和给定ID控件的右边缘对齐

    以使用android:layout_above="@id/xxx"为例

     因为文本设置了android:layout_below的属性,因此可以将该控件放置到其他控件的底下

    3,在兄弟控件边缘对齐:android:layout_alignTop上

    • android:layout_alignTop="@id/xxx" --将控件的上边缘和给定ID控件的上边缘对齐
    • android:layout_alignBottom="@id/xxx" --将控件的底边缘和给定ID控件的底边缘对齐
    • android:layout_alignLeft="@id/xxx" --将控件的左边缘和给定ID控件的左边缘对齐
    • android:layout_alignRight="@id/xxx" --将控件的右边缘和给定ID控件的右边缘对齐

     从上面的图中我们可以看到,文本控件设置了android:layout_alignTop属性,使之可以与图片的最顶端边缘对齐,看起来界面更加清爽。

    4,在父控件边缘对齐:android:layout_alignParentTop="true"

    • android:layout_alignParentTop="true" --将控件的上边缘和父控件的上边缘对齐
    • android:layout_alignParentBottom="true" --将控件的底边缘和父控件的底边缘对齐
    • android:layout_alignParentLeft="true" --将控件的左边缘和父控件的左边缘对齐
    • android:layout_alignParentRight="true" --将控件的右边缘和父控件的右边缘对齐

    5,在兄弟控件之间的间距

    • android:layout_marginTop="@id/xxx"
    • android:layout_marginBottom="@id/xxx"
    • android:layout_marginLeft="@id/xxx"
    • android:layout_marginRight="@id/xxx"

     如上对图片的最外层边缘设置了android:layout_marginTop属性与上面产生距离,使得图片下移

    6,实现案例: 

    如果我们要实现如下效果就需要使用到相对布局,线性布局是实现不了的。

     activity文件:

    <?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="@drawable/gf_treebottom"
    
        >
        <ImageView
            android:id="@+id/logo"
            android:layout_width="77dp"
            android:layout_height="77dp"
            android:src="@drawable/girl1"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="22dp"
            android:layout_centerVertical="true"
            />
    
        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/tv"
            android:text="学习三问:"
            android:textColor="#cc0066"
            />
    
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/prompt"
            android:layout_alignTop="@id/logo"
            android:layout_marginLeft="88dp"
            style="@style/textStyle"
            />
    
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv"
            android:text="2022/6/26"
            android:layout_alignRight="@id/no_bt"
    
            />
    
        <Button
            android:id="@+id/yes_bt"
            android:text="YES"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="166dp"
            android:layout_alignLeft="@id/tv"
    
            />
        <Button
            android:id="@+id/no_bt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="166dp"
            android:layout_marginRight="55dp"
            android:text="NO" />
        <!--    <Button />-->
    </RelativeLayout>

    strings文字资源文件:

    <string name="prompt">请问你爱Android吗,你学它是为了什么呢,你能够保证学完后可以就业吗?</string>

    左上角图片资源文件:

     布局管理器的图片资源文件:

    EditView编辑控件

    EditView该控件允许用户在控件里面输入和编辑内容,并可以在程序中对这些内容进行处理。该控件继承自TextView控件,因此也有TextView控件的属性。除了拥有TextView的属性外,EditText控件也有自己的属性,如下:

    • 最大输入长度:maxLines
    • 软键盘类型:inputType。属性值可以为:phone/number/Line/textPersonName
    • 允许输入的字符:digits
    • 输入法选项:imeOptions
    • 是否可编辑:editable
    • 提示信息:hint

     

    如上图中我们可以看到输入的是中文,但是在实际使用的时候我们一般来说是不能输入中文的,在editview控件的输入框中输入中文,网上也有很多的解决方法,但是偶觉得太麻烦,还是喜欢简单些的-------直接粘贴一串中文进去即可。 

  • 相关阅读:
    Autosar诊断实战系列22-UDS单帧/长帧发送代码级分析
    第12章 软件测试基础 12.1-软件测试 12.2-验证与确认 12.3-软件缺陷
    Ant-Design-Pro-V5 :QueryFilter高级筛选组件、Table以及Pagination组件结合实现查询。
    linux正则表达式
    tensorflow 中的Variable 和 get_variable
    预编译、函数变量提升
    Effective C++条款21:必须返回对象时,别妄想返回其reference
    通俗易懂讲解Redis的哨兵模式
    ceph对象储存的使用
    基于ResNetRS的宝可梦图像识别
  • 原文地址:https://blog.csdn.net/weixin_53046747/article/details/125493989