隐藏

Android Studio 线性布局LinearLayout使用实例

发布:2023/2/23 10:07:56作者:管理员 来源:本站 浏览次数:769

目录


最常用属性:


边练边学:


实例练习1(LinearLayout):


实例练习2(android:padding):


实例练习3(match_paren):


实例练习4(vertical/layout_margin):


实例练习5(padding2):


实例练习6(gravity):


实例练习7(layout_weight):


实例练习8(layout_weight2):


        线性布局(Linear Layout)是使用最为频繁的布局方法之一,之后将边练习边学习相关知识。

最常用属性:


android:id                                        相当于控件的标识,可以通过id来找到控件


android:layout_width                       宽度


android:layout_height                      高度


android:layout_margin                     外边距,控件距离外部元素的编剧


android:layout_padding                   内边距,控件距离外部元素的编剧


android:background                         背景,可以为颜色、图片、自定义xml文件


android:orientation                           方向,设定线性布局方向

边练边学:

实例练习1(LinearLayout):

       将根布局设为线性布局(LinearLayout):


       高度与宽度“match_parent”为匹配父控件,上一级控件宽、高有多少,宽、高就有多少【“wrap_content” 为包含内容,内容有多少,宽度、高度就有多少】


       方向“vertical”为垂直方向【“horizont”为水平方向】


       添加一个为线性布局(LinearLayout)的子元素:


       赋予id:ll_1(@+id指创建一个id)


       宽度为“match_parent”匹配父控件,高度为“150dp”(安卓屏幕碎片化比较严重,分辨率不同,一般使用dp,根据屏幕分辨率适配大小)


       方向“horizont”为水平方向


       背景设置颜色色号#028702


   <?xml version="1.0" encoding="utf-8"?>

   <LinearLayout 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:orientation="vertical"

       tools:context=".MainActivity">

   

       <LinearLayout

           android:id="@+id/ll_1"

           android:layout_width="match_parent"

           android:layout_height="150dp"

           android:orientation="horizontal"

           android:background="#028702"

           android:padding="20dp">

       </LinearLayout>

   </LinearLayout>


实例练习2(android:padding):

       添加一个副控件<View>


       宽度“100dp” ,高度为“match_parent”匹配父控件


       背景设置颜色色号#ff0033


       父控件中设置“android:padding=“20dp” ”(内边距20dp,里边内容需距离边框有20个单位)


   <View

               android:layout_width="100dp"

               android:layout_height="match_parent"

               android:background="#ff0033" />


实例练习3(match_paren):

       再添加一个副控件<View>


       宽度、高度为“match_parent”匹配父控件


       背景设置颜色色号#23358E


       【副控件出现在红色副控件右侧,父控件的宽度已经被红色副控件占用100dp,当前副控件再去匹配父控件就只能匹配到剩余部分】

实例练习4(vertical/layout_margin):



       添加第二个为线性布局(LinearLayout)子元素:


       赋予id:ll_2(@+id指创建一个id)


       宽度为“match_parent”匹配父控件,高度为“150dp”(安卓屏幕碎片化比较严重,分辨率不同,一般使用dp,根据屏幕分辨率适配大小)


       方向“horizont”为水平方向


       背景设置颜色色号#8478FF


       设置外边距android:layout_marginTop="20dp"(上方),android:layout_marginRight="15dp"(右侧),android:layout_marginLeft="15dp"(左侧),android:layout_marginBottom="50dp"(下方)(外边距50dp,外边内容需距离边框有50个单位)


   <LinearLayout

           android:id="@+id/ll_2"

           android:layout_width="match_parent"

           android:layout_height="150dp"

           android:background="#8470FF"

           android:orientation="horizontal"

           android:layout_marginTop="20dp"

           android:layout_marginRight="15dp"

           android:layout_marginLeft="15dp"

           android:layout_marginBottom="50dp">

       </LinearLayout>


实例练习5(padding2):

        添加一个副控件<View>


       宽度 ,高度为“match_parent”匹配父控件


       背景设置颜色色号#EEEE00


       父控件中设置android:paddingBottom="10dp",android:paddingLeft="20dp",android:paddingRight="20dp",android:paddingTop="60dp"(padding设置上下左右内边距相同大小,也可通过android:paddingTop/paddingBottom/android:paddingLeft/paddingRight分别设置上/下/左/右内边距大小)


   <LinearLayout

           android:id="@+id/ll_2"

           android:layout_width="match_parent"

           android:layout_height="150dp"

           android:background="#8470FF"

           android:orientation="horizontal"

           android:paddingBottom="10dp"

           android:paddingLeft="20dp"

           android:paddingRight="20dp"

           android:paddingTop="60dp"

           android:layout_marginTop="20dp"

           android:layout_marginRight="15dp"

           android:layout_marginLeft="15dp"

           android:layout_marginBottom="50dp">

           <View

               android:layout_width="match_parent"

               android:layout_height="match_parent"

               android:background="#EEEE00"/>

       </LinearLayout>


实例练习6(gravity):

       添加第三个为线性布局(LinearLayout)子元素并建立一个副控件<View>


       子元素中用android:gravity控制内部元素对齐方式

Value Description

top Put the object at the top of its container, not changing its size.

将对象放在其容器的顶部,不改变其大小.

bottom Put the object at the bottom of its container, not changing its size.

将对象放在其容器的底部,不改变其大小.

left Put the object at the left edge of its container, not changing its size.

将对象放在其容器的左侧,不改变其大小.

right Put the object at the right edge of its container, not changing its size.

将对象放在其容器的右侧,不改变其大小.

center_vertical Place object in the vertical center of its container, not changing its size.

将对象纵向居中,不改变其大小.

垂直对齐方式:垂直方向上居中对齐。

fill_vertical Grow the vertical size of the object if needed so it completely fills its container.

必要的时候增加对象的纵向大小,以完全充满其容器.

垂直方向填充

center_horizontal Place object in the horizontal center of its container, not changing its size.

将对象横向居中,不改变其大小.

水平对齐方式:水平方向上居中对齐

fill_horizontal Grow the horizontal size of the object if needed so it completely fills its container.

必要的时候增加对象的横向大小,以完全充满其容器.

水平方向填充

center Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.

将对象横纵居中,不改变其大小.

fill Grow the horizontal and vertical size of the object if needed so it completely fills its container. This is the default.

必要的时候增加对象的横纵向大小,以完全充满其容器.

clip_vertical Additional option that can be set to have the top and/or bottom edges of the child clipped to its container's bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.


附加选项,用于按照容器的边来剪切对象的顶部和/或底部的内容. 剪切基于其纵向对齐设置:顶部对齐时,剪切底部;底部对齐时剪切顶部;除此之外剪切顶部和底部.


垂直方向裁剪

clip_horizontal Additional option that can be set to have the left and/or right edges of the child clipped to its container's bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.


附加选项,用于按照容器的边来剪切对象的左侧和/或右侧的内容. 剪切基于其横向对齐设置:左侧对齐时,剪切右侧;右侧对齐时剪切左侧;除此之外剪切左侧和右侧.


水平方向裁剪


相关资源:AndroidGravity_android:gravity-Android代码类资源-CSDN文库


   <LinearLayout

           android:id="@+id/ll_3"

           android:layout_width="match_parent"

           android:layout_height="100dp"

           android:background="#636363"

           android:gravity="center">

           <View

               android:layout_width="50dp"

               android:layout_height="50dp"

               android:background="#FFFFFF" />

       </LinearLayout>


实例练习7(layout_weight):

       添加第四个为线性布局(LinearLayout)子元素并建立三个副控件<View>


       三个副控件宽度都设为0dp


       android:layout_weight用来设置三个副控件的权重为1,2,3


       (在宽度都设为0dp的前提下,三个副控件的权重分别为1,2,3.总权重为6,因此父控件的宽度被分为6份,三个副控件各占1,2,3份。)


   <LinearLayout

           android:id="@+id/ll_4"

           android:layout_width="match_parent"

           android:layout_height="100dp"

           android:background="#3A5FCD"

           android:layout_marginTop="10dp">

           <View

               android:layout_width="0dp"

               android:layout_height="50dp"

               android:background="#32CD32"

               android:layout_weight="1"/>

           <View

               android:layout_width="0dp"

               android:layout_height="50dp"

               android:background="#FF9800"

               android:layout_weight="2"/>

           <View

               android:layout_width="0dp"

               android:layout_height="50dp"

               android:background="#FF0000"

               android:layout_weight="3"/>

       </LinearLayout>


实例练习8(layout_weight2):

       添加第五个为线性布局(LinearLayout)子元素并建立两个副控件<View>


        两个副控件宽度分别设为20dp和200dp


       android:layout_weight用来设置两个副控件的权重都为1


       (在宽度都不为0dp的前提下,两个副控件先获取所设置的宽度后,再由权重比瓜分剩余部分的宽度。)


   <LinearLayout

           android:id="@+id/ll_5"

           android:layout_width="match_parent"

           android:layout_height="match_parent"

           android:background="#3A5FCD"

           android:layout_marginTop="10dp">

           <View

               android:layout_width="20dp"

               android:layout_height="50dp"

               android:background="#32CD32"

               android:layout_weight="1"/>

           <View

               android:layout_width="200dp"

               android:layout_height="50dp"

               android:background="#FF9800"

               android:layout_weight="1"/>

       </LinearLayout>