zl程序教程

您现在的位置是:首页 >  APP

当前栏目

Android 线性布局

2023-04-18 14:26:37 时间

一、线性布局概述

线性布局(LinearLayout)是一种比较常用且简单的布局方式。在这种布局中,所有的子元素都是按照垂直或水平的顺序排列在界面上。如果是垂直排列,每个子元素占一行,如果是水平排列,则每个子元素占一列。线性布局可以支持布局样式嵌套实现复杂的布局样式。

(一)继承关系图

在这里插入图片描述

(二)常用属性

  • layout_width:布局宽度(match_parent,wrap_conent)
  • layout_height:布局高度(match_parent,wrap_conent)
  • orietation:方向(vertical,horizontal)
  • gravity:对齐方式(left, right, center, top, bottom…)
  • background:背景(颜色、图片、选择器)
  • weight:比重(用于瓜分手机屏幕)
  • padding:内边距 (paddingLeft, paddingRight, - paddingTop, paddingBottom)
  • margin:外边距 (marginLeft, marginRight, marginTop, marginBottom)

二、线性布局

1、创建安卓应用【LinearLayoutDemo】

在这里插入图片描述
在这里插入图片描述

2、主布局资源文件activity_main.xml

在这里插入图片描述

  • 将约束布局改成线性布局
    在这里插入图片描述
  • 添加两个按钮
    在这里插入图片描述

3、启动应用,查看效果

在这里插入图片描述

  • 设置线性布局的方向 - orientation
    在这里插入图片描述

  • 查看效果
    在这里插入图片描述

  • 设置内边距 - padding
    在这里插入图片描述

  • 查看效果
    在这里插入图片描述

  • 设置线性布局的对齐方式 - gravity

  • left、right、center搭配,共有九种对齐方式

  • 线性布局gravity的默认值是left|top——左上

  • 右上对齐 - right|top
    在这里插入图片描述

  • 启动应用,查看效果
    在这里插入图片描述

  • 右中对齐 - right|center
    在这里插入图片描述

  • 右下对齐 - right|bottom
    在这里插入图片描述

  • 水平居中 - center_horizontal,相当于center|top
    在这里插入图片描述

  • 垂直居中 - center_vertical,相当于left|center
    在这里插入图片描述

  • 居中对齐 - center
    在这里插入图片描述

  • 背景属性(背景色、背景图片、背景配置文件)

  • 设置背景色
    在这里插入图片描述

  • 查看效果
    在这里插入图片描述

  • 设置背景图片
    在这里插入图片描述
    在这里插入图片描述

  • 在第二个按钮下添加一个线性布局
    在这里插入图片描述

  • 在drawable目录里创建自定义边框配置文件customer_border.xml
    在这里插入图片描述
    在这里插入图片描述

  • 查看效果
    在这里插入图片描述

  • 设置过渡色效果
    在这里插入图片描述

线性布局嵌套

1、创建安卓应用【NestedLinearLayout】

在这里插入图片描述
在这里插入图片描述

2、将准备好的素材拷贝到res/drawable目录

在这里插入图片描述

3、布局资源文件activity_main.xml

在这里插入图片描述

  • 将约束布局改成线性布局,设置方向属性
    在这里插入图片描述
  • 添加第一个线性布局
    在这里插入图片描述
  • 添加第二个线性布局
    在这里插入图片描述
  • 添加第三个线性布局
    在这里插入图片描述
  • 查看结果(三个子布局按照1:2:3垂直瓜分手机屏幕)
    在这里插入图片描述
  • 在第一个布局里添加三个图像控件
    在这里插入图片描述
  • 第二个线性布局里再嵌套一个横向的线性布局,里面添加三个按钮
  • 在第二个线性布局里再添加一个编辑框
    在这里插入图片描述
  • 查看效果
    在这里插入图片描述
  • 第三个线性布局再添加三个线性布局
    在这里插入图片描述
  • 查看效果
    在这里插入图片描述
  • 在第三个线性布局嵌套的第二个子布局里添加两个按钮
    在这里插入图片描述
  • 在第三个线性布局嵌套的第二个子布局里添加三个按钮
    在这里插入图片描述
  • 查看效果
    在这里插入图片描述