当前位置: 萬仟网 > 移动技术>移动开发>Android > Android界面3种基本布局(LinearLayout、RelativeLayout、FrameLayout)

Android界面3种基本布局(LinearLayout、RelativeLayout、FrameLayout)

2020年10月12日  | 萬仟网移动技术  | 我要评论
控件与布局的关系一个丰富的界面是由很多个控件组成的,那么我们如何才能让各个控件都有条不紊地摆放在界面上,而不是乱糟糟的呢?这就需要借助布局来实现了。布局是一种可用于放置很多控件的容器,它可以按照一定的规律调整内部控件的位置,从而编写出精美的界面。

控件与布局的关系

一个丰富的界面是由很多个控件组成的,那么我们如何才能让各个控件都有条不紊地摆放在界面上,而不是乱糟糟的呢?
这就需要借助布局来实现了。布局是一种可用于放置很多控件的容器,它可以按照一定的规律调整内部控件的位置,从而编写出精美的界面。
当然,布局的内部除了放置控件外,也可以放置布局,通过多层布局的嵌套,我们就能够完成一些比较复杂的界面实现。

在这里插入图片描述

LinearLayout

LinearLayout又称作线性布局,这个布局会将它所包含的控件在线性方向上依次排列。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button1"
        android:text="Relative Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button2"
        android:text="Frame Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button3"
        android:text="Button 3"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout> 

在这里插入图片描述

  • LinearLayout垂直排列的效果。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button1"
        android:text="Relative Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button2"
        android:text="Frame Demo"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:id="@+id/button3"
        android:text="Button 3"
        android:textAllCaps="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout> 

在这里插入图片描述

  • LinearLayout使用ayout_gravity属性对齐的效果。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button 3" />

</LinearLayout> 

在这里插入图片描述

RelativeLayout

RelativeLayout又称作相对布局,它可以通过相对定位的方式让控件出现在布局的任何位置。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" …>

    <Button  …
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button 1" />

    <Button  …
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button 2" />

    <Button …
        android:layout_centerInParent="true"
        android:text="Button 3" />

    <Button  …
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button 4" />

    <Button  …
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button 5" />

</RelativeLayout> 

在这里插入图片描述

  • 除了相对于父布局定位之外,RelativeLayout还允许相对于控件进行定位。
<?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=".RelativeActivity">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/button2"
        android:text="Button 2"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:layout_marginLeft="15dp"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/button2"
        android:layout_marginTop="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:text="Button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="Button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</RelativeLayout> 

在这里插入图片描述

FrameLayout

  • FrameLayout又称作帧布局,这种布局没有丰富的定位方式,所有的控件都会默认摆放在布局的左上角。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        />

</FrameLayout> 

在这里插入图片描述

  • 除了默认效果之外,还可以使用layout_gravity属性来指定控件在布局中的对齐方式,这和LinearLayout中的用法是相似的。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView"
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Button"
        />

</FrameLayout> 

在这里插入图片描述

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

    <View
        android:background="@color/colorWhite"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="20dp"
        android:elevation="5dp"
        android:layout_width="match_parent"
        android:layout_height="400dp"/>

    <ImageView
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:elevation="6dp"
        android:src="@drawable/test"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

</FrameLayout> 

在这里插入图片描述

本文地址:https://blog.csdn.net/u010186280/article/details/109027148

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号