Android studio 线性布局

文章目录

  • 线性布局
    • 1、继承关系图
    • 2、常用属性
  • 线性布局属性
    • 1、创建安卓应用
    • 2、主布局资源文件
    • 3、字符串资源文件
    • 4、启动应用,查看效果
    • 5、设置布局属性,查看效果
      • (1)设置线性布局方向
    • (2)设置线性布局内边距
    • (3)设置线性布局对齐方式
    • (4)设置线性布局背景
  • 线性布局嵌套
    • 1、创建安卓应用
    • 2、准备图片素材
    • 3、主布局资源文件
    • 4、字符串资源文件
    • 5、启动应用,查看效果
    • 6、修改布局,查看效果

线性布局

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

1、继承关系图

LinearLayout是ViewGroup的子类,注意:后面我们要学习的单选按钮组(RadioGroup)是线性布局的子类
Android studio 线性布局_第1张图片

2、常用属性

属性 含义
layout_height 高度,单位:dp (wrap_content, match_parent)
layout_weight 宽度,单位:dp (wrap_content, match_parent)
orietation 方向(vertical,horizontal)
gravity 对齐方式(left, right, center, top, bottom…)
background 背景(颜色[color]、图片[drawable]、选择器[selector])
weight 比重(用于瓜分手机屏幕)
padding 内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)
margin 外边距 (marginLeft, marginRight, marginTop, marginBottom)

线性布局属性

1、创建安卓应用

  • 基于Empty Activity模板创建安卓应用 - LinearLayoutDemo
    Android studio 线性布局_第2张图片

  • 单击【Finish】按钮
    Android studio 线性布局_第3张图片

2、主布局资源文件

  • 主布局资源文件 activity_main.xml
    Android studio 线性布局_第4张图片
  • 将约束布局改为线性布局,删掉默认的标签
  • Android studio 线性布局_第5张图片
  • 添加两个按钮
  • Android studio 线性布局_第6张图片

3、字符串资源文件

  • 字符串资源文件 - strings.xml
  • Android studio 线性布局_第7张图片

4、启动应用,查看效果

  • 发现两个按钮水平摆放,在窗口左上角
    Android studio 线性布局_第8张图片

5、设置布局属性,查看效果

(1)设置线性布局方向

  • orientation属性
    -Android studio 线性布局_第9张图片

(2)设置线性布局内边距

  • padding (paddingTop, paddingBottom, paddingLeft, paddingRight)

Android studio 线性布局_第10张图片

(3)设置线性布局对齐方式

  • gravity (left、center、right、top、bottom可以搭配形成很多种对齐方式)
  • 设置右上对齐 - right|top

Android studio 线性布局_第11张图片

  • 删掉【按钮1】的右外边距
    Android studio 线性布局_第12张图片

  • 设置居中对齐 - center
    Android studio 线性布局_第13张图片

  • 设置左下对齐 - left|bottom
    Android studio 线性布局_第14张图片

  • 设置右下对齐 - right|bottom
    Android studio 线性布局_第15张图片

  • 设置上中对齐 - center
    Android studio 线性布局_第16张图片

  • 其余几种情况:左中对齐、右中对齐和下中对齐,大家自己玩一玩

(4)设置线性布局背景

  • 设置背景颜色(采用颜色变量)
    Android studio 线性布局_第17张图片
  • 设置背景颜色(采用颜色常量)
    Android studio 线性布局_第18张图片
  • 设置背景图片

Android studio 线性布局_第19张图片

  • 设置背景选择器
  • 添加一个线性布局,设置自定义边框

Android studio 线性布局_第20张图片

  • 实现边框渐变色效果
    Android studio 线性布局_第21张图片

线性布局嵌套

1、创建安卓应用

  • 基于Empty Activity创建安卓应用 - NestedLinearLayout
    Android studio 线性布局_第22张图片
  • 单击【Finish】按钮
    Android studio 线性布局_第23张图片

2、准备图片素材

  • 将三张小图片拷贝到res/drawable目录

Android studio 线性布局_第24张图片

3、主布局资源文件

  • 主布局资源文件 - activity_main.xml
    Android studio 线性布局_第25张图片
  • 将约束布局改为线性布局

Android studio 线性布局_第26张图片

  • 添加三个线性布局,按照1:2:3比例垂直瓜分手机屏幕
    Android studio 线性布局_第27张图片

4、字符串资源文件

  • 字符串资源文件 - strings.xml

Android studio 线性布局_第28张图片

5、启动应用,查看效果

  • 三个布局按照1:2:3比例垂直瓜分手机屏幕
    Android studio 线性布局_第29张图片

6、修改布局,查看效果

  • 在第一个布局添加三个水平摆放的图像视图
    Android studio 线性布局_第30张图片
  • 在第二个布局里添加一个横向线性布局,里面添加四个按钮

Android studio 线性布局_第31张图片

  • 在第二个布局里添加一个编辑框

Android studio 线性布局_第32张图片

  • 第三个布局里添加三个布局,按照1:2:3比例水平瓜分手机屏幕

Android studio 线性布局_第33张图片

你可能感兴趣的:(android,studio,android,ide)