• 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控件的输入框中输入中文,网上也有很多的解决方法,但是偶觉得太麻烦,还是喜欢简单些的-------直接粘贴一串中文进去即可。 

  • 相关阅读:
    搭建可远程访问的服务:利用Apache和内网穿透实现公网访问
    罗丹明RB/四甲基罗丹明标记水杨苷Salicin, Rhodamine B/TRITC labeled;Rhodamine B/TRITC-Salicin
    SpringCloud-Gateway网关
    冠达管理:多场学术会议重启 医药板块行情回暖
    STM32F407输入捕获应用--PWM 输入模式测量脉冲频率与宽度
    Nginx从入门到入坟(十四)- Nginx缓存深入研究
    【(数据结构)- 顺序表的实现】
    vscode 如何配置快速生成 vue3 模板
    朋友圈可分享的产品画册是怎么做的?
    docker安装ELK详细步骤(冒着被老板开的风险,生产试验,适用所有版本)
  • 原文地址:https://blog.csdn.net/weixin_53046747/article/details/125493989