安卓线性布局

article/2025/9/28 0:26:24

安卓线性布局

    • (一)界面与布局
      • 1、界面
      • 2、布局
        • (1)UI容器
        • (2)UI控件 (Control)
        • (3)两种方式声明布局
    • (二)线性布局
      • (1)常用属性
    • (三)案例演示:线性布局属性
      • 1、创建安卓应用
      • 2、字符串资源文件
      • 3、主布局资源文件
      • 4、启动应用,查看效果
      • 5、设置布局属性,查看效果
        • (1)设置线性布局方向
        • (2)设置线性布局内边距
        • (3)设置线性布局对齐方式
        • (4)设置线性布局背景
    • (四)案例演示:线性布局嵌套
      • 1、创建安卓应用
      • 2、准备图片素材
      • 3、字符串资源文件
      • 4、主布局资源文件
      • 5、启动应用,查看效果
      • 6、修改布局,查看效果

(一)界面与布局

1、界面

  • 应用界面包含用户可查看并与之交互的所有内容。安卓提供丰富多样的预置 UI 组件,例如结构化布局对象和 UI 控件,您可以利用这些组件为您的应用构建图形界面。安卓还提供其他界面模块,用于构建特殊界面,例如对话框、通知和菜单。

2、布局

  • 布局可定义应用中的界面结构(例如 Activity 的界面结构)。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而,ViewGroup 是不可见容器,用于定义 View 和其他 ViewGroup 对象的布局结构。

(1)UI容器

  • UI容器指ViewGroup,也是View的子类,而ViewGroup有几个布局子类:LinearLayout、RelativeLayout、AbsoluteLayout、TableLayout、GridLayout,ConstraintLayout。

(2)UI控件 (Control)

  • UI控件指Widget(微件),不能再包含其它元素的控件,例如标签(TextView)、文本框(EditText)、按钮(Button)、 活动栏(Action Bar)、对话框(Dialogs)、状态栏(Status)、通知(Notifications)。

(3)两种方式声明布局

  • 在 XML 中声明界面元素:Android 提供对应 View 类及其子类的简明 XML 词汇,如用于微件和布局的词汇。也可使用 Android Studio 的 Layout Editor,并采用拖放界面来构建 XML 布局。
  • 在运行时实例化布局元素:应用可通过编程创建 View 对象和 ViewGroup 对象(并操纵其属性)。
  • 借助 Android 框架,您可以灵活选择使用两种或其中一种方法来构建应用界面。例如,您可以在 XML 中声明应用的默认布局,然后在运行时修改布局。

(二)线性布局

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

(1)常用属性

属性含义
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
    在这里插入图片描述
  • 单击【finish】按钮
    在这里插入图片描述

2、字符串资源文件

  • 字符串资源文件 - strings.xml
    在这里插入图片描述
    在这里插入图片描述

3、主布局资源文件

  • 主布局资源文件 activity_main.xml
    在这里插入图片描述

  • 将约束布局改为线性布局,删掉默认的标签
    在这里插入图片描述

  • 添加两个按钮
    在这里插入图片描述

4、启动应用,查看效果

  • 发现两个按钮水平摆放,在窗口左上角
    在这里插入图片描述

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

(1)设置线性布局方向

  • orientation属性
    在这里插入图片描述

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

  • padding (paddingTop, paddingBottom, paddingLeft, paddingRight)
    在这里插入图片描述

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

  • gravity (left、center、right、top、bottom可以搭配形成很多种对齐方式)

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

  • 删掉【按钮1】的右外边距在这里插入图片描述

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

  • 设置左下对齐 - left|bottom
    在这里插入图片描述

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

  • 设置上中对齐 - center
    在这里插入图片描述

(4)设置线性布局背景

  • 设置背景颜色(采用颜色变量)
    在这里插入图片描述

  • 设置背景颜色(采用颜色常量)
    在这里插入图片描述

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

  • 设置背景选择器

  • 添加一个线性布局,设置自定义边框
    在这里插入图片描述

  • 实现边框渐变色效果
    在这里插入图片描述

(四)案例演示:线性布局嵌套

1、创建安卓应用

  • 基于Empty Activity创建安卓应用 - NestedLinearLayout
    在这里插入图片描述

  • 单击【Finish】按钮
    在这里插入图片描述

2、准备图片素材

  • 将三张小图片拷贝到res/drawable目录
    在这里插入图片描述

3、字符串资源文件

  • 字符串资源文件strings.xml
    在这里插入图片描述

4、主布局资源文件

  • 主布局资源文件 - activity_main.xml
    在这里插入图片描述

  • 将约束布局改为线性布局
    在这里插入图片描述

  • 添加三个线性布局,按照1:2:3比例垂直瓜分手机屏幕
    在这里插入图片描述

5、启动应用,查看效果

  • 三个布局按照1:2:3比例垂直瓜分手机屏幕
  • 在这里插入图片描述

6、修改布局,查看效果

  • 在第一个布局添加三个水平摆放的图像视图
    在这里插入图片描述

  • 在第二个布局里添加一个横向线性布局,里面添加四个按钮
    在这里插入图片描述

  • 在第二个布局里添加一个编辑框
    在这里插入图片描述

  • 第三个布局里添加三个布局,按照1:2:3比例水平瓜分手机屏幕
    在这里插入图片描述


http://chatgpt.dhexx.cn/article/Pa99000V.shtml

相关文章

安卓的常用布局看一篇就够了

目录 1-1 布局通用的属性 1-2 线性布局(LinearLayout) 1、常见属性: 2、线性布局的例子: 1-3 相对布局(RelativeLayout) 1、常见属性: 2、 相对布局的例子: 1-4 帧布局&a…

android布局技巧:创建高效布局

Android UI工具包提供了一些布局管理器,它们使用起来相当容易,而且,大多数的时候,你只需要使用它们最基本的特征来实现UI。 执着于基本特征的使用对于创建UI来说,往往不是最高效的。一个常见的例子就是滥用LinearLayo…

安卓7大基本布局

一:基础知识 1.Android七大基本布局分别是: LinearLayout(线性布局)、TableLayout(表格布局)、RelativeLayout(相对布局)、FrameLayout(层布局)、AbsoluteLayout(绝对布局)、GridLayout(网格布局)、ConstraintLayout(约束布局)。 2.七大基本布局的继承…

Android的六大基本布局

线性布局 LinearLayout相对布局 RelativeLayout表格布局 TableLayout绝对布局 AbsoluteLayout网格布局 GridLayout帧布局 FrameLayout 布局通用属性 属性名称功能描述android:id设置布局的标识android:layout_width设置布局的宽度android:layout_height设置布局的高度android:…

安卓布局详解:探索各种布局方式

文章目录 前言一、线性布局(LinearLayout)二、相对布局(RelativeLayout)三、帧布局(FrameLayout)四、表格布局(TableLayout)五、约束布局(ConstraintLayout)六…

微信小程序页面布局——上中下结构

小程序页面布局——上中下结构 内容简述 上中下结构:头脚固定中间滚动框 使用UI框架:Vant Weapp(引入安装参考) 为了方便,使用了less生成wxss,所以展示的是less代码,有需要可以看:https://www.jianshu.com…

微信小程序中的常用布局方式(总结)

参照Android开发,总结了微信小程序的常用的两种布局方式:1、线性布局(横版、竖版)。2、网格布局。 效果图如下: 一、网格布局 (1)固定Item个数的网格布局,主要用于功能模块入口展示…

微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动…

html的网格布局

网格布局 学习总结: 从7.19进入csdn夏令营后,感谢各位老师的辛苦讲解与发布任务,我对C1能力认证中web方面的知识有了极大的领会。学习过程中既温习了在校学习的知识,也学到了诸如网格布局,动画,less&#x…

网格布局(grid布局)

网格布局 他可以将页面分为多个网格,可以任意组合不同的网格 ,做出各种各样的布局。 网格布局为二维性质的。 设置行、列间距 grid-row-gap:1rem ;行间距 ** grid-column-gap: 1rem ;列间距** ** grid-gap: 1rem;**设置行列间距 设置容器的列宽和与…

CSS布局—网格布局Grid(一)

CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中。有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列。网格的大小既可以精确定义,也可以根据自身内容自动计算。你既可以将元素精确地放置到网格某个位置&…

CSS Grid 网格布局教程

一、概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。 上图这样的布局&…

css 网格布局

简介: 网格是由一系列水平及垂直的线构成的一种布局模式。一个网格通常具有许多的列(column)与行(row),以及行与行、列与列之间的间隙,这个间隙一般被称为沟槽(gutter)。…

微信小程序的页面布局(1)

微信小程序的页面布局主要用到两个文件,wxml(摆放各种组件)和wxss(设计排版) 因此,我们首先将要用到的组件按照一定的组织排序扔进wxml文件里,什么叫组织排序呢,这里注意就是组件与组…

微信小程序~利用模板实现《福利》页面的网格布局

什么是模板? 在微信小程序中,使用template来表示模板 为什么要使用模板? 使用模板文件能够降低代码重构,提高代码的复用性。 如何使用? 页面内使用:在页面内直接声明一个template并且引用代码如下&#xf…

【HTML/CSS】网格布局小案例

代码如下&#xff08;可以改动精简一些&#xff0c;我不想改了&#xff0c;改一下估计50行就够了&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compati…

微信小程序第三天(布局:栅格布局)

我根据微信小程序的特点弄了一套简单的栅格布局。 .row {display: block;margin: 0px; }.col {display: flex;font-family: -apple-system-font, "Helvetica Neue", sans-serif;font-size: 17px; }.col>.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7,…

HTML5 网页栅格布局

栅格布局&#xff1a;也称为网格系统&#xff0c;运用固定的格子设计版面布局。 Demo <!DOCTYPE HTML> <html><head><meta charset"UTF-8"/><title>栅格布局</title><style type"text/css">/*清空所有标签外边…

小程序宫格布局

之前写小程序的时候用了iview的宫格&#xff0c;好像跳过了很多要自己写的坑&#xff0c;今天测试了下&#xff0c;总结一下方法。注意小程序中flex和grid的用法有很多不一眼&#xff01;小心甄别&#xff01; 1.使用iview 去iview weapp github 引入index.json {"us…

Grid 布局 - 网格布局

目录 一、什么是Grid布局 二、容器属性值 2.1 grid-template-rows和grid-template-columns 2.1.1 grid-template-columns 2.1.2 grid-template-rows 2.2 row-grap和column-grap 2.2.1 row-grap 2.2.2 column-grap 2.3 grid-template-area 2.4 grid-auto-flow 2.5 just…