Android课堂笔记——LinearLayout和RelativeLayout常用的两种布局方式

于 2016-12-08 15:31:00 发布
阅读量613 收藏
点赞数
分类专栏： Android 文章标签： android xml 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/moumaobuchiyu/article/details/53519049
版权
本文详细介绍了Android中两种主要的布局方式：LinearLayout和RelativeLayout。LinearLayout提供垂直和水平布局，通过设置orientation属性调整方向，使用margin属性设置组件间距。而RelativeLayout允许组件相对定位，通过各种属性如layout_alignBottom、layout_toLeftOf等实现灵活布局。理解并熟练运用这两种布局对于Android开发至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

线性布局LinearLayout

  线性布局是应用程序中最常用的布局方式，它提供了控件水平或者垂直排列的模型，同时我们可通过设置子控件的weight布局参数控制各个控件在布局中的相对大小。

xml布局文件中的配置

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        >
    …
    </ LinearLayout >

常用属性：

确定LinearLayout的方向：android:orientation=“属性”
vertical: 表示垂直布局
horizontal: 表示水平布局
*注：垂直布局全部为垂直方向，水平布局全部为水平方向

垂直布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

<TextView android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:background="#00ff00"
    />

<TextView android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:background="#00ff00"
    />

<TextView android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:background="#00ff00"
    />


</LinearLayout>

这里写图片描述

水平布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

<TextView android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:background="#00ff00"
    />

<TextView android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:background="#00ff00"
    />

<TextView android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:background="#00ff00"
    />

</LinearLayout>

这里写图片描述

宽度和高度：

layout_width
代表此组件布局的宽度
fill_parent: 则会填满parent的宽度
wrap_content:则组件宽度会依照内容大小而调整
android:layout_height
代表此组件布局的高度
fill_parent: 则会填满parent的宽度
wrap_content:则组件宽度会依照内容大小而调整

margin外边框：

layout_margin
指定这个view距离上下左右的额外距离
android: layout_marginBottom
指定这个view距离下方的额外距离
android: layout_marginLeft
指定这个view距离左方的额外距离
android: layout_marginRight
指定这个view距离右方的额外距离
android: layout_marginTop
指定这个view距离上方的额外距离

相对布局RelativeLayout

相对布局的子控件会根据它们说设置的参照控件和参数进行相对布局。参照控件可以是父控件，也可以是其它子控件，但被参照的控件必须要在参照它的控件之前定义。

xml布局文件的配置

<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android  
                android:layout_width="fill_parent"   
                android:layout_height="fill_parent"   >

    </RelativeLayout>

常用属性

android:layout_above 置于目标id组件的上方 android:layout_alignBaseline
置于与目标id组件同样的基线上 android:layout_alignBottom 让自己的下边界与目标id组件的下边界在同一个位置
android:layout_alignLeft 让自己的左边界与目标id组件的左边界在同一位置
android:layout_alignParentBottom 若为true，让自己的下边界与Parent的下边界同位置
android:layout_alignParentLeft 若为true，让自己的左边界与Parent的左边界同位置
android:layout_alignParentRight 若为true，让自己的右边界与Parent的右边界同位置
android:layout_alignParentTop 若为true，让自己的上边界与Parent的上边界同位置
android:layout_alignRight 让自己的右边界与目标id组件的右边界在同一位置
android:layout_toLeftOf/toRightOf 置于目标id组件的左方/右方
android:layout_alignTop 让自己的上边界与目标id组件的上边界在同一个位置
android:layout_alignWithParentIfMissing
若设为true，当参考的目标id不可用时，会以Parent为参考目标 android:layout_below 置于目标id组件的下方
android:layout_centerHorizontal 若为true，置于Parent水平位置的中心
android:layout_centerInParent 若为true，置于Parent水平以及垂直位置的中心
android:layout_centerVertical 若为true，置于Parent垂直位置的中心

这里写图片描述

两个布局方式是最为常用的布局方式，需要熟记并且熟用，下为两个布局方式混合使用的例子

<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"
    android:background="#323232"
    tools:context=".MainActivity" >



    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:background="#FFFFFF" >

            <!-- 文本输入框 -->
            <!-- 控件一旦将背景设置成@null或透明颜色 -->
            <!-- hint：提示性信息 -->

            <EditText
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="#00000000"
                android:hint="username or E-mail"
                android:singleLine="true" />
        </RelativeLayout>
        <!-- App中用于装饰的线条，我们可以用View组件，没有任何实际意义 -->

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#535353" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginBottom="10dp"
            android:background="#FFFFFF" >

            <!-- 文本输入框 -->
            <!-- 控件一旦将背景设置成@null或透明颜色 -->
            <!-- hint：提示性信息 -->

            <EditText
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="#00000000"
                android:hint="·········"
                android:inputType="textPassword"
                android:singleLine="true" />
        </RelativeLayout>
    </LinearLayout>

    <ImageView
        android:layout_width="250dp"
        android:layout_height="150dp"
        android:layout_above="@id/ll"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:src="@drawable/logo" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_above="@id/ll"
        android:layout_marginBottom="80dp"
        android:gravity="center"
        android:text="Sign in"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_r"
        android:layout_alignRight="@id/ll"
        android:layout_below="@id/ll" />

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_below="@id/ll"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="130dp"
        android:src="@drawable/box" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="30dp"
        android:layout_below="@id/ll"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="180dp"
        android:gravity="center"
        android:text="Forget Password?"
        android:textColor="#FFFFFF" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_l"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignLeft="@+id/ll" />

</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/l"></item>

</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:drawable="@drawable/r"></item>

</selector>

这里写图片描述

*注：
其中两个按钮是两张图片，是使用selector资源文件定义

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值